# 浅谈小程序开发

尝试性的进行了一个星期的小程序开发，本文记录一下一些个人的见解（看法不一定准确）

微信的注册规则真的把我秀晕了，注册邮箱不能跟微信、微信公众号重复，在加上我第一次注册错了企业小程序，没认证之前又没有销号的入口，所以我一共使用了 4 个邮箱在微信这一块。

# 背景

这一 part 是我的口水废话，可跳过

最近一直在封装一些方便生活或者提高效率的小工具，如 unblock-music（解锁网易云音乐）、atlas-electron（图集打包工具），但是大多都是用 electron 封装的桌面小工具，最近空闲就开始思考做一些移动端的小工具。

移动端的工具，因为是做前端开发的第一时间我就想写移动端网页完成。但是这就要考虑到服务器部署成本，因为备案问题一直不喜欢买国内的云服务器，再加上最近着重手上的 VPS 全军覆没，只剩下一个超低配的站点托管服务。

这个时候了解到小程序现在的云开发有一定的免费配额，可以免费使用低配的云数据库和云函数（读书人的事怎么能叫白嫖呢）

选定使用小程序后，就准备着手开发。大学的时候小程序刚出那会学过一小段时间的小程序开发，但是那会的开发文档混乱，学起来觉得十分不舒服就放弃了。因为以上记忆的问题，所以就想使用的框架进行开发，因为本身工作写的是 vue 技术栈，就是没有多加思考抄起mpvue就开始进行开发

# mpvue

使用脚手架工具构建好了 mpvue 的项目后，安装依赖，构建项目，使用微信开发者工具打开一气呵成。

再看看目录结构，熟悉的 vue 的目录结构，兴奋的搓搓小手便开始了开发，因为之前了解到 mpvue 在小程序里实现了大部分的语法，也没多想应该只是高级语法还没实现吧。（事后证明我错了）

习惯性的写了一个卡片组件 card，然后在卡片组件上使用:class改变卡片的颜色

<card :class="cardColorClass"></card>
<!-- 报错：template 不支持 class语法 -->

emmmm 行吧，提示不支持这个语法那我换个方式写。然后我又快马加鞭的写着我的沙雕小工具。

<template>
  <p v-for(item, index) in arr>{{ getCardName(index) }}</p>
</template>

??? 怎么没东西渲染出来呀，index正常传入 function 里，getCardName函数也 return 正常。

我开始搜索 mpvue 的文档想找问题，mpvue 的文档什么都没有，支持列表也没有...emmmm 我去 mpvue 的 Github 里的 issue 找找吧...emmmmm 最后求助写过小程序的好基友，他说 mpvue 不支持{{}}中插入function()的写法...行吧知道了不支持那我用别的写法。

终于写完了，我的沙雕外卖拼单计算器和渐变调色器。但是回过头来我并没有为能在小程序上使用 vue 的语法进行开发而开心，因为感觉 mpvue 给我太多不稳定的危险感，这一点让我很不舒服，文档非常不完善，没办法知道大概有哪些还不支持的坑。

思考到后期的维护问题，我还是决定放弃继续使用 mpvue 进行开发。mpvue 不一定是不好的，只能说现阶段他是不适合我的。

# 原生小程序开发

# 原生小程序框架

吃了技术选型的亏，我仔细的去了解了市面上口碑比较好的几个 vue 语法的小程序框架 wepy 和 uni-app。再去看了一遍小程序官方文档，这个文档跟我记忆中的差别也太大了吧，我看到了无数 vue 的影子。

最后决定使用原生小程序框架重写这个项目，除了语法有 vue 的影子让我非常有好感，再加上我是第一次写小程序，使用原生多看文档能给我自己打好基础。

很快我就使用原生小程序框架重写了这个项目，不得不说小程序的文档非常完善，我能在里面找到几乎我所有想了解的东西，包括更新记录。除了写习惯了很多绑定属性如 computed 和 watch 外，没有任何不适感。好评！

# 云开发

云开发其实才是我重点想体验的内容。在我的理解里，云开发为我们提供了一个简单可用的云数据库，还有为我们运行简单的 Node 脚本的云函数。

# 云数据库

云数据库是支持前端和云函数调用操作的，可以在前端中使用wx.cloud.database获取操作数据库的对象类，在云函数中可以使用cloud.database获取操作作数据库的对象类。

前端对数据库的操作存在数量上的限制，最多只能返回 20 条记录，所以前端可以做一些简单的数据库操作，如添加一两条记录，更新某一条记录的状态。如果在前端请求大量的数据，就会因为数量限制的问题需要发起大量的请求。

云函数在数据库操作上也存在数量上的限制，但是这个限制会比较小，单次获取数据量可以到 100，这样我们可以使用分配处理的方法，获取所有列表之后再返回给前端。

# 云函数

我的理解里云函数就像是一个微型的 Node 后端服务，他帮助你做部署工作，你可以把每一个云函数看成每一个接口，当你调用这个云函数时，就像你请求一个后端接口，这个时候云函数就回去做相对应的操作并把结果返回给你。

云函数对前端开发工程师非常友好，因为我平时经常自己捣鼓 VPS，也借助 PM2 部署过一些 Node 服务，所以觉得环境配置，服务部署，网络配置是非常麻烦的事。而这里微信帮你把所有的问题都解决了，你只需要专心于你这段云函数的编写。

其次还有一个舒服点，云函数所接受的参数会带上一个context的参数，你可以从这个参数里面拿到调用这个云函数用户的 openid、appid 等信息，这个非常方便，我前端就不需要去做登陆流程获取 openid，也不用向云函数传递 openid。云函数能直接通过上下文获得用户的 openid，再使用 openid 去筛选我想要的信息或者做一些操作，并返回给前端。

# 总结

经过了一个星期的小程序开发，对于我这个菜鸡的感受非常良好。

它拥有非常好的开发生态，而且免费配额的云开发让个人开发者可以零成本地开发自己的小程序。

最后，贴一下我自己的沙雕小程序