微信小程序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

//设置一个默认的imgUrl
var 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