小程序云开发教程

最新推荐文章于 2025-09-17 22:10:41 发布

原创最新推荐文章于 2025-09-17 22:10:41 发布 · 4.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #微信小程序 #微信

本文介绍了微信小程序如何使用云开发进行一站式后端服务，包括云开发的准备、使用步骤，如创建数据库、添加数据、创建页面并引用数据，以及数据排序、分页和查询API的初步应用。通过实例代码展示了云开发简化前端开发流程的能力。

小程序·云开发解决方案是腾讯云和微信联合出品的为企业和开发者提供的一站式后端云服务，提供云函数、数据库、存储管理等云服务，无需管理基础架构，一次开发多端运行。本文主要介绍微信小程序如何使用云开发。

在云函数中，我们可以很方便的获取到用户的appid、openId这些重要的鉴权信息；并且能在没有后端接口的情况下，使前端能独立的完成小程序的开发! 当然也不需要服务器操作。可以说小程序云开发，让前端程序员拥有后端的能力。

一、云开发准备

注册小程序开发账号，并下载微信开发者工具(之前博文有介绍，想要了解可以往前翻一翻)。双击开发者工具，选择小程序，选择使用云开发，然后点击确认，创建项目。

可以看出来比普通的项目多几个文件。模拟器中可能会存在一些例子，可以参考一下。根据自己的需求进行删除。

二、云开发使用步骤

2.1 打开云开发控制台

2.2 创建数据库

在云开发控制台，选择数据库->新建集合->输入名称->确定，即完成一个数据库的创建。

2.3 数据库添加数据

选中要添加数据的数据库，在右侧添加记录，根据所需数据，输入字段、类型、值等信息。

如下图，数据库中就存在一条数据了。

2.4 创建页面

在小程序根目录/miniprogram/pages文件夹下新建文件夹->新建page，创建页面。

2.5 页面引用数据库数据

在页面中将数据库数据展示出来。达到如下图效果：

右击cloudfunction，选择当前环境；然后再右击cloudfunction->新建node.js云函数，创建完成后文件夹会自动生成3个文件config.json、index.js、package.json。在index.js定义数据库，并获取数据。

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境
//定义数据库
const db=cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  //微信的上下文信息
  const wxContext = cloud.getWXContext()
  //event就是调用的时候传递的参数
  //获取集合feedback的数据
  //get获取数据 await等
  const data=await db.collection("feedback").get();

  return {
    data:data.data,//返回数
    event,
    sum:event.a+event.b,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

//home.wxml

<view class="list">
  <view class="item" wx:for="{{list}}" wx:key="_id">
    <view>
      <text>{{item.userInfo.nickName}}</text> - <text>{{item.datetime}}</text>
    </view>
    <view>
      {{item.msg}}
    </view>
  </view>
</view>

//home.js

const {formatDate}=require("../../utils/index")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[],
    msg:""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getFeedback();
  },
  inputHd(e){
    //textarea与msg实现双向绑定
    this.setData({msg:e.detail.value});
  },
  addFeed(){
    const userInfo=wx.getStorageSync('userInfo');
    //如果有用户信息
    if(userInfo&&userInfo.nickName){
      //直接发表留言
      this.sendFeed();
    }else{
      //先获取用户头像信息
      wx.getUserProfile({
        desc: '需要用户头像',
        success:(res)=>{
          //存储用户头像信息
          wx.setStorageSync('userInfo', res.userInfo);
          //发表留言
           this.sendFeed();
        }
      })
    }
  },
  sendFeed(){
    console.log("发表留言");
    })
  },
  getFeedback(){
    //调用云函数
    wx.cloud.callFunction({
      //函数名称
      name:"feedback",
      //传递参数
      data:{a:5,b:6}
    })
    .then(res=>{
      //成功返回的结果
      console.log(res.result);
      //更新本地list
      this.setData({list:res.result.data});
    })
    .catch(err=>{
      console.log(err)
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

经以上操作，就完成了将数据库数据在页面进行展示的简单操作。

三、数据排序

示例代码：先按 progress 排降序（progress 越大越靠前）、再按 description 排升序（字母序越前越靠前）取待办事项

db.collection('todos')
  .orderBy('progress', 'desc')
  .orderBy('description', 'asc')
  .get()
  .then(console.log)
  .catch(console.error)

四、分页api

示例代码

db.collection('todos').skip(10)
  .get()
  .then(console.log)
  .catch(console.error)

五、查询api

示例代码：只返回 description, done 和 progress 三个字段

const _ = db.command
const result = await db.collection('todos').where({
  price: _.lt(100)
}).get()

云数据的排序、分页、查询后期会整理之后，根据具体的案例，再跟大家细讲，欢迎关注。