开发者社区> dasein58> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

小程序云开发入门介绍

简介:   微信小程序刚出没多久时,曾经上手写过demo,但开发体验比较差,所以一直没怎么关注。不过自从诸多适配方案出炉,以及云端的开通,觉得还是有必要上手体验一番的。   原生开发我是不想再试了,那就选一种适配方案,目前比较知名的有基于vue的 mpvue,umi-app,基于react 的 taro,以及TX团体出的全新框架 wepy。个人对 react 的好感 以及 taro 框架的走向成熟,促使我选择了 taro。   云端开发就是将普通小程序的传统后端切换为微信提供的轻量级云端。而这个云端服务部分的开发其实是针对前端开发的,前端工程师很容易就能全栈开发出一整个小程序。但是这种轻量级解决方
+关注继续查看

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

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

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

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

  client #前端目录

  ├── config #配置

  ├── dist #输出

  ├── src #源目录

  └── index.html #入口文件

  cloud #云目录

  ├── dao #数据库操作函数集合

  ├── login #登录云函数

  └── ... #其他

  前端

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

  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.callFunction({

  name: "dao",

  data: { fn, param }

  });

  }

  onReachBottom() {

  this.getList();

  }

  getList() {

  const { size, page, total, loading }=this.state;

  if (loading) return;

  TaroLoading({ 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.callFunction({

  name: "login",

  data: {}

  }).then(res=> {

  this.setState({ context: res.result });

  }).catch(err=>{

  });

  }

  云端

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

  //数据库引用

  const db=wx.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 daofn;

  };

  // 调用数据库

  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 daofn;

  };

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

  getDbFn(fn, param) {

  return Taro.callFunction({

  name: "dao",

  data: { fn, param }

  });

  }

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
这款 IDE 插件再次升级,让「小程序云」的开发部署提速 8 倍
今年3月份,在阿里云北京峰会上,阿里巴巴正式发布了“阿里巴巴小程序繁星计划”,截至当前,已经有成千上万的开发者加入这个计划,使得小程序得到蓬勃发展,然而不可避免的是,这些服务加重了对云端的开发部署、运行运维等能力的依赖。
9538 0
【小程序云&IDE 免费插件】一键开发部署 实现一云多端的业务战略
阿里云提供了免费的小程序开发插件 - Cloud Toolkit,方便开发者在 IntelliJ IDEA 和 Eclipse 等 IDE 平台内,获得一键开发和部署的体验。
1322 0
这款 IDE 插件再次升级,让「小程序云」的开发部署提速 8 倍
今年3月份,在阿里云北京峰会上,阿里巴巴正式发布了“阿里巴巴小程序繁星计划”,截至当前,已经有成千上万的开发者加入这个计划。我们要善于运用工具来最大化地发挥自己的能力,所以,为了更进一步提升小程序开发者的工作效率和开发体验,阿里云提供了免费的小程序开发插件——「Cloud Toolkit」。
0 0
阿里云小程序云发布小程序跨平台开发框架,助力开发者一次开发,多端运行
本文主要介绍了小程序云联合DCloud发布基于uni-app的小程序跨平台开发框架插件,如何帮助有跨平台发布小程序的开发者快速发布多个平台小程序
0 0
基于小程序云Serverless开发微信小程序
本文主要以使用小程序云Serverless服务开发一个记事本微信小程序为例介绍如何使用小程序云Serverless开发微信小程序。记事本小程序的开发涉及到云函数调用、云数据库存储、图片存储等功能,较好地展示了小程序云Serverless服务在实际研发场景中如何帮助开发者提升研发效率。
0 0
小程序云开发CLI工具辅助开发
介绍小程序云CLI的使用技巧,提效小程序云开发。
0 0
基于小程序云开开发(统计学生信息并导出excel)1.0版本
基于小程序云开开发(统计学生信息并导出excel)1.0版本
0 0
基于云开发创建(小程序云商城,基本页面的创建及动态代码的编写)
基于云开发创建(小程序云商城,基本页面的创建及动态代码的编写)
0 0
基于云开发小程序云商城,基本页面的创建全部代码编写
基于云开发小程序云商城,基本页面的创建全部代码编写
0 0
仿排号系统(小程序云开发)
仿排号系统(小程序云开发)
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
小程序云应用入门实操系列课程 - 第四讲
立即下载
小程序云应用入门实操系列课程 - 第一讲
立即下载
5.18阿里小程序云生态及实践分享 - 阿里小程序的一云多端
立即下载