微信小程序中如何设置跳转页面
2024-09-06 12:46:15
修改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)
})
}
})
//
<!--pages/demo/demo.wxml-->
<view wx:for="{{list}}" >
<image src="{{item.img}}" class="img"></image>
<view> 商品名：{{item.name}},价格:{{item.price}}</view>
</view>
最新文章
- Linux多线程学习总结
- 转换成的jar文件接收后台的信息乱码cmd解决办法
- [转]html js中name和id的区别和使用分析
- Linux上F上传文件到FTP服务器
- Spark源码系列（二）RDD详解
- UITableView小知识点总结
- CentoS 下安装gitlab
- 百度地图开发 android App 数字签名（SHA1）获取办法
- 大话RAC介质恢复---只有备份文件的恢复
- Responsive设计——不同设备的分辨率写法
- FastDFS、nginx配置手记
- mac下 WebStorm下主题包安装
- zepto打造一款移动端划屏插件
- YII重点文件
- windows使用nginx+memcached实现负载均衡和session或者缓存共享
- Carthage的安装和使用
- java排序算法（八）：希尔排序（shell排序）
- BZOJ_2435_[Noi2011]道路修建_dfs
- Odd-e CSD Course Day 5
- MacOS10.14下Eclipse安装lombok