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

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

本文默认：你熟悉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服务一扔，就给甲方用了。