引言:最近一直在做一些小的小程序项目,小项目虽然小,但是前后端和管理系统都还是需要的。在甲方极低的预算下,人工又显得极其紧张,所以我大概摸索出了一套能用尽量少的代码,尽量减少单人工作量,又能实现实际需求的开发方法。
本文默认:你熟悉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服务一扔,就给甲方用了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。