WeChat ミニプログラム開発の初体験-ミニプログラム開発-php.cn

WeChat ミニプログラム開発の初体験

高洛峰

リリース： 2017-02-10 11:55:52

オリジナル

2157 人が閲覧しました

先週、私の画面がミニプログラムによってブロックされたので、週末に急遽 Zhihu Daily のミニプログラムバージョンを作成しました。この開発経験と落とし穴についてまとめたいと思います。遭遇した。このミニプログラムは、公開後 2 日目にクラックされました。WeChat は 3 日目に開発ツールをダウンロードしました。プロジェクトを作成するときに、appid を選択しないでください。 no である appid は検証されています。

先週、画面がミニプログラムでいっぱいになったので、週末にすぐに Zhihu Daily のミニプログラムバージョンを開きました。あまりにもショックだったので、この開発体験と遭遇した落とし穴についてまとめておきたいと思います。

開発環境の準備

WeChatは公開後2日目に開発ツールをダウンロードしました

WeChat ミニプログラム開発の初体験。

create プロジェクトを選択するときに、appid 検証が行われないように [No appid] を選択します。

ディレクトリ構造

WeChat ミニプログラム開発の初体験

app.jsはアプリロジック、app.wxssグローバルスタイルファイルapp.json構成情報を登録します
pagesはページファイルを保存します
utilsツールクラスコード

最初のページを開発します

コードは新しいプロジェクトから来ています

<!--index.wxml--> <view>   <view>     <image></image>     <text>{{userInfo.nickName}}</text>   </view>   <view>     <text>{{motto}}</text>   </view> </view>

ログイン後にコピー

/**index.wxss**/ .userinfo {   display: flex;   flex-direction: column;   align-items: center; }  .userinfo-avatar {   width: 128rpx;   height: 128rpx;   margin: 20rpx;   border-radius: 50%; }  .userinfo-nickname {   color: #aaa; }  .usermotto {   margin-top: 200px; }

ログイン後にコピー

//index.js //获取应用实例 var app = getApp() Page({   data: {     motto: 'Hello World',     userInfo: {}   },   //事件处理函数   bindViewTap: function() {     wx.navigateTo({       url: '../logs/logs'     })   },   onLoad: function () {     console.log('onLoad')     var that = this     //调用应用实例的方法获取全局数据     app.getUserInfo(function(userInfo){       //更新数据       that.setData({         userInfo:userInfo       })     })   } })

ログイン後にコピー

新しいプロジェクトでは、インデックスの下にこれらのコードが表示されます

wxml

。これはページ構造の説明ファイルであり、主に次のコンテンツに使用されます

wxss

スタイルファイルは基本的にcss構文と同じですが、サポートされているセレクター構文は制限されています。こちらを参照してください。フレックスボックスを使用してレイアウトを完成させます。

インポートコマンドを内部的に使用して、外部スタイルファイルを導入することもできます

@import "common.wxss";  .pd {     padding-left: 5px; }

ログイン後にコピー

ページのロジック制御は、commonJs 仕様に従ってください

// util.js function formatTime(date) {   // .... }  function formatDate(date, split) {   // ... } module.exports = {   formatTime: formatTime,   formatDate: formatDate }

ログイン後にコピー

var utils = require('../../utils/util.js')

ログイン後にコピー

ここでの js はブラウザ環境では実行されないため、window.* とこのタイプのコードはエラーを報告し、dom 操作は許可されません。現時点では公式は他の js ライブラリの操作をサポートしていないようです。これは将来的に完全に改善されるはずです。

ページの Page メソッドを使用してページを登録します

Page({   data:{     // text:"这是一个页面"   },   onLoad:function(options){     // 页面初始化 options为页面跳转所带来的参数   },   onReady:function(){     // 页面渲染完成   },   onShow:function(){     // 页面显示   },   onHide:function(){     // 页面隐藏   },   onUnload:function(){     // 页面关闭   } })

ログイン後にコピー

バインドされたデータを変更する必要がある場合は、 setData メソッドを呼び出して変更する必要があります。これにより、次のようにページの更新がトリガーされます:

Page({     data: {         text: '这是一个页面'     },     onLoad: function() {         this.setData({             text: 'this is page'         })     } })

ログイン後にコピー

条件付きレンダリングとリストレンダリング

以下の内容はWeChat公式ドキュメントからのものです。

アプレットは、vue の v-if

<view> True </view>

ログイン後にコピー

と同様に、wx:if="{{condition}}" を使用して条件付きレンダリングを完了します。また、wx:elif と wx:else を使用して else ブロックを追加することもできます:

<view> 5}}"> 1 </view> <view> 2}}"> 2 </view> <view> 3 </view>

ログイン後にコピー

wx :for コントロール属性は配列にバインドされており、配列内の各項目のデータを使用してコンポーネントを繰り返しレンダリングできます。

組み込み変数インデックス (配列トラバーサルの添字)、アイテム (配列トラバーサルの各項目)

<view>   {{index}}: {{item.message}} </view>

ログイン後にコピー

Page({   items: [{     message: 'foo',   },{     message: 'bar'   }] })

ログイン後にコピー

配列の現在の要素の変数名を指定するには、wx:for-item を使用します

wx:for- を使用します配列を指定するインデックス現在の添字の変数名:

<view>  {{idx}}: {{itemName.message}}  </view>

ログイン後にコピー

Event binding

wxml は、bind[eventName]="handler" 構文を使用してイベントをバインドするだけです

<view><text>tap</text></view>

ログイン後にコピー

Page({     bindViewTap: function(e) {         console.log(e.taget)     } })

ログイン後にコピー

data-* と e にパラメータを渡します。 target.dateset

<view><text>tap</text></view>

ログイン後にコピー

Page({     bindViewTap: function(e) {         // 会自动转成驼峰式命名         console.log(e.taget.dataset.testMsg) // 啦啦啦啦啦啦     } })

ログイン後にコピー

これまで遭遇した落とし穴

イベントバインディングe.target.dataset

イベントとパラメータを親コンポーネントにバインドするとき、クリックされると、子コンポーネントはイベントをバブルアップします。現時点では、e.target.dataset が空です

  <view><text>tap</text></view>

ログイン後にコピー

Page({     bindViewTap: function(e) {         console.log(e.taget.dataset.testMsg) // undefined     } })

ログイン後にコピー

オンライン画像の読み込みが不安定です

Zhihu Daily プロジェクトでは、インターネットからダウンロードする必要がある画像が大量に表示されます。ここの画像コンポーネントは非常に不安定で、多くの画像が表示できません。

最後に

WeChat アプレットはまだ内部テスト段階にあり、改善する必要がある問題はたくさんありますが、それでも良いものです。開発スピードと経験の点で、正式リリースの日を楽しみにしています。

WeChat アプレット開発の初体験に関するその他の記事については、PHP 中国語 Web サイトに注目してください。