微信小程序url参数传递

叨叨两句

在之前的博客中glacier简单的介绍了一下微信小程序，并且写了个Demo带大家入了个门；
点击回顾

这次我们学习下微信小程序很重要的一点，URL传参。

干货

app.js

App({  onLaunch: function () {    console.log('App Launch')  },  onShow: function () {    console.log('App Show')  },  onHide: function () {    console.log('App Hide')  }})

app.json

{  "pages":[    "pages/index/index",    "pages/flowers/flower"  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#BBDEF8",    "navigationBarTitleText": "Glacier",    "navigationBarTextStyle":"black",    "backgroundColor": "#f7f7f7"  },}

以上是最基础的配置小伙伴们不要忘了在pages里面加上我们需要用到的页面

index.js

var flag = 0;Page({  data:{    // text:"这是一个页面"    //这是一个变量的数组，这个里面申请的变量都可以在 wxml中使用  },   click:function(event){   console.log("点击了文字");//这行是为了测试，点击事件有没有过来   flag = event.currentTarget.id;//获取到id   console.log(flag);   wx.navigateTo({url:'../flowers/flower?id='+flag});  },  onLoad:function(options){    // 页面初始化 options为页面跳转所带来的参数    console.log("Page onLoad");  }})

index.wxml

<view><image class="image_frame" src="url地址" mode="aspectFill" catchtap="click" id="1" > </image><image class="image_frame" src="url地址" mode="aspectFill" catchtap="click" id="2" > </image><text class="footer">更多内容持续更新中...</text></view>

index.wxss

.userinfo {  display: flex;  flex-direction: column;  align-items: center;}.userinfo-avatar {  width: 128rpx;  height: 128rpx;  margin: 20rpx;  border-radius: 50%;}.userinfo-nickname {  color: #aaa;}.usermotto {  margin-top: 200px;}.window{  color:#4995fa;}.window-red{  color:#D23933;}.image_frame{  width: 200rpx;  height: 200rpx;  margin: 20rpx 10rpx 0 30rpx;  display: inline-flex;}.footer{  display: flex;  flex-direction: row;  justify-content: center;   align-items: center;     font-size: 25rpx;  color: #ccc;  margin:20rpx 0 0 0;}

flower.wxml

<view class="classname"><image src="{{imgUrl}}" mode="widthFix" style="width:750rpx"></image></view>

这里{{imgUrl}}这种用法上次已经说过了，这种用法类似于变量，不过要在js文件中定义，然后再wxml文件中才能引用。再js文件中修改了之后别忘了使用this.setData刷新一下这个变量。

flower.js

//设置一个默认的imgUrlvar imgUrl = 'url地址';Page({  data:{    imgUrl  },  onLoad:function(options){    // 页面初始化 options为页面跳转所带来的参数    switch(options.id){    case "2": imgUrl = 'url地址';break;    case "3": imgUrl = 'url地址';break;    }    //别忘了刷新一下imgUrl参数使之生效    this.setData({          imgUrl        })     },  onReady:function(){    // 页面渲染完成  },  onShow:function(){    // 页面显示  },  onHide:function(){    // 页面隐藏  },  onUnload:function(){    // 页面关闭  }})

效果

最后

因为是公司项目有一些代码不方便贴出来，贴出来的代码做学习之用。希望大家能通过我的博客学到些微信小程序的开发技巧。:)

这是我的博客 http://www.glacier.market