小试小程序云开发(小结)
微信(小程序)  /  管理员 发布于 4年前   575
微信小程序刚出没多久时,曾经上手写过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 } }); }
云端部分开发完之后,在微信开发者工具里面上传云端代码即可,而其余部分的流程和普通小程序一样,这里也不再介绍。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号