小程序模板網(wǎng)

微信小程序數(shù)據(jù)綁定以及跳轉(zhuǎn)傳參

發(fā)布時(shí)間:2021-06-01 08:41 所屬欄目:小程序開發(fā)教程
首先,我們先創(chuàng)建一個(gè)新的項(xiàng)目??梢钥吹絼?chuàng)建的新的小程序有一個(gè)默認(rèn)的HelloWorld的Demo.如下圖
這里先介紹一下微信小程序的數(shù)據(jù)綁定

微信小程序的基于MINA框架開發(fā)的。每一個(gè)頁面由 .js(必須) .wxml(必須) .wxss(非必需) .json(非必須) 這四個(gè)文件組成,且命名必須相同。
我們打開pages文件夾下面的index.js.修改

Page({
  data: {
    motto: '第一頁的Hello World',//這里做了修改
    userInfo: {}
  }

將motto對(duì)應(yīng)的值做了一下簡單的修改,編譯,可以看到主頁的HellowWorld也已經(jīng)做了相應(yīng)的變化。在看看 .wxml文件

 <text class="user-motto">{{motto}}</text>

可以看到有這么一段代碼,而中間的{{motto}} 也剛好對(duì)應(yīng)了.js里面的motto。沒錯(cuò),這就是微信小程序的數(shù)據(jù)綁定。 通過{{ 對(duì)應(yīng).js中的對(duì)應(yīng)的data}}來進(jìn)行綁定。

接下來,我們要將這個(gè)我們修改過的motto設(shè)置成點(diǎn)擊事件,跳轉(zhuǎn)到另一個(gè)頁面并且將參數(shù)傳遞過去。

先添加點(diǎn)擊事件 gotologs
 <view class="usermotto">
    <text class="user-motto" bindtap="gotologs">{{motto}}</text>
  </view>
在.js里面添加方法。
gotologs() {
   wx.navigateTo({
     url: '../logs/logs?motto='+this.data.motto
   })
 }

由于使用的是ES6語法,你需要在項(xiàng)目里面勾上 ES5轉(zhuǎn)ES6



接下來修改logs.wxml來顯示我們要傳過去的參數(shù)。
 <view class="usermotto">
    <text class="user-motto">{{twomotto}}</text>
  </view>
當(dāng)然,你需要先在logs.js里面對(duì)穿過來的參數(shù)進(jìn)行處理。
Page({
  data: {

  },
  onLoad: function (options) {
     this.setData({
      twomotto: options.motto
    })
  }
})


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/25891.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢