微信小程序中如何设置跳转页面

本文主要是介绍微信小程序中如何设置跳转页面，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

修改project.config.json内容

"cloudfunctionRoot":"cloud", //配置云开发的路径

更改app.js文件内容

App({
onLaunch() {
// 云开发环境初始化
wx.cloud.init({
env:"xiaochengxu-2gscmw0o879d5385"
})
}
})

新建云数据库文cloud

 商品列表页：

demo1.wxml

<view wx:for="{{list}}">
<!-- <view> 商品名：{{item.name}},价格:{{item.price}}</view> -->
<view bindtap="goDetail" data-id="{{item._id}}"> 商品名：{{item.name}},价格:
{{item.price}}</view>
</view>

demo1.js

Page({
  onl oad(){
  wx.cloud.database().collection("goods")
  .get()
  .then(res =>{
  console.log("商品列表请求成功",res)
  this.setData({
  list:res.data
  })
  })
  .catch(res=>{
  console.log("商品列表请求失败",res)
  })
  },

  goDetail(e){
    console.log('点击了跳转商品详情',e.currentTarget.dataset.id)
    wx.navigateTo({
    url: '/pages/demo1-1/demo1-1?id=' + e.currentTarget.dataset.id,
    })
    },


  })

商品详情页：

demo1-1.wxml

<view> 商品名：{{good.name}},价格:{{good.price}}</view>

demo1-1.js

Page({
  onl oad(options){
  var id=options.id
  wx.cloud.database().collection("goods")
  .doc(id)
  .get()
  .then(res =>{
  console.log("商品列表请求成功",res)
  this.setData({
  good:res.data
  })
  })
  .catch(res=>{
    console.log("商品列表请求失败",res)
    })
    }
    })
    

这篇关于微信小程序中如何设置跳转页面的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！