开发经验使用Wepy与Bmob新sdk快速开发小程序

Posted 2021-03-01 baimeishaoxia

引言：最近一直在做一些小的小程序项目，小项目虽然小，但是前后端和管理系统都还是需要的。在甲方极低的预算下，人工又显得极其紧张，所以我大概摸索出了一套能用尽量少的代码，尽量减少单人工作量，又能实现实际需求的开发方法。

本文默认：你熟悉Vue与小程序开发，已安装npm，懂得基本控制台指令。  
建议：最好能够先把WEPY和Bmob的文档看一看，把他们的Demo跑起来。

小项目的内容基本就是维护订单表，订单状态，用户表等，小程序还要解决微信登录，微信支付等等微信API。如果用前端一个人Express+mysql做的话，一个人要维护的东西太多了，很不利于快速开发和后期调bug。因为所有东西都是你自己写，代码分散会十分不利于定位问题，谁也不想因为改了一点点东西就从数据库改到sql命令改到接口再改到前端，多改一行代码，多出一个bug，所以控制代码量十分必要。话不多说，来看看具体的技术栈选择：

开发部分	选用技术/框架	开发语言
小程序	WEPY	js/pug/css
后台服务	Bmob后端云	-
后台管理系统	Vue-Element-Admin	js
后台管理系统服务端	Coding Pages服务	-

这样一来基本上一个前端自己可以搞定了，再来看看各个框架：

WEPY，让小程序支持组件化开发的框架

官网地址：https://tencent.github.io/wepy/

WEPY号称是一个最受欢迎的小程序框架，支持npm包，pug，sass，ts，组件化开发，安装十分简单（当然你要先安装好npm，没有npm的可以先查一下npm的安装。）

npm install wepy-cli -g

剩下的步骤的可以去WEPY官网看一下，直到你安装好一个standard项目，就可以开始干活了。WEPY还有如下几点需要单独说一下：

Pug/Jade语法

Pug以前叫jade，是一种模板语言，选用这个是因为对比html，pug可以少敲很多字母，这对快速开发当然是有好处的。首先当然要安装Pug：在wepy.config.js文件下，找到compilers属性，如下添加一个pug配置：

module.exports = {
compilers: {
        // 其他配置不要动，在这个对象下添加pug
        pug: {
        }
    }
}

然后npm install，就可以通过在template标签内加上lang=‘pug‘来使用
先看看例子：

<template lang=‘pug‘>
  view.topInfo
    //- 背景
    image.back(src=‘../assets/rankTopBack.png‘, mode=‘aspectFill‘)
    //- 内容
    view.side
      text.small 排名
      text.main 91%
    view.center
      image.avatar(src=‘{{userInfo.avatarUrl}}‘)
      view.userName {{userInfo.nickName}}
    view.side
      text.small 今日被赞
      text.main 3
</template>

如上代码就是一个使用pug编写的html部分，可以看到pug使用缩进代替了标签，少敲了很多</>符号，十分节省我们的键盘。在编译的时候，pug就会被转译成html，规则也十分简单：

//pug代码
view#223.top(@tap=‘showDetail‘)
    text 666
//转译成html
<view class="top" id="223" @tap="showDetail">
    <text>666</text>
</view>

在pug里不需要写反标签，编译器会自动通过缩进来闭合，括号里的内容会被放到标签内，标签后的内容会变成标签内的文本，“.”后的内容会变成class=，“#”后的内容会变成id=。pug还有别的规则，但是我们只用他来写html，就是因为可以少打很多字，而且很容易阅读。

小坑：WEPY在wepy build --watch模式下，会因为pug的编译器报错而终止watch，所以在写pug的时候，最好不要--watch。反正pug的部分也很简单，写写结构，很快就写好了，更多的时间其实是在调样式，不是很影响整体工作进度。

Await/Async关键字

ES6支持的关键字，可以通过babel应用到小程序里。后端云和小程序Api都会产生大量的异步代码，不使用Await，代码很难写的漂亮。

Bmob后端云，全方位一体化的后端服务平台

官网地址：https://www.bmob.cn/
文档地址：http://doc.bmob.cn/data/wecha...

一个我经常用的后端云平台，封装了微信登录等一票API，好处是自动建表，有SDK直接用，完全不用配服务器。其实云平台有很多，这些平台都是基于ParseServer改的，别的什么Mob云，Leancloud都差不多。用的时候，项目里我们能用到的一般只有建表和查询。其实云平台坑很多，但是我们只用最基本的增删改查就好了，别的什么监听功能，socket，都比较坑，如果必须要用到高级功能，还是建议自己写后端，不要用后端云。不过小项目一般只有存数据，查数据的需求。一般后端云每个月都有很高的免费额度，重点就在这个免费了，小项目甲方往往没什么预算，也只有轻度需求，使用后端云恰好合适。等以后甲方有钱了，要做大项目，再把免费的甩了，买个牛逼服务器自己写新后台就是了。

安装与基本操作

Bmob支持npm安装：

import Bmob from "hydrogen-js-sdk";

初始化：

Bmob.initialize("你的Application ID", "你的REST API Key");

数据操作（详见Bmob文档）：

// 新增一行数据
const query = Bmob.Query(‘tableName‘);
query.set("name","Bmob")
query.set("cover","后端云")
query.save().then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})
// 查找所有数据
const query = Bmob.Query("tableName");
query.find().then(res => {
    console.log(res)
});

条件查询

如果你要查询个表里的一些数据，你可以通过操作query对象来设置条件：

const query = Bmob.Query("tableName");
query.equalTo("title","==", "hello");
query.find().then(res => {
    console.log(res)
});

设置排序：

// 按分数降序排列
query.order("-score");

踩坑：不要使用Array对象，设计合适的表结构，避免多次请求

一些刚开始使用后端云的前端开发者经常犯的一个严重错误，就是没有设计合适的表结构，又错误的大量使用后端云的Array对象——Array对象非常难以操作，不能储存大量信息，储存ID时又无法在云端联查对应的对象内容，relation和picker指针难以操作，无故增加代码复杂度，直接导致代码质量差，难以维护。其实，只需要合理设计表结构，使用简单的查询指令（条件选择，排序）就可以完成绝大多数数据操作。如果你觉得不得不用Array或者relation，最好还是思考一下，项目的规模到底适不适合使用后端云开发。

举个例子，我们有个用户表，如果要存这个用户发布的文章并查看,我们假定他发布了id是‘002‘,‘004‘,‘006‘的三篇文章,先来看不太合适的做法：
用户表

id	name	myarticle
asdf	用户名	[‘002‘,‘004‘,‘006‘]

文章表

id	title	content
002	标题1	内容
004	标题2	内容
006	标题3	内容

在这里用户用Array储存了他的文章，那么你就能查询到这个Array，然后获取文章的3个ID：‘002‘,‘004‘,‘006‘，但是没有获取文章的内容。这个时候呢，聪明的同学就写了个for循环，再查每一篇，把文章都查下来，就拿到了所有内容。看上去没什么问题，但是，这个操作，等待了3个网络请求的时间，才查到3个文章，用户会觉得这部分的相对的长一些，并不是网速不够，而是每启动一次请求都会消耗一部分资源，占用一些时间，从代码的角度，多写了个for循环逐个请求，还要另外写排序，维护的时候也多出了不必要的开销。后端的同学应该不会犯这个错误，不过如果有后端老司机，也就不需要用后端云了，正确的做法是：

用户表

id	name
asdf	用户名

文章表

id	title	content	user
002	标题1	内容	asdf
004	标题2	内容	asdf
006	标题3	内容	asdf

使用用户Id标记文章，然后使用后端云的查询语句:

// 查找所有数据
const query = Bmob.Query("article");
query.equalTo(‘user‘,‘==‘,‘asdf‘)
//以按阅读量排序
query.order(‘readcount‘)
query.find().then(res => {
    console.log(res)
});

这样只通过一次请求就获取了所有文章，并且可以按照正确的姿势来排序。

Vue-Element-Admin,后台管理系统

待施工，其实这部分和小程序差不多，改改直接用，build出来往coding的pages服务一扔，就给甲方用了。