微信小程序*云开发 页面跳转 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>

进行以上操作后，就完成我们点击可乐时，跳转到可乐各个品种的商品介绍界面；或我们点击雪碧时，就会跳转到雪碧各个品种的商品介绍界面的功能。