微信ウィジェット開発の基礎知識

グローバル構成:1.1すべてのページパスを構成する:app.jsonの{pages:[すべてのページを構成]}は、app.jsonはすべてのページのパスを書かなければなりません.そうしないと、エラーが発生します.各ページのwxssスタイルファイルは、現在のファイルでのみ有効1.2 tabBarナビゲーションを設定します:“tabBar”:{“color”:“#7 A 7 E 83”、//フォント色“selectedColor”:“#3 cc 51 f”、//選択時のフォントの色“borderStyle”:“black”、//tabbarエッジボックスの色、黒と白の“backgroundColor”:“#fff”、//背景色“list”://2-5、2-5個のナビゲーションしか設定できません{「page Path」:「page/newPage/index」、//ページパスをナビゲートし、パスマッチングtarbarナビゲーションによって「iconPath」:「image/icon_component.png」、//アイコンピクチャのパス「selectedIconPath」:「image/icon_component_HL.png」、//選択したときのピクチャのパス「text」:「トップページ」//ボタンテキスト},{"pagePath":[page/component/index],[iconPath]:[image/icon_component.png],[selectedIconPath]:[image/icon_component_HL.png],[text]:[コンポーネント]}2.Windows:ウィンドウスタイルの構成
3.登録プログラム:app.js設定に対応するライフサイクル関数(初期化完了時onLaunch、onShow表示、onHide非表示、エラー時onerror)設定グローバルデータ:globalData属性で設定、getApp()でappを取得できる.jsの構成オブジェクト
4.1.ファイルのインポート方法:4.2.ファイル全体をインポートして表示:includeページheader.wxmlのコンテンツをすべてインポートすることは、すべてのコンテンツをコピーすることに相当します.
const openIdUrl = require(‘./config’).openIdUrl
//ウィジェットアプリケーションのライフサイクルヒント//一般的にはグローバルオブジェクトを初期化するglobalDataという対像にグローバルデータを配置してApp({onLaunch:function(){console.log(‘App Launch’)}、//ウィジェット表示時(起動/バックグラウンドがフロントに切り替わった時に起動)onShow:function(){console.log(‘App Show’)}、//バックグラウンドに切り替え、他の微信ページに切り替え、他のプログラムに切り替えると、この関数onHide:function(){console.log(‘App Hide’)},globalData:{hasLogin:true,openid:null},//lazy loading openid getUserOpenId:function(callback){var self=thisが呼び出されます.

if (self.globalData.openid) {
  callback(null, self.globalData.openid)
} else {
  wx.login({
    success: function(data) {
      wx.request({
        url: openIdUrl,
        data: {
          code: data.code
        },
        success: function(res) {
          console.log('  openid  ', res)
          self.globalData.openid = res.data.openid
          callback(null, self.globalData.openid)
        },
        fail: function(res) {
          console.log('    openid  ，              ', res)
          callback(res)
        }
      })
    },
    fail: function(err) {
      console.log('wx.login       ，              ', err)
      callback(err)
    }
  })
}

} })
5.index.js:データとメソッド(index.wxmlビューページ要素はhtmlに相当)indexを格納する.jsonは現在のページの構成を表します
Page({//現在のファイルの下のpageグローバルを表すpageオブジェクト、すべての方法とデータ
/***ページの初期データ*/data:{msg:'これはdataのデータ',helloMsg:'helloWorld',obj:{helloMsg:'ウェルカムワード',otherText:'その他情報'}
},changeMsg:function(){this.setData({msg:'これは変更後の内容です',

})

}, clicktap:function(e){ console.log(e) },
/***ライフサイクル関数–ページのロードをリスニング*/onLoad:function(options){
},
/***ライフサイクル関数–リスニングページ初回レンダリング完了*/onReady:function(){var appConfig=getApp()/getApp()は、グローバル変数globalDataメソッドの下のデータを取得する関数メソッドconsole.log(appConfig)if(appConfig.globalData.hasLogin){this.setData({msg:'ログイン完了'})}else{this.set Data({msg:'はまだ登録されていません.ログインしてください}}},
/***ライフサイクル関数–ページのリスニング*/onShow:function(){var pageList=getCurrentPages()console.log(pageList)}
/***ライフサイクル関数–リスニングページ非表示*/onHide:function(){
},
/***ライフサイクル関数–ページのリスニング*/onUnload:function(){
},
/***ページ関連イベント処理関数–ユーザドロップダウンアクションをリスニング*/onPullDownRefresh:function(){
},
/***ページでタッチダウンイベントの処理関数*/onReachBottom:function(){
},
/***ユーザーは右上をクリックして共有*/onShareAppMessage:function(){
}, goPage(){ //wx.navigateTo({ //url: ‘/page/component/pages/button/button’, //}) wx.redirectTo({ url: ‘/page/component/pages/button/button’, }) } })