侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

小试小程序云开发(小结)

微信(小程序)  /  管理员 发布于 3年前   302

微信小程序刚出没多久时,曾经上手写过demo,但开发体验比较差,所以一直没怎么关注。不过自从诸多适配方案出炉,以及云端的开通,觉得还是有必要上手体验一番的,于是为我的技术博客也写了个小程序版。

原生开发我是不想再试了,那就选一种适配方案,目前比较知名的有基于vue的 mpvue,umi-app,基于react 的 taro,以及TX团体出的全新框架 wepy。个人对 react 的好感 以及 taro 框架的走向成熟,促使我选择了 taro。

云端开发就是将普通小程序的传统后端切换为微信提供的 轻量级云端。而这个云端服务部分的开发其实是针对前端开发的,前端工程师很容易就能全栈开发出一整个小程序。但是这种轻量级解决方案也只是针对业务简单的项目,因为公共平台肯定有各种限制,它的出现只是让我们多了一个选择方案而已。

接着进入主题,项目大体目录结构如下

client #前端目录├── config #配置├── dist #输出├── src #源目录└── index.html #入口文件cloud #云目录├── dao #数据库操作函数集合├── login #登录云函数└── ... #其他

前端

小程序的前端部分,想必不用过多讲解,因为这都是前端的基本功。就以首页为样例,使用了typeScript,主要功能是分页加载数据,调用微信提供的触发到达底部的api-onReachBottom即可。

import Taro, { Component, Config } from "@tarojs/taro";import { View, Text, Navigator } from "@tarojs/components";import "./index.scss";interface IState { loading: boolean; size: number; page: number; total: number; list: Array<{ _id: string; summary: object }>; context:object;}export default class Index extends Component<{}, IState> { state = {  loading: false,  size: 10,  page: 0,  total: -1,  list: [],  context:{} }; config: Config = {  navigationBarTitleText: "Jeff's Blog",  onReachBottomDistance: 50 }; componentWillMount() {  this.getList();  this.getLogin(); } getDbFn(fn, param) {  return Taro.cloud.callFunction({   name: "dao",   data: { fn, param }  }); } onReachBottom() {  this.getList(); }  getList() {  const { size, page, total, loading } = this.state;  if (loading) return;  Taro.showLoading({ title: 'loading', });  if (total >= 0 && size * page >= total) return;  this.setState({ loading: true });  this.getDbFn("getList", { size, page: page + 1 }).then(res => {   Taro.hideLoading();   const total = res.result.total;   const list = this.state.list.concat(res.result.list);   this.setState({ loading: false, page: page + 1, total, list });  }).catch(err => {   Taro.hideLoading();   this.setState({ loading: false });  }); } onShareAppMessage (res) {  return {   title: "Jeff's Blog",   path: '/pages/index/index'  } }  render() {  return (       {this.state.list.map(l => (                         {l.summary.title}                   {l.summary.tags.map(t => (         {t}        ))}       {l.summary.date}               ))}     ); }}

与普通小程序不同的地方就是调用云端,云函数调用如官方样例所示

getLogin(){  Taro.cloud.callFunction({   name: "login",   data: {}  }).then(res => {   this.setState({ context: res.result });  }).catch(err=>{  });}

云端

云端数据库是个文档型,操作风格与mongodb如出一辙,格式自然是json。最有用的还是操作数据库的部分,操作方法都已经 Promise 化,调用还是比较方便的。具体内容请查看文档: 小程序云开发

//数据库引用const db = wx.cloud.database()//获取数据集合const todos = db.collection('todos')//获取记录数todos.count();//条件查找todos.where({done: false,progress: 50}).get()//插入todos.add({data: {content:'11',time:new Date()}},success:(res){});//更新todos.doc('todo').update({ data: { done: true}},success:(res){});//删除todos.where({done:true}).remove();//分页查找todos.orderBy('time','desc')  .skip(start)  .limit(size)  .get();

云函数

调用云端的方式就要使用云函数,就以下面数据库操作库为例

// 云函数入口文件const cloud = require("wx-server-sdk");cloud.init();// 云函数入口函数exports.main = async (event, context) => {  const { fn, param } = event;  return dao[fn](param);};// 调用数据库const db = cloud.database();// 表const posts = db.collection("posts");const tags = db.collection("tags");const dao = {  async getList({ page = 1, size = 10 }) {    const start = (page - 1) * size;    try {      const { total } = await posts.count();      const { data } = await posts        .field({ summary: true })        .orderBy('num','desc')        .skip(start)        .limit(size)        .get();      return {        code: 0,        list: data,        total,        message: "sucess"      };    } catch (err) {      return {        code: -1,        list: [],        total: -1,        err: err,        message: "error"      };    }  },  getPost({ id }) {    return posts.doc(id).get();  },  async getTagList({ tag }) {    try{      const { data } = await tags.where({ name: tag }).get();      if(!data.length){         return {          code:0,          list:[],          message: "success"        };      }       const list = data[0].list.sort((a,b) => b.num - a.num);      return {        code:0,        list:list,        message: "success"      };    } catch(err){      return {        code: -1,        list:[],        err: err,        message: "error"      };    }  }}

将操作数据库的所有云函数合并成一个文件,将云函数入口封装一下,即把函数名字和参数都做为参数

exports.main = async (event, context) => {  const { fn, param } = event;  return dao[fn](param);};

对应前端部分也封装出一个调用数据库的方法

 getDbFn(fn, param) {  return Taro.cloud.callFunction({   name: "dao",   data: { fn, param }  }); }

云端部分开发完之后,在微信开发者工具里面上传云端代码即可,而其余部分的流程和普通小程序一样,这里也不再介绍。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

您可能感兴趣的文章:

  • 小程序云开发初探(小结)
  • 小程序云开发实战小结
  • 小程序云开发部署攻略(图文教程)
  • 微信小程序云开发修改云数据库中的数据方法
  • 微信小程序云开发实现云数据库读写权限
  • 微信小程序云开发详细教程
  • 微信小程序云开发之数据库操作
  • 微信小程序云开发之使用云函数
  • 微信小程序云开发之使用云数据库


  • 上一条:
    微信小程序如何使用globalData的方法
    下一条:
    关于微信小程序获取小程序码并接受buffer流保存为图片的方法
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 小程序开发之跳转微信直播示例api(0个评论)
    • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
    • 小程序开发之多端框架:taro(0个评论)
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 近期文章
    • windows系统中安装FFMpeg及在phpstudy环境php7.3 + php-ffmpeg扩展的使用流程步骤(0个评论)
    • 在go语言中对浮点的数组、切片(slice)进行正向排序和反向排序(0个评论)
    • 在go语言中对整数数组、切片(slice)进行排序和反向排序(0个评论)
    • 在go语言中对字符串数组、切片(slice)进行排序和反向排序(0个评论)
    • 最新国内免注册ChatGPT体验站_ChatGPT镜像站访问链接地址2023/3/28持续更新(0个评论)
    • 在Laravel项目中的实现无密码认证之:发送邮箱链接授权(0个评论)
    • 在go语言中使用GoRoutines实现高性能并发批量调用api示例(0个评论)
    • Docker撤回受争议的收费方案,又可以继续使用docker了(0个评论)
    • 在go语言生成唯一ID之SnowFlake算法(0个评论)
    • ChatGPT再出新功能,推出插件功能,能联网、搜索了(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客