小程序模板网

微信小程序传值基础知识与onload获取说明

2018-04-16 嚜杘蟹

一:传值基础知识

分享者:东阳,原文地址 
(1)页面跳转如何传值(实现跳转到不同页面)

点击页面

WXML:加入自定义属性(data-category="{{categoryTitle}}")

 

  1. <view class="more" catchtap="onMoreTap" data-category="{{categoryTitle}}">

js:在event中取出category值并加到URL中

 

  1. onMoreTap:function(event){
  2. var category=event.currentTarget.dateset.category;
  3. wx.navigateTo({
  4. url:"more-movie/more-movie?category="+category
  5. })
  6. }

(2)小程序js中两个函数如何传值

 

  1. Page({
  2. data:{
  3. navigateTitle:" ",
  4.  
  5. },
  6. onLoad:function(options){
  7. var category = options.category;
  8. this.data.navigateTitle = category
  9. },
  10. onReady : function(event){
  11. wx.setNavigationBarTitle({
  12. title: this.data.navigateTitle
  13. })
  14. }
  15. })

二:onload获取说明  分享者:HaiJing1995  onLoad是一个生命周期函数,表示页面加载  onLoad默认有一个Object类型的参数,是指其他页面打开当前页面所调用的 query 参数

举个栗子~  当我们在页面first的js脚本中有一个点击方法onTap  当点击时页面跳转到second页面,用?id = secondId的形式为second页面传递一个值(这里的secondId是一个已经获取过的值)

 

  1. onTap: function(){
  2. wx.navigateTo({
  3. url: "second?id=" + secondId
  4. })

接着我们在second的js文件中接收这个id  这里的参数option就是我们之前收到的Object参数,这样我们就可以在second.js中使用这个id值了

 

  1. Page({
  2. onLoad: function(options){
  3. var secondId = options.id;
  4. console.log(postId);
  5. }
  6. })

注:  我在刚开始运行这段代码时postId输出始终为undefined,输出option中也没有id值。最后将first中的url从单引号改为双引号才得以解决,以为真的是这个原因,可又改回单引号发现一样可以正常运行。不知道是哪里的bug,但像这样改了一下无关紧要的东西才能正常运行的情况我已经遇见好几次了。


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23481.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询