技術標籤：button跳轉頁面順便把引數帶過去

在微信小程式的開發中，我們會經常遇到頁面間資料傳遞或者相互影響的問題。在實際的開發過程中，可以通過以下幾種方法來實現。

方法一：使用全域性變數

全域性變數實際上是定義了一個全域性的物件，並在每個頁面中引入。

在初始化程式碼的時候，小程式會讀取一個 app.js的檔案，首先在app.js 裡對全域性變數進行定以

app.js

App({  globalData: {mingzi:'iamsongyananappjs',  }  })

Pages/index/index.js

我們將index看作A頁面
首先在該檔案下宣告var app=getApp(); 然後

//將全域性變數的值賦給頁面的一個變數//index.jsvar app = getApp()Page({  /**   * 頁面的初始資料   */  data: {    msg:  app.globalData.mingzi    //拿到全域性變數 到時候就方便直接用msg去獲取到app.js中的具體變數  },   /**   * 生命週期函式--監聽頁面載入   */onLoad:function(){console.log(app.globalData);//全域性變數值的獲取  }})

Pages/index/index.wxml

<view>{{msg}}view>
 

方法二：navigator跳轉時

wxml頁面(引數多時可用“&”)

<navigator url="../navigator/navigator?title=我是navigate">跳轉到新頁面navigator><navigatorurl="../redirect/redirect?title=我是redirect"open-type="redirect">在當前頁開啟navigator>

或者

// 跳轉到新頁面wx.navigateTo({      url: "../navigator/navigator?title=我是navigate"})// 在當前頁開啟wx.redirectTo({ 　　　　url:  "../redirect/redirect?title=我是redirect"})
 

在跳轉的js程式碼可以獲取到title引數

在onLoad裡直接獲取傳過來的值。options為頁面跳轉所帶來的引數

Page({     data:{       title: "",   }, onLoad: function (options) {  //頁面初始化 options為頁面跳轉所帶來的引數  var title = options.title //獲取值}, })

方法三：列表index下標取值

wxml頁面

<button bindtap='clickMe' data-id='1'>點選button>

如果需要傳遞多個，可以寫多個data-[引數]的方式進行傳遞

js頁面

clickMe: function (e) {     var id = e.currentTarget.dataset.id         console.log(id);  },

方法四：form表單傳值

通過設定變數值儲存表單資料

這種方式也比較好實現，就是給表單項繫結事件，當內容發生變化時，set一下變數值。所以，提交表單的時候直接獲取變數值就OK了~

type="text" bindinput="inputTitle" name="title" value="{{title}}" auto-focus='true' />

可以給input繫結事件(bindinput="inputTitle")，然後在inputTitle裡面簡單處理一下：

  inputTitle: function (e) {    this.setData({      title: e.detail.value,  //title值      titleEmpty: e.detail.value.length == 0//長度    })  },

上面的titleEmpty是為了判斷title是否為空，如果為空，就不顯示右側的"清除icon"。這種方式很容易實現上面說的清空內容~

在form的submit時，直接var title = this.data.title; 就獲取到了表單資料，很方便~

但是，如果有多個輸入控制元件，我們不可能為每個控制元件新增 bindinput、bindchange 這類方法來獲取值。我們得這樣做：

第一步、新增 from 控制元件，併為其指定 bindsubmit 屬性值。第二步、新增輸入控制元件到 form 中，併為其指定 name 屬性值。第三步、新增 button 控制元件，併為其指定 form-type="submit"。第四步、在 js 中取值時，用 e.detail.value.xxx 或 e.detail.value["xxx"]，其中 xxx 為 name 屬性值。

.wxml 程式碼

<formbindsubmit="reg"><view>使用者：<inputtype="text"name="username"/>view><view>密碼：<inputpasswordname="password"/>view>  <view>興趣：<checkbox-group name="cb">    <label><checkbox value="A" />乒乓球label>    <label><checkbox value="B" checked="false" />羽毛球label>    <label><checkbox value="C" checked="{{checked}}" />排球label>checkbox-group>view>  <view>級別：<radio-group name="r">    <label><radio value="a" />初級label>    <label><radio value="b" />中級label>    <label><radio value="c" />高階label>radio-group>view><view><buttontype="primary"form-type="submit">註冊button>view>form>

.js 程式碼

 reg: function (e) {    console.log(e.detail.value)    wx.showToast({      title: e.detail.value["cb"].join(","),      icon: "success",      duration: 2000    });  },

重要說明

微信小程式的input 有個屬性叫 type，這個 type 有幾個可選值：

text：不必解釋number：數字鍵盤(無小數點)idcard：數字鍵盤(無小數點、有個 X 鍵)digit：數字鍵盤(有小數點)

注意：number 是無小數點的，digit 是有小數點的。

表示密碼框(個人認為太怪異，不如直接叫 password 標籤的好)。