## 写在前面
自从微信小程序功能发布后,我就一直关注着小程序的动向,然而限于学业繁忙,总是没有太多的时间去学习。大二逐渐学习了Vuejs,被其简洁的设计所吸引,后来看了看小程序的开发文档,发现这么的相似?可能前端的发展趋势就是这样的吧,各个框架都趋向于相似的优秀的设计。
大三逐渐学习了Go语言,为了练习Go语言,同时也将自己几年来积累的东西聚合在一起,于是开发了微信小程序:We中南(可以去微信搜索,虽然现在毕业已经不打算维护了),其聚合了中南大学校内常见的信息查询功能,如:成绩课表查询、校车校历查询等项目已经在我的Github开源:[前端](https://github.com/csuhan/wecsu)、[后端](https://github.com/csuhan/csugo)。

今年暑假的某天突然心血来潮,看了下We中南的数据统计,发现还是有人用的,在没有推广的情况下居然增加了好几百的访问量(突然的感动),同时发现小程序支持云函数开发了,也就是说对于小型的小程序不必使用后端服务器,直接使用其提供的nodejs环境进行开发。
经过这些天的摸索,我想把自己从小程序注册到上架的全过程分享出来,供准备学习小程序的同学参考。
## 准备工作
### 1. 注册微信小程序账号
点击[传送门](https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN&token=)立马注册微信小程序账号。点进去后会看到如下界面,选择注册类型时要选择微信小程序。

接着填写相关的信息即可完成注册。

在完成注册后,切换到开发->开发设置,可以查看开发者ID。

### 2. 下载开发者工具,新建项目
进入[传送门](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html),下载安装最新版的开发者工具。使用开发者工具,开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。
关于IDE使用方法的界面,可以详细参考[官方文档](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)
接着打开开发者工具,修改项目名称,填入上面说的AppID,后端服务选择小程序云开发。

新建项目后我们可以看到,IDE已经帮我们新建了一个包含云函数开发的小程序模板,还提供了一些功能测试界面。
此时我们并没有开通云开发,需要点击IDE左上角的“云开发”,然后选择开通云服务。

## 开发小程序
### 1. 关于项目文件结构的介绍

项目分为两个子文件夹,一个为cloudfunctions,里面包含小程序的云函数,一个子文件夹包含一个云函数;另一个为miniprogram,是小程序的前端文件夹,没有固定的文件夹格式,完全可以通过对app.json进行修改定制自己的文件夹。具体文件的介绍可以参考[官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html)
### 2. 修改小程序信息
打开miniprogram文件夹下的app.json,其定义了小程序的基本信息。
下面是我的小程序的app.json,我将示例里无关的页面都删除了,添加了index主界面和detail详情页。
关于示例项目的修改:可以直接将pages目录下除index外的页面都删除,将style、images文件夹下的文件都删除。
```json
{
"pages": [
"pages/index/index",
"pages/detail/index"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "SCI IF期刊影响因子查询2019",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json"
}
```
### 3. 新建云函数!
> 云函数最大的优势便是无需购买服务器,无需注册域名,并无需配置SSL证书,真正达到了开箱即用。
在cloudfunctions目录上又见新建nodejs云函数,即可创建一个新的云函数,其包含了两个文件:package.json、index.js
package.json为一个标准的npm包,index.js为云函数的主文件。下面是新建云函数的初始内容,可以看到其首先引入了```wx-server-sdk```,它为小程序提供了操作云数据库的能力,接着初始化云函数,export云函数内容。
```javascript
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
}
}
```
需要说明的是:云函数包含几乎完整的nodejs环境,因此一些常见的nodejs库如:requests、chreeio等都可以通过package.json添加,使用。
### 4. 为云函数添加功能
本文的小程序为SCI期刊影响因子查询的小程序,逻辑较为简单,后端仅需要提供一个期刊查询接口,为前端提供相应期刊的影响因子即可。
1. 新建云函数```http_get```
2. 引入相关类库。在终端中打开云函数```http_get```的目录,接着安装依赖库。由于此函数利用了第三方的查询接口,因此需要使用http请求库```got```和http解析库```cheerio```。具体操作如下
```bash
cd /path/to/your/cloudfunctions
npm install //安装wx-cloud-server
npm install got --save
npm install cheerio --save
```
3. 为函数添加功能。此处主要是加载相关类库,解析html,然后将结果编码为json返回客户端。
```javascript
// 加载相关类库
const cloud = require('wx-server-sdk')
const got = require('got')
const querystring = require('querystring')
const cheerio = require('cheerio')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
//sci影响因子查询接口
const sci_url = 'some url'
//获取期刊名称
let sciname = event.sciname
let querys = querystring.stringify({ q: sciname, sci: 1 });
//请求数据
let resp = await got(sci_url + String(querys))
//解析html
const $ = cheerio.load(resp.body)
const lists = $(".tb1 tr")
//判断是否存在查询期刊
if (lists.children().length == 0) {
return -1
}else{
let jounalLists = lists.map((i, item) => {
return {
//期刊编号
no: $(item).children().eq(0).text(),
//省略部分内容,解析html参数
//影响因子解析
if: $(item).children().eq(7).text(),
}
}).get()
return jounalLists //返回解析结果
}
}
```
4. 调试云函数。云函数的调试可以通过云端调试:IDE界面->云开发->云函数,选择相应的云