1. 程式人生 > 其它 >微信小程式中如何設定跳轉頁面

微信小程式中如何設定跳轉頁面

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