ホームページ > 記事 > WeChat アプレット > ミニプログラムを使用する際の注意点は何ですか?

ミニプログラムを使用する際の注意点は何ですか?

小云云オリジナル: 2018-03-17 14:37:551486ブラウズ

この記事では主にミニプログラムで注意すべき点を紹介し、WeChat機能のより良い開発に役立てていただければ幸いです。

1. 詳細

1.アプレットには、プログラム全体を説明するアプリと、それぞれのページを説明する複数のページが含まれています

2。ビュー層とロジック層

ロジック層はJavaScriptで書かれています。

ビューレイヤーはWXMLとWXSSで記述され、コンポーネントで表示されます。コンポーネントはビューの基本コンポーネントです。

論理層のデータをビューに反映すると同時に、ビュー層のイベントを論理層に送信します。

2. ちょっとした豆知識

1. App()関数は小さなプログラムを登録するために使用されます。 1つを受け入れますアプレットのライフサイクル機能などを指定するオブジェクトパラメータ。

はすべてapp.jsファイルにあります

2.Page()関数はページの登録に使用されます。オブジェクトを受け入れるページの初期データ、ライフサイクル関数、イベント処理関数などを指定するパラメーター。

(1).初期化データ: data

データはロジック層からレンダリング層にJSON形式で送信されるため、そのデータはJSON に変換する必要があります形式: 文字列、数値、ブール値、オブジェクト、配列。

2a36ee6120961753550522f52eb8b28a コントロールの表示と非表示を切り替える

51184bddf12d7f17d51841733bd1d942列表1de5f4c1163741e920c998275338d29b2

data:{  
    open:false  
  },  
  showitem:function(){  
      this.setData({  
          open:!this.data.open  
      })  
  }

rreee

4 .通过data-*data-* 和 e.target.dateset 和e.target.dateset 传递パラメータ

283eed59fef83674640c93d96f3ff046{{firstperson}}de5f4c1163741e920c998275338d29b2

e07fd1ad4144571632e328035dc6ea2d吃de5f4c1163741e920c998275338d29b2

.display_show{  
    display: block;  
}  
.display_none{  
    display: none;  
}

今回：firstperson=吃

5.弹性盒字：display:flex;

this.setData({  
             firstPerson:e.target.dataset.me,  
       })

在父级：display:flex;

justify-content :space-between;

この子集就会并列。justify-content:space-between;この子集就会はそれぞれ俩头

にあります

6.获取自身の样式 e.detail.width,e.detail.height

🎜

c89ae9cf7ee98599514ae4f90566f40ff8e950ebc6c1ea27f76cf997b9216fe6

var app = getApp()
Page({
	data: {
		imgwidth:0,  
        imgheight:0,
        
	},
	imageLoad: function(e) {  
        var _this=this;  
        var $width=e.detail.width,    //获取图片真实宽度  
            $height=e.detail.height,  
            ratio=$width/$height;   //图片的真实宽高比例  
        var viewWidth=this.data.screenWidth,           //设置图片显示宽度，  
            viewHeight=parseInt(viewWidth/ratio);    //计算的高度值
        _this.setData({  
            imgwidth:viewWidth,  
            imgheight:viewHeight  
        })
    }

7.如何定义全局数据

在app.js的App({})中定义的数据或函数都是全局的，在页面中可以通过var app = getApp(); app.function/key的方式调用（不过我们没有必要再app.js中定义全局函数）

（1）设置全局变量

App({

globalData:{
userInfo:null,
test:"test"
}

})

获取变量值

var test = getApp().globalData.test;
console.log(test)

三.注意点小程序误区

1.小程序不是Html5。小程序是微信全新定义的规范，是基于xml+js的，不支持也不兼容HTML，兼容受限的部分css写法。

小程序和腾讯X5引擎也没关系。X5是QQ浏览器团队的，是基于HTML的，但小程序是微信团队自研的

2.小程序不是b/s。微信宣传的一个重点，是触手可得，不用安装。但小程序并不是b/s的在线页面，它是c/s架构的。

3.小程序体验好并且小程序并非只适合低频或长尾应用

4. ミニプログラムはアプリストアではなく、OS (オペレーティングシステム) です

ミニプログラムを使用する際の注意点は何ですか?

関連記事