マイクロ信ウィジェットdemo分析

最近微信のプログラムがうるさくて、このプログラムを見に来ることにしました。 アプリっていうのはwebappだよ まず公式サイトを見てみましょう ソースのダウンロード プロジェクト構造を開く quickstart pages(ページファイル) utils(ツール関数) app.js(エントリファイル) app.json(登録ファイルの管理はpackage.jsonと類似) app.wxss(スタイルファイル) まずappを見てください。jsエントリファイルはプログラムのエントリとして1つのグローバルオブジェクトAppを暴露し、そのうち2つの方法と1つのオブジェクトonLaunch getUserInfo globalDataがある。 //app.js App({ onLaunch: function () { //APIを呼び出してローカルキャッシュからデータを取得 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, 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 } }) app.json登録ページとスタイルリソースファイルリスト { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } } pages index.jsは各ページに1つのPageオブジェクトを見て、このニマはvueとあまり差がないのではないでしょうか。vue templateはdomのようなカスタムラベルです。 {{userInfo.nickName}} {{motto}} これがscriptとvueのインスタンスの差が少ないことです //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 }) }) } }) index.wxssこれがスタイルファイルの接尾辞名を変えただけです /**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; } 実际にはvueプロジェクトとの差は多くないが、テンセント自身がカプセル化したものにすぎない。小さなプログラムと纯粋なwebapp比を见ると、微信内部ではwxオブジェクトがwx対応でwebの能力を大きく広げることができることが明らかになったが、原生の境界を超えてはならない。 微信の小さいプログラムの資源はまとめて笑って微信の小さいプログラムを見ます