ホームページ > 記事 > WeChat アプレット > WeChat ミニ プログラム開発の概要
1. WeChat ミニ プログラムとは:
本題に戻りますが、WeChat ミニ プログラムの本質は何ですか?個人的には、WeChat ミニ プログラムの本質は、元のサードパーティの h5 ページに基づく一連のフロントエンド フレームワークであることを理解しています。WeChat チームは、WeChat にネイティブに実装できる機能を実装するためにのみ h5 を使用できます。写真のアップロードなど。次に、開発者を容易にするために jsbridge の API のオープン部分を採用します。ただし、大手メーカーとしては、jsbridge API の一部を公開するだけでは決してありません。ちなみに、WeChat は、現在の WeChat アプレットである vue や React のような独自の mvvm フレームワークを実装しています。公式ドキュメントではこれについて説明されています: このフレームワークは、独自のビュー層記述言語 WXML および WXSS と、JavaScript ベースのロジック層フレームワークを提供し、ビュー層とロジック層間のデータ送信およびイベント システムを提供し、開発者がデータとロジックに集中できるようにするためです。
本質的には、コードは最終的に JavaScript にパッケージ化され、ミニ プログラムが開始されると、ミニ プログラムが破棄されるまで実行されます。テンプレートの構文は Vue に似ており、ネイティブのカスタム タグに似ています。 データ バインディング レンダリングの構文は vue と似ていますが、wx: で始まります (vue は v: を識別子として使用します)。イベント システムは、react と同様に独自のイベント システムを定義します。
2. WeChat 動作環境:
WeChat アプレットは、iOS、Android、およびデバッグ用の開発者ツールの 3 つの端末で実行されます
iOS では、アプレットの JavaScript コードは JavaScriptCore で実行されます
Android では、ミニ プログラムは X5 カーネルを通じて解析され、ミニ プログラムの JavaScript コードは nwjs (Chrome カーネル) で実行されます。これは、ウィンドウ オブジェクトのない環境です。そのため、ウィンドウなどの BOM オブジェクトをスクリプトで使用することはできません。そのため、jqueryやzeptoなどのウィンドウやドキュメントを通じてDOMオブジェクトを取得するライブラリは使用できません。
小さなプログラムの主要部分は 3 つのファイルで構成されており、次のようにプロジェクトのルート ディレクトリに配置する必要があります:
app.js 論理部分、つまりグローバル変数またはメソッド
app .json ページ構成など、上部と下部のタブの設定、背景色などを含むパブリック構成
app.wxss パブリック スタイル シートは、特定のページ スタイルによってオーバーライドできます
//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": "其他" } ] } }
。 wxss ページのスタイルシートは、appapp.wxss よりも
言い換えると、特定のページに対応する js または wxss ファイルを指定する必要はなく、パスとファイル名を同じに保つだけで済みます。
4. テンプレート言語とイベント システム
1): テンプレートの構文は vue に似ており、ネイティブのカスタム タグに似ています。データ バインディングとレンダリングは vue の構文に似ていますが、wx で始まります: (vue は v: を識別子として使用します)
/** * 类似vue的条件渲染语法,熟悉vue的话应该不会陌生 **/ <view wx:if="{{condition}}"> </view>
2): イベント システム
イベント システムは、react に似ています。セットを定義します。独自のイベントシステム。一連の一般的なイベント タイプが含まれます:
touchstart 指のタッチ操作が開始されます
touchmove タッチ後に指が移動します すぐに離れる
/** *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. 構築がより便利な比較的確立されたコンポーネントライブラリを提供します1. フレームワークはブラウザ上で動作しないため、js関連のBOMメソッドは使用できません。ドキュメント、ウィンドウなど。ただし、現在のイベントに対応する DOM オブジェクトを取得することはできます。 React と比較すると、やはり使用が難しい dom、jq、zepto などのツール ライブラリを操作することは推奨されていません
2。 steam
3. 現在は利用できません。 開発者がnode_modulesを使用する必要がある場合、関連するコードをミニプログラムのディレクトリにコピーすることをお勧めします。手作業
以上がWeChat ミニ プログラム開発の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。