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

修改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({
onLoad(){
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({
onLoad(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)
})
}
})

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

原文:https://www.cnblogs.com/heilang/p/14940636.html

以上是微信小程序中如何设置跳转页面的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>