叨叨兩句

在之前的部落格中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(){
    // 頁面關閉
  }
})

效果

最後

因為是公司專案有一些程式碼不方便貼出來，貼出來的程式碼做學習之用。希望大家能通過我的部落格學到些微信小程式的開發技巧。:)