這篇文章為大家介紹微信小程式中頁間值傳遞的2種方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
一:url帶參數傳遞
與前端語言一樣,小程式頁間的傳遞可以透過在路由url後接參數,路由的同時會將參數一併傳遞到新的頁面。
index.wxml:
<!--index.wxml--> <view class="container"> <!-- 使用navigator组件 --> <navigator url="../demo/demo?title=参数传递">title=参数传递</navigator> </view>
demo.js##
// pages/demo/demo.js Page({ data: { title:'' }, onLoad: function (options) { console.log(options) //打印options,可以看到title的值可以获取到 this.setData({ title:options.title //为页面中title赋值 }) }, })
demo.wxml
<!--pages/demo/demo.wxml--> <view class='container'> {{title}} </view>效果圖:
#C1數值存入全域變數
我們同樣可以將所需的數值存入全域變數中,在需要的地方直接引用就好了。
app.js//app.js
App({
globalData: {}
})
#index.wxml##<!--index.wxml-->
<!-- 点击触发goto_demo函数 -->
<view class="container" bindtap='goto_demo'>
title=参数传递
</view>
//index.js //获取应用实例 const app = getApp() Page({ data: { title:'参数传递' }, goto_demo: function() { app.globalData.title = this.data.title wx.navigateTo({ url: '../demo/demo', }) } })
demo.js
// pages/demo/demo.js //获取应用实例 const app = getApp() Page({ data: { title:'' }, onLoad: function (options) { console.log(app.globalData.title) //打印options,可以看到title的值可以获取到 this.setData({ title: app.globalData.title //为页面中title赋值 }) }, })需要用到全域變數時記得先取得應用程式實例:const app = getApp()#########效果圖同上。 #########相關學習推薦:###小程式開發教學######
以上是淺談小程式中頁間傳值的2種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!