微信小程式開發學習筆記[2]

---

目錄

微信小程式開發學習筆記[2]

 

一、小程式頁面事件處理[下]

1.1、按鈕事件

2.2、setData函式

2.3、解決多頁面全域性資料不同步的問題

二、JS程式碼的模組化

2.1、什麼是js程式碼的模組化

2.2、例子演示

---

一、小程式頁面事件處理[下]

1.1、按鈕事件

當按鈕按下時觸發一個函式：

<!--secondpage.mxml-->
<view >這裡是第二頁</view>
<view>
<!--bindtap後面是要繫結的處理函式的名稱-->
  <button size='mini'type='primary' bindtap="onTap">點我</button>
</view>

//secondpage.js
onTap:function(){
    console.log("onTap is called");
  }

2.2、setData函式

Page.prototype.setData()函式用於將資料從邏輯層傳送到檢視層（非同步），同時改變對應的this.data的值（同步）。

<!--secondpage.wxml-->
<view >這裡是第二頁</view>
<view>
<!--bindtap後面是要繫結的處理函式的名稱-->
  <view>當前數字：{{localData}}</view>
  <button size='mini'type='primary' bindtap="onTap">點我加一</button>
</view>

/**
   * secondpage.js
   * 頁面的初始資料
   */
  data: {
    localData:0
  },
  onTap: function () {
    console.log("onTap is called");
    this.setData({
      localData:++this.data.localData
    })
    
  }

2.3、解決多頁面全域性資料不同步的問題

問題描述：一個全域性資料globalData,在多個頁面都可以訪問，當在某頁面把資料更改時（例如在secondpage更改）切回firstpage時，頁面顯示的還是原來的資料。

問題根源：當從firstpage切換到secondpage後，firstpage進行了隱藏顯示secondpage，此時firstpage在後面隱藏著，切回來時，頁面並沒有進行重新整理。

解決辦法：在firstpage.js的onShow()函式裡對資料進行重新整理，亦即重新賦值一次。

<!--firstpage.wxml-->
<view >這裡是第二頁</view>
<view>
<!--bindtap後面是要繫結的處理函式的名稱-->
  <view>區域性當前數字：{{localData}}</view>
  <button size='mini'type='primary' bindtap="onTap">點我區域性加一</button>
</view>
<view>
<!--bindtap後面是要繫結的處理函式的名稱-->
  <view>全域性當前數字：{{globalData}}</view>
  <button size='mini'type='primary' bindtap="onGlobalTap">點全域性我加一</button>
</view>

//pages/secondpage/secondpage.js
var app=getApp();
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    localData:0,
    globalData:app.globalData
  },
  onTap: function () {
    console.log("onTap is called");
    this.setData({
      localData:++this.data.localData
    })
    
  },
  onGlobalTap: function () {
    console.log("onTap is called");
    this.setData({
      globalData: ++app.globalData
    })
})

<!--firstpage/firstpage.wxml-->
<text>hello world</text>
<view>全域性變數:{{globalData}}</view>

<!--頁面調轉-->
<navigator open-type='redirect' url="../log/log">點我調轉</navigator>
<navigator open-type='navigate' url='../log/log'>點我跳轉2</navigator>

//firstpage.js
onShow: function () {
    this.setData({
      globalData: app.globalData
    })
   
  }

 

二、JS程式碼的模組化

2.1、什麼是js程式碼的模組化

將一些公共的程式碼抽離成為一個單獨的js 檔案，作為一個模組，此即js程式碼的模組化。模組只有通module.exports或者exports才能對外暴露介面。

2.2、例子演示

• 在專案目錄下新建utils資料夾
• 在utils資料夾下新建一個單獨的js檔案，此處我新建一個test.js

//utils/test.js
function sayHello(str){
  console.log("hello "+ str);
}

//暴露給外部的介面名字:本檔案中介面的名字
module.exports={
  say:sayHello
}

• 在firstpage中使用介面 需要先使用require匯入當前檔案

//匯入test.js
var test = require("../../utils/test.js");
Page({
  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    test.say("pig");
  }

})