仕事の都合で、著者はかつてWeChatアプレットとSAPシステムを統合したプロジェクトに参加したことがあり、WeChatアプレットの開発知識を一から学びました。ここでは、関連する学習者を支援することを期待して、一連の記事を通じて学んだことを共有します。
このチュートリアルの最初の2つの記事：
- WeChatミニプログラム開発シリーズ（1）：開発環境の構築とビューの設計およびWeChatミニプログラムの開発
- WeChatミニプログラム開発シリーズ（2）：WeChatミニプログラムのシングルステップデバッグおよびコントローラー実装ステップの概要
このチュートリアルの最初の2つの記事を紹介することで、WeChatアプレットのビューとコントローラー、およびWeChatデバッガーの使用法についての基本的な理解がすでに得られています。これに基づいて、WeChatアプレットコントローラーをさらに研究し、アプレットコントローラーでのユーザー入力に応答する方法を習得しましょう。
この例は非常に単純です。WeChatアプレットのビューindex.wxmlでボタンとテキスト要素を定義します。
<button bindtap="jerry_increase"> 点我加1 </button>
<text class="user-motto">{
{counter}}</text>
テキスト要素はアプレットデータモデルのcounterフィールド、カウンターです。ボタンには、イベントハンドラーがバインドされていjerry_increaseます。
ボタンがクリックされるたびに、WeChatアプレットUIのカウンターが1つ増えます。
これを行うには、最初にコントローラーindex.jsのデータデータモデルにcounterフィールドを追加する必要があります。
次にbutton、のbindtapバインドされた関数jerry_increaseを実装します。
このイベントハンドラーに入力パラメーターeがあることがわかります。
イベントハンドラーが呼び出されると、入力パラメーターeがWeChatフレームワークによってイベントハンドラーに自動的に渡されます。このパラメーターeの詳細は、WeChat開発者ツールのデバッガーで確認できますtap。イベントが発生したX座標とY座標、およびイベントタイプのタップです。
現在のコントローラーイベント処理関数の実行スタックから観察すると、前のレイヤー、つまりWeChatフレームワークレイヤーの処理ロジックで、イベント処理関数が呼び出される前後に2つの現在のタイムスタンプが取得されていることがわかります。タイムスタンプ間の差が1000ミリ秒より大きい30365場合、 Reporter.slowReport。
このことから、WeChatは、開発者が実装するイベント処理機能が可能な限り効率的であり、実行時間が1秒を超えないことを望んでいることがわかります。携帯電話の使用シナリオでは、1秒の待機時間はエンドユーザーにとって短すぎません。
言及する価値のあるもう1つのポイントは、データモデルの値をでJavaScript直接変更しても、UIでは何も変更されないということです。
以下は間違ったアプローチです：
jerry_increase: function(e){
this.data.counter = this.data.counter + 1;
},
これを行う正しい方法は次のとおりです。
jerry_increase: function(e){
this.setData({
counter: this.data.counter + 1
});
},
私たちはそれを行う正しい方法を踏むことによって謎を理解することができます：
WeChatフレームワークの関数が呼び出され、関数this.setData。c.default.emitemit
実装を引き続き表示emitするemitと、WeChatツールクラスwxのていることがわかります：invokeWebviewMethod。
WAService.jsの内部実装から、携帯電話でのWeChatアプレットの実行が実際にWebViewで実行されていることがわかります。
WeixinJSBridge.publish.apply(WeixinJSBridge, e)このコード行が実行されると、UIのカウンターが更新されます。
この記事では、ボタンクリックイベントに応答するためにWeChatアプレットでJavaScriptを作成する方法を紹介します。
このシリーズの次の記事では、現在のユーザー情報の取得などの強力な機能の使用法など、WeChatアプレットのボタンコンポーネントによって提供されるいくつかのWeChatネイティブ機能を紹介します。
WeChatフレームワークAPI呼び出し
これまでの紹介を通じて、WeChatアプレットのビューとコントローラー、WeChatデバッガー、およびWeChatアプレットのユーザーイベントに応答するためにWeChatコントローラーでJavaScript関数を作成する方法についての基本的な知識がすでに得られています。
ここで、WeChatアプレットの実用的な例を開発して、以前に学んだことをさらに強化します。
この例の効果は次のとおりです。WeChatアプレットにボタンが表示されます获取头像昵称。
クリックすると、WeChatアプレットはAPI、ニックネーム、アバター、州、市、およびWeChatフレームワークによって提供されるその他の情報など、現在このボタンをクリックして以下に示すようにアプレットページに表示します。次の図。
ビューデザイン：
<view class="userinfo">
<button open-type="getUserInfo" bindgetuserinfo="jerry_getUserInfo"> 获取头像昵称 </button>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{
{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{
{userInfo.nickName}}</text>
<text class="userinfo-nickname">{
{userInfo.city}}</text>
<text class="userinfo-nickname">{
{userInfo.country}}</text>
<text class="userinfo-nickname">{
{userInfo.province}}</text>
</view>
このビューには、ボタン要素1つ、画像要素1つ、テキスト要素4つを含む、合計6つのUI要素があります。
button要素は、ユーザーのクリックイベントに応答し、WeChatフレームワークのAPIを呼び出してユーザーの詳細を読み取る役割を果たします。
1つの画像要素はボタンをクリックしたWeChatユーザーのアバターを表示し、残りの4つのテキスト要素はWeChatユーザーの詳細を表示します。最後の5つのUI要素のバインディングパスはすべてuserInfoであり、ボタンをクリックした後にWeChatAPIを呼び出すことでuserInfoのデータが読み取られます。
このuserInfoは、コントローラーindex.jsで定義したデータモデルです。
Page({
data: {
userInfo: {
}
}
});
戻って、この記事のこのアプレットの最も重要なbutton要素。これには2つのプロパティがあります。
-
open-type = "getUserInfo"：ボタンがクリックされた後、WeChatフレームワークのAPIが自動的に呼び出されることを
getUserInfo示します; -
bindgetuserinfo = "jerry_getUserInfo"：コントローラーに実装されて
index.jsいる。
WeChatフレームワークのAPI呼び出しがWeChatユーザーの詳細を正常に取得すると、作成したコールバック関数が入力パラメーターとしてWeChatユーザーの詳細を使用して呼び出されます。
jerry_getUserInfo: function(e) {
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo
});
}
アプレットがアクセスできるコンテキストにはwx、WeChatフレームワークによって公開されるすべてのAPIを含むグローバル変数があります。
これに関するすべてのメンバーの説明は、WeChatアプレットの公式Webサイトにあります。wx
別のAPI、getSystemInfoを試してみましょう。
まず、アプレットビューでボタンを定義し、JavaScript関数jerry_systeminfoをバインドしてgetSystemInfoをトリガーします。
<button bindtap = "jerry_systeminfo"> 获取系统信息 </button>
次にgetSystemInfo、の。
<text class="userinfo-nickname">{
{systeminfo.model}}</text>
<text class="userinfo-nickname">{
{systeminfo.pixelRatio}}</text>
<text class="userinfo-nickname">{
{systeminfo.windowWidth}}</text>
<text class="userinfo-nickname">{
{systeminfo.windowHeight}}</text>
<text class="userinfo-nickname">{
{systeminfo.language}}</text>
<text class="userinfo-nickname">{
{systeminfo.version}}</text>
<text class="userinfo-nickname">{
{systeminfo.platform}}</text>
wx.getSystemInfo返された結果は入力パラメーターとして使用されます。このパラメーターは、定義したsuccessコールバックsetData、ビューのデータ構造に設定するために使用されます。
jerry_systeminfo: function(){
var that = this;
wx.getSystemInfo({
success: function (res) {
var systeminfo = {
};
systeminfo.model = res.model;
systeminfo.pixelRatio = res.pixelRatio;
systeminfo.windowWidth = res.windowWidth;
systeminfo.windowHeight = res.windowHeight;
systeminfo.language = res.language;
systeminfo.version = res.version;
systeminfo.platform = res.platform;
try {
that.setData({
systeminfo: systeminfo
});
}
catch(e){
console.log(e);
}
}
})
},
最後に、Android Samsung電話で[システム情報を取得]をクリックするSM-C7010と、Samsung電話のモデルなどの詳細情報が表示されました。
要約する
このチュートリアルでは、最初にWeChatアプレットコントローラーがユーザークリックイベントに応答する方法を紹介し、次に現在のユーザーのWeChatニックネームと携帯電話信号を取得する方法の実際の例を通じてWeChatアプレットがWeChatプラットフォームAPIを消費する方法を紹介します。
このチュートリアルの最初の2つの記事：