WeChat ミニ プログラム開発の概要

1. WeChat ミニ プログラムとは:

本題に戻りますが、WeChat ミニ プログラムの本質は何ですか?個人的には、WeChat ミニ プログラムの本質は、元のサードパーティの h5 ページに基づく一連のフロントエンド フレームワークであることを理解しています。WeChat チームは、WeChat にネイティブに実装できる機能を実装するためにのみ h5 を使用できます。写真のアップロードなど。次に、開発者を容易にするために jsbridge の API のオープン部分を採用します。ただし、大手メーカーとしては、jsbridge API の一部を公開するだけでは決してありません。ちなみに、WeChat は、現在の WeChat アプレットである vue や React のような独自の mvvm フレームワークを実装しています。公式ドキュメントではこれについて説明されています: このフレームワークは、独自のビュー層記述言語 WXML および WXSS と、JavaScript ベースのロジック層フレームワークを提供し、ビュー層とロジック層間のデータ送信およびイベント システムを提供し、開発者がデータとロジックに集中できるようにするためです。

本質的には、コードは最終的に JavaScript にパッケージ化され、ミニ プログラムが開始されると、ミニ プログラムが破棄されるまで実行されます。テンプレートの構文は V​​ue に似ており、ネイティブのカスタム タグに似ています。 データ バインディング レンダリングの構文は vue と似ていますが、wx: で始まります (vue は v: を識別子として使用します)。イベント システムは、react と同様に独自のイベント システムを定義します。

2. WeChat 動作環境:

WeChat アプレットは、iOS、Android、およびデバッグ用の開発者ツールの 3 つの端末で実行されます

iOS では、アプレットの JavaScript コードは JavaScriptCore で実行されます

Android では、ミニ プログラムは X5 カーネルを通じて解析され、ミニ プログラムの JavaScript コードは nwjs (Chrome カーネル) で実行されます。これは、ウィンドウ オブジェクトのない環境です。そのため、ウィンドウなどの BOM オブジェクトをスクリプトで使用することはできません。そのため、jqueryやzeptoなどのウィンドウやドキュメントを通じてDOMオブジェクトを取得するライブラリは使用できません。

3. ディレクトリ構造:

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

小さなプログラムの主要部分は 3 つのファイルで構成されており、次のようにプロジェクトのルート ディレクトリに配置する必要があります:

app.js 論理部分、つまりグローバル変数またはメソッド

app .json ページ構成など、上部と下部のタブの設定、背景色などを含むパブリック構成

app.wxss パブリック スタイル シートは、特定のページ スタイルによってオーバーライドできます

app.js コード (WeChat から取得したコード)公式デモ) とコメントは次のとおりです:

//app.js
// 微信小程序就是调用微信开放jsbridge，来完成微信h开发中某些原本比较难的功能的特定的微信前端框架
/**
* app 即小程序的生命周期管理。
* */
App({
// 初始化
onLaunch: function () {
 //调用API从本地缓存中获取数据
 var logs = wx.getStorageSync('logs') || []
 logs.unshift(Date.now())
 wx.setStorageSync('logs', logs)
},
// 全局方法或者变量，可在不同page中使用
getUserInfo:function(cb){
 var that = this
 if(this.globalData.userInfo){
 typeof cb == "function" && cb(this.globalData.userInfo)
 }else{
 //调用登录接口
 wx.login({
  success: function () {
  wx.getUserInfo({
   success: function (res) {
   that.globalData.userInfo = res.userInfo
   typeof cb == "function" && cb(that.globalData.userInfo)
   }
  })
  }
 })
 }
},
globalData:{
 userInfo:null
}
})

{
"pages":[
 "pages/index/index",
 "pages/logs/logs",
 "pages/swiper/swiper",
 "pages/input/input",
 "pages/form/form"
],
"window":{
 "navigationBarBackgroundColor": "#ffffff",
 "navigationBarTextStyle": "black",
 "navigationBarTitleText": "微信小程序",
 "backgroundColor": "#eeeeee",
 "backgroundTextStyle": "light"
},
"tabBar":{
 "borderStyle": "white",
 "list": [{
 "pagePath": "pages/index/index",
 "iconPath":"image/icon_API.png",
 "selectedIconPath":"image/icon_API_HL.png",
 "text": "首页"
  },{
 "pagePath": "pages/form/form",
 "iconPath":"image/plus.png",
 "selectedIconPath":"image/green_tri.png",
 "text": "更多"
 }, {
 "pagePath": "pages/swiper/swiper",
 "iconPath":"image/icon_COM.png",
 "selectedIconPath":"image/icon_COM_HL.png",
 "text": "其他"
 }
 ]
}
}

特定のページ 通常、次のファイルが含まれます (グローバル ファイルに似ていますが、このページにのみ適用されます):

.js ページのロジックは js と何ら変わりません

.wxml ページ構造は html に相当しますが、カスタムタグが多く適用されます

。 wxss ページのスタイルシートは、appapp.wxss よりも

優先度が高くなります。

.json ページ構成は、特定のページのタイトルとその他の要素を指定します

開発者が構成項目を削減しやすくするために、説明を指定します ページの 4 つのファイルは同じパスとファイル名を持つ必要があります。

言い換えると、特定のページに対応する js または wxss ファイルを指定する必要はなく、パスとファイル名を同じに保つだけで済みます。

4. テンプレート言語とイベント システム

1): テンプレートの構文は vue に似ており、ネイティブのカスタム タグに似ています。データ バインディングとレンダリングは vue の構文に似ていますが、wx で始まります: (vue は v: を識別子として使用します)

/**
* 类似vue的条件渲染语法，熟悉vue的话应该不会陌生
**/
<view wx:if="{{condition}}">
</view>

2): イベント システム

イベント システムは、react に似ています。セットを定義します。独自のイベントシステム。一連の一般的なイベント タイプが含まれます:

touchstart 指のタッチ操作が開始されます

touchmove タッチ後に指が移動します すぐに離れる

longtap 指がタッチした後、350ms 以上後に離れる

バインド方法: イベント バインディングは次のように記述されます。コンポーネントの属性と同様に、key+value:

の形式で、bind または catch で開始し、bindtap catchtouchstart などのイベントのタイプに従います。

value は文字列であり、同じ値を持つ関数です。名前は対応するページで定義する必要があります。そうしないと、イベントがトリガーされたときにエラーが報告されます。

bind イベント バインディングは、バブリング イベントが上方にバブリングすることを妨げませんが、catch イベント バインディングは、バブリング イベントが上方にバブリングすることを防ぐことができます。例:

/**
*bind/catch +事件类型，两种事件绑定方式
*/
<view id="outter" bindtap="handleTap1">
 outer view
 <view id="middle" catchtap="handleTap2">
 middle view
 <view id="inner" bindtap="handleTap3">
  inner view
 </view>
 </view>
</view>

3): イベント オブジェクト: BaseEvent 基本イベント オブジェクト、CustomEvent カスタム イベント オブジェクト、TouchEvent タッチ イベント オブジェクトなどが含まれます。

5. 利点と欠点:

1): 利点

1. 対応する jsbridge のようなサポートを提供し、特定の機能をより便利にします

2. 本質的には mvvm のフロントエンド フレームワークであり、操作を簡素化します。 。

3. 構築がより便利な比較的確立されたコンポーネントライブラリを提供します

4. 開発コストを削減する

5. 欠点

1. フレームワークはブラウザ上で動作しないため、js関連のBOMメソッドは使用できません。ドキュメント、ウィンドウなど。ただし、現在のイベントに対応する DOM オブジェクトを取得することはできます。 React と比較すると、やはり使用が難しい dom、jq、zepto などのツール ライブラリを操作することは推奨されていません

2。 steam

3. 現在は利用できません。 開発者がnode_modulesを使用する必要がある場合、関連するコードをミニプログラムのディレクトリにコピーすることをお勧めします。手作業

以上がWeChat ミニ プログラム開発の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。