2
引言:最近一直在做一些小的小程序项目,小项目虽然小,但是前后端和管理系统都还是需要的。在甲方极低的预算下,人工又显得极其紧张,所以我大概摸索出了一套能用尽量少的代码,尽量减少单人工作量,又能实现实际需求的开发方法。
本文默认:你熟悉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服务一扔,就给甲方用了。


马嘉伦
859 声望845 粉丝