无码日韩精品无码国产_一级做a爰片久久毛片潮喷_国产欧美国日产_久久9热re这里只有国产中文精品6_每天将为您更新成人影视在线看免费观看

首頁(yè) 關(guān)于我們 小程序案例 小程序解決方案 小程序資訊 聯(lián)系我們
Menu
小程序資訊
小程序資訊
首頁(yè) > 小程序資訊 > 小程序常見問題
微信小程序把玩《二》：頁(yè)面生命周期，模塊化，數(shù)據(jù)綁定，view組件 ... ...
時(shí)間：2016-10-17 14:52:00
五：頁(yè)面生命周期

這里只要熟悉頁(yè)面的基本生命周期即可，業(yè)務(wù)在指定生命周期函數(shù)內(nèi)書寫。

以下是官網(wǎng)給出的生命周期函數(shù)方法和狀態(tài)圖

  • 上面的生周期函數(shù)圖對(duì)于做Android 或者IOS的來(lái)書理解起來(lái)應(yīng)該不是難事，具體怎么掌握只有慢慢嘗試和摸索

代碼處理:

這里的代碼主需要對(duì)使用創(chuàng)建項(xiàng)目時(shí)index目錄下文件處理下就行,至于跳轉(zhuǎn)后的頁(yè)面用的還是logs不需要更改！下面貼下代碼注釋也比較詳細(xì)

index.wxml

  1. <!--index.wxml-->
  3. <view class="container">
  5. <!--綁定點(diǎn)擊事件-->
  7.   <view  bindtap="bindViewTap" class="userinfo">
  9.   </view>
  11.   <view class="usermotto">
  13.   <!--數(shù)據(jù)綁定-->
  15.     <text class="user-motto">{{motto}}</text>
  17.   </view>
  19. </view>

index.wxss

  1. <!--index.wxml-->
  2. <view class="container">
  3. <!--綁定點(diǎn)擊事件-->
  4.   <view  bindtap="bindViewTap" class="userinfo">
  5.   </view>
  6.   <view class="usermotto">
  7.   <!--數(shù)據(jù)綁定-->
  8.     <text class="user-motto">{{motto}}</text>
  9.   </view>
  10. </view>

index.js

  1. //index.js
  2. //獲取應(yīng)用實(shí)例
  3. var app = getApp()
  4. Page({
  5.   /**
  6.    * 通過data初始化數(shù)據(jù)
  7.    */
  8.   data: {
  9.     motto: '點(diǎn)擊上面View跳轉(zhuǎn)',
  10.     // userInfo: {}
  11.   },
  12.   //事件處理函數(shù)
  13.   bindViewTap: function() {
  14.     //通過調(diào)用API進(jìn)行跳轉(zhuǎn)
  15.     wx.navigateTo({
  16.       url: '../logs/logs'
  17.     })
  18.   },
  19.   /**
  20.    * 監(jiān)聽頁(yè)面開在加載的狀態(tài)
  21.    *    頁(yè)面加載完成之后就不會(huì)在執(zhí)行
  22.    */
  23.   onLoad: function () {
  24.     console.log('index---------onLoad()')
  25.     // //this指的就是本頁(yè)面對(duì)象
  26.     // var that = this
  27.     // //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
  28.     // app.getUserInfo(function(userInfo){
  29.     //   //更新數(shù)據(jù)
  30.     //   that.setData({
  31.     //     userInfo:userInfo
  32.     //   })
  33.     //   //更新本頁(yè)面
  34.     //   that.update()
  35.     // })
  36.   },
  37.   /**
  38.    *  監(jiān)聽頁(yè)面顯示，
  39.    *    當(dāng)從當(dāng)前頁(yè)面調(diào)轉(zhuǎn)到另一個(gè)頁(yè)面
  40.    *    另一個(gè)頁(yè)面銷毀時(shí)會(huì)再次執(zhí)行
  41.    */
  42.   onShow: function() {
  43.     console.log('index---------onShow()')
  44.   },
  45.   /**
  46.    * 監(jiān)聽頁(yè)面渲染完成
  47.    *    完成之后不會(huì)在執(zhí)行
  48.    */
  49.   onReady: function() {
  50.     console.log('index---------onReaday()');
  51.   },
  52.   /**
  53.    * 監(jiān)聽頁(yè)面隱藏
  54.    *    當(dāng)前頁(yè)面調(diào)到另一個(gè)頁(yè)面時(shí)會(huì)執(zhí)行
  55.    */
  56.   onHide: function() {
  57.     console.log('index---------onHide()')
  58.   },
  59.   /**
  60.    * 當(dāng)頁(yè)面銷毀時(shí)調(diào)用
  61.    */
  62.   onUnload: function() {
  63.     console.log('index---------onUnload')
  64.   }
  65. })

六：模塊化

模塊化也就是將一些通用的東西抽出來(lái)放到一個(gè)文件中，通過module.exports去暴露接口。我們?cè)谧畛跣陆?xiàng)目時(shí)就有個(gè)util.js文件就是被模塊化處理時(shí)間的

  1. //index.js
  2. //獲取應(yīng)用實(shí)例
  3. var app = getApp()
  4. 
                	
    
                    	
                        秀杰實(shí)戰(zhàn)教程系列《一》：記賬應(yīng)用開發(fā)                    
    
                    
                	
    
                        微信小程序?qū)崙?zhàn)教程：火車票查詢（含demo）
咨詢
微信掃碼咨詢
電話咨詢
400-888-9358