写在前面

自微信小程序功能发布以来，我一直在关注小程序的趋势。但是，由于我的日程安排很忙，所以我没有太多时间去学习。我在大二的时候逐渐学习了vuejs，并为它的简单设计所吸引。后来我查看了小程序的开发文档，发现有何相似之处？也许前端的发展趋势就是这样，并且每个框架都倾向于具有相似的优秀设计。

大三时，我逐渐学习了Go语言。为了练习Go语言并同时收集我在过去几年中积累的知识，我开发了微信小程序：我们中南（您可以去微信进行搜索，尽管现在我已经毕业了（不打算进行维护），它汇总了中南大学的常见信息查询功能，例如：评分表查询，校车校历查询和其他项目已在我的Github上开源：前端和后端结束。

我们中南

SCI IF期刊影响因素查询

在今年暑假期间，我突然想到，我们查看了We Zhongnan的统计信息，发现某些人还在使用它。如果不进行推广，它将访问次数增加数百倍（突然移动），并且发现小程序支持云功能开发，这意味着对于小型小程序，您不需要使用后端服务器并直接使用它为开发提供的nodejs环境。

经过这些天的探索，我想分享从小程序到列表的注册过程，以供准备学习小程序的学生参考。

准备1.注册微信小程序帐户

单击门户立即注册微信小程序帐户。单击后，您将看到以下界面。选择注册类型时，选择微信小程序。

填写相关信息以完成注册。

完成注册后，切换到开发->开发设置，即可查看开发者ID

2.下载开发人员工具，创建一个新项目

进入门户网站，下载并安装最新版本的开发人员工具。使用开发人员工具，开发人员可以完成小程序 API和页面开发和调试，代码查看和编辑，小程序预览和发布以及其他功能。

有关如何使用IDE的界面，可以详细参考官方文档

接下来，打开开发人员工具，修改项目名称，填写上述AppID，然后为后端服务选择小程序云开发。

创建新项目后，我们可以看到IDE帮助我们创建了一个新的小程序模板，其中包括云功能开发，还提供了一些功能测试接口。

目前，我们尚未激活云开发。您需要单击IDE左上角的“云开发”，然后选择激活云服务。

开发小程序 1.项目文件结构简介

该项目分为两个子文件夹，一个是cloudfunctions，其中包含小程序的云功能，一个子文件夹中包含一个云功能；另一个是miniprogram，它是小程序的前端文件夹，它不是固定的文件夹格式，您可以通过修改app.json来定制自己的文件夹。有关具体文件的介绍，请参阅正式文件

2.修改小程序信息

在miniprogram文件夹下打开app.json，该文件夹定义小程序的基本信息。

以下是我的小程序的app.json。我删除了示例中所有不相关的页面，并添加了主索引界面和详细信息页面。

关于示例项目的修改：您可以直接删除pages目录中除索引之外的所有页面，并删除style和images文件夹中的所有文件。

{ "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，它为小程序提供了操作云数据库，初始化云功能并导出云功能内容的功能。

// 云函数入口文件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环境，因此可以通过package.json添加和使用一些常见的nodejs库，例如请求，cheerio等。

4.向云功能添加功能

本文中的

小程序是SCI期刊影响因子查询的小程序。逻辑相对简单。后端只需提供日记查询界面即可为前端提供相应日记的影响因子。

新的云函数http_get引入了相关的类库。在终端中打开云函数http_get的目录，然后安装从属库。由于此功能使用第三方查询接口，因此必须使用已获取的http请求库和http解析库cheerio。具体操作如下

cd /path/to/your/cloudfunctionsnpm install //安装wx-cloud-servernpm install got --savenpm install cheerio --save

向功能添加功能。这里的主要目的是加载相关的库，解析html，然后将结果编码为json并将其返回给客户端。

// 加载相关类库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 //返回解析结果 }}

调试云功能。云功能调试可以通过云进行调试：IDE界面->云开发->云功能，选择相应的云功能进行调试。单击“调试”后，将返回调试结果，并可以根据结果修改功能。

您还可以在本地环境中调试云功能：单击cloudfunctions下相应功能文件夹中的“本地调试”以进行调试。与云调试相比，本地调试更加方便，并且无需在每次调试之前上传云功能。到服务器。但需要注意的是：在调试之前，请在云函数目录中执行npm install以完成相关类库的安装。

5.添加小程序页

小程序的每个页面包含四个文件：.js，.json，.wxml和wxss。 js负责程序逻辑，json配置页面参数，wxml定义页面结构，wxss定义页面样式。这等效于将HTML页面分为.html，.css和.js。

由于小程序是在微信中运行的Webview环境，因此其语法与html不同。您可以参考官方文档：门户网站

为了简化页面的构建，本文引入了一个第三方库：Vant，它提供了精美的界面元素，可以直接使用。有关详细用法，请参阅vant官方文档。

最终的小程序主界面如下：

对应的代码如下：

页面结构

class='head_img'> custom-class="cell_group"> custom-class="cell_filed" value="{{ sciname }}" placeholder="期刊名称/首字母/缩写/ISSN" border="{{ false }}" focus="true" bind:change="onValueChange" /> class="container"> class="btn-area"> type="info" size="large" round="true" bind:click="onClickQuery" loading="{{isQuery}}">查询 wx:if="{{sci.length>0}}"> title="共找到{{sci.length}}本期刊"> wx:for="{{sci}}"wx:for-index="idx" wx:for-item="item" wx:key="idx"> title="{{item.sciname}}" value="{{item.if}}" border="false" title-width="80%" is-link link-type="navigateTo" url="/pages/detail/index?id={{idx}}"/>

页面逻辑：

//index.jsconst app = getApp()Page({ data: { isQuery:false, sciname:'', sci:[], }, onValueChange:function(value){ this.setData({ sciname:value.detail }) }, onClickQuery:function(){ var _this = this this.setData({ isQuery:true }) console.log('begin'+_this.data.sciname) wx.cloud.callFunction({ name: 'http_get', data: { sciname:_this.data.sciname }, success:res=>{ //未查到 if(res.result==-1){ wx.showModal({ title: '提示', content: '未查询到相关信息，换个关键词试试？', }) }else{ wx.setStorageSync('scis', res.result) _this.setData({ sci:res.result }) } _this.setData({ isQuery: false }) }, fail:err=>{ _this.setData({ isQuery: false }) console.log(err) }, }) }, onLoad: function() { },//省略部分代码})

我以同样的方式添加了一个详细页面，以显示每本期刊的详细信息。

部署1.上传项目文件

首先，对于每个云功能，右键单击并单击“上传和部署：云安装依赖性”（当然，可以上传和部署所有文件）。然后单击IDE右上角的“上传”，填写版本信息，即可完成上传。

登录微信公共平台的管理界面，切换到版本管理，我们可以看到提交的版本。

2.填写小程序信息

在管理界面的主页上说小程序发布过程，我们需要添加小程序的基本信息，例如名称，图标，描述等，作为小程序信息。 微信正式审核通常会在7天内完成。我新注册的小程序评论花了两天时间。

3.提交审核

审核完成后，您可以提交审核。切换到版本管理界面，提交刚上传的版本的评论，并指出版本信息。审查也需要几天。

结论

因为我已经有开发经验，所以注册和编码工作只花了一个下午，但是程序审查确实非常耗时，需要耐心等待。

此程序还发布在github上：

csuhan / sciquery