微信小程序*雲開發 頁面跳轉 navigator的運用並以title傳值調用

在微信開發者工具中我們的代碼編寫分爲兩個部分

雲服務數據庫中的操作
定義集合 “goods”
字段分別爲 goodsname，goodsprice，goodstype，goodsdesc，goodsimg

跳轉之前的界面操作

1.在本次示例中爲index

在index.wxml中編寫：
(1).url：跳轉到目標頁面的路徑和傳遞的值（多個值用&連接）
(2).image標籤中加入mode="aspectFit"屬性，讓圖片保持縱橫比縮放圖片

    <navigator hover-class="none" url="/pages/list/index?title=可樂&id=5b8e37e34b640a63b33272dc">
      <image src='/images/lobster.jpg' mode="aspectFit"></image>
      <text>可樂</text>
    </navigator>
    <navigator hover-class="none" url="/pages/list/index?title=雪碧&id=5b8f45f2afb7c17788e11994">
      <image src='/images/crab.png' mode="aspectFit"></image>
      <text>雪碧</text>
    </navigator>

跳轉之後的目標界面

2.在本次示例中爲list
在index.js中編寫：

const db = wx.cloud.database({});
const cont = db.collection('goods');
Page({
  data: {  
    goodslist:[] //存儲goods集合中的數據
  },
  onLoad: function (e) {
    wx.setNavigationBarTitle({
      title: e.title//頁面標題爲路由參數
    })
    var _this = this;
    //雲數據庫中goods集合的字段goodstype爲條件查詢
    db.collection('goods').where({
      goodstype:e.title //title對應goods集合的goodstype字段
    }).get({
      success: res => {
        this.setData({
          goodslist: res.data,
        })
      }
    })
    console.log(e.title)
  },
})

在index.json中編寫,在這裏引用Vant Weapp的組件用來顯示前端
官方參考文件：https://youzan.github.io/vant-weapp/#/card
要注意組件的引用需要修改成自己項目的路徑

{
  "navigationBarTitleText": "列表",
  "disableScroll":true,
  "usingComponents": {
  "van-card": "../../miniprogram_npm/vant-weapp/card/index",
} 
}

在index.wxml中的編寫

<view wx:for="{{goodslist}}">
 <van-card
  price="{{item.goodsprice}}"
  desc="{{item.goodsdesc}}"
  title="{{item.goodsname}}"
  thumb="{{item.goodsimg}}"
/>
</view>

進行以上操作後，就完成我們點擊可樂時，跳轉到可樂各個品種的商品介紹界面；或我們點擊雪碧時，就會跳轉到雪碧各個品種的商品介紹界面的功能。