写在前面

本篇文章是微信小程序开发入门的第十篇，介绍小程序云开发之获取单个数据的详情

获取单个数据的详情

我们想要实现点击首页的某一个水果，页面就跳转到该水果的详情页面

首先在miniprogram\pages\index\index.wxml文件中添加代码，bindtap监听手指落下事件，手指落下后触发onFruitItem方法，并且通过data-item="{{item}}"给方法传参：

<view class="fruit_ul">
  <view class="furit_li" wx:for="{{fruitList}}" wx:key="index" bindtap="onFruitItem" data-item="{{item}}">
    ...
  </view>
</view>

onFruitItem方法的代码写在miniprogram\pages\index\index.js中，通过e.currentTarget.dataset获取传入的参数item，并且通过wx.navigateTo()方法跳转到详情页，同时将当前水果的id传过去，可以在官方文档-路由中查看更多关于路由跳转的内容

Page({
  ...
  onFruitItem(e) {
    const item = e.currentTarget.dataset.item
    wx.navigateTo({
      url: `/pages/fruit-detail/fruit-detail?id=${item._id}`,
    })
  }
});

我们的项目中还没有详情页：/pages/fruit-detail/fruit-detail，我们现在创建，打开miniprogram\app.json文件，添加如下代码后，pages文件夹下就自动创建了fruit-detail文件夹：

{
  "pages": [
    "pages/index/index",
    "pages/fruit-detail/fruit-detail"
  ],
  ...
}

此时我们尝试点击首页上的某个水果，发现已经可以成功跳转到详情页，我们现在想要跳转到详情页面后，页面立马获取点击的水果的详情信息，所以我们编写一个云函数用来获取单个数据的详情，打cloudfunctions\fruit\index.js文件，添加代码如下：

const add = require('./add/index');
const search = require('./search/index');
const detail = require('./detail/index');

// 云函数入口函数
exports.main = async (event, context) => {
  switch (event.type) {
    case 'add':
      return await add.main(event, context);
    case 'search':
      return await search.main(event, context);
    case 'detail':
      return await detail.main(event, context);
  }
}

同时新建cloudfunctions\fruit\detail\index.js文件，编写代码如下，保存后将云函数上传并部署一下，重启后就可以在小程序端正常访问了：

const cloud = require('wx-server-sdk');

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
});

const db = cloud.database();

// 创建集合云函数入口函数
exports.main = async (event, context) => {
  try {
    // 数据库在fruit集合中查询id为event.id的数据
    const data = await db.collection('fruit').doc(event.id).get()
    return {
      success: true,
      data: data,
      msg: '查询成功！'
    }
  } catch (e) {
    return {
      success: false,
      msg: '查询失败！'
    };
  }
};

我们现在打开miniprogram\pages\fruit-detail\fruit-detail.js文件，通过onLoad方法的options参数接受列表页面传过来的字段id，作为参数传给上面写的云函数，代码如下：

Page({
  data: {
  },
  onLoad(options) {
    wx.cloud.callFunction({
        // 云函数名称
        name: 'fruit',
        // 传给云函数的参数
        data: {
          type: 'detail',
          id: options.id,
        },
      })
      .then(res => {
        console.log('res', res)
      })
      .catch(err => {})
  },
})

res结果如下，成功拿到了刚刚点击的水果的详情信息：

写在最后

以上就是小程序云开发之获取单个数据的详情的全部内容