微信小程序从注册账号到上架(图文说明)

前言

自从微信小程序功能发布后，我就一直关注小程序的动向，但由于学习繁忙，总是没有太多时间学习。大二逐渐学会了Vuejs，被它简洁的设计所吸引。后来看了小程序的开发文档，发现竟然如此相似。也许前端的发展趋势是这样的，每个框架在设计上都趋于相似和优秀。

大三学生逐渐学会了围棋语言。为了练好Go语言，他们还聚合了自己这几年积累的东西，于是开发了微信小程序：我们中南(可以在微信上搜索，虽然毕业后不打算维护)，集成了中南大学常见的信息查询功能，如：年级课表查询、校车日历查询等。已经在我的Github中打开了：前端和后端。

《我们南方》和《SCI》期刊的IF查询

今年暑假的一个突发奇想，看了一下We中南的统计，发现还是有人用的。没有推广，实际上增加了几百次访问(突然被感动)。同时我发现小程序支持云功能的开发，也就是说小程序不需要使用后端服务器，而是直接使用它们提供的nodejs环境进行开发。

经过这几天的探索，我想分享一下从注册小程序到上架的全过程，供准备学习小程序的同学参考。

准备工作/即将工作

1.注册微信小程序账号

点击入口立即注册微信小程序账号。点击它，你会看到下面的界面。选择注册类型时，要选择微信小程序。

注册界面

然后填写相关信息完成注册。

注册界面-填写信息

注册后，切换到开发-开发设置查看开发者ID。

应用编号

2.下载开发人员工具并创建新项目

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

关于IDE使用的界面，请详细参考官方文档

然后，打开开发者工具，修改项目名称，填写上面提到的AppID，为后端服务选择小程序云开发。

创建新的小程序项目

创建新项目后，我们可以看到IDE已经帮助我们创建了一个包含云功能开发的新的小程序模板，并且还提供了一些功能测试接口。这个时候，我们还没有开始云开发。我们需要点击IDE左上角的“云开发”，然后选择启动云服务。

主IDE接口

开发小程序

1.项目文件结构介绍

项目结构

项目分为两个子文件夹，一个是cloudfunctions，包含小程序的云功能，一个子文件夹包含一个云功能；另一个是miniprogram，是小程序的前置文件夹。没有固定的文件夹格式，可以通过修改app.json自定义自己的文件夹，具体文档的介绍可以参考官方文档

2.修改小程序信息

在miniprogram文件夹下打开app.json，定义小程序的基本信息。下面是我的小程序的app.json。我删除了示例中所有不相关的页面，增加了索引主界面和详细页面。修改示例项目：可以直接删除pages目录中除索引以外的所有页面，删除样式和图像文件夹中的所有文件。

{ ' pages ' :[' pages/index/index '，' pages/detail/index '，' window ' : { ' background color ' : ' # f6f6 '，' backgroundTextStyle ' : ' light '，' NavigationBarbackgroundColor ' : ' # f6f6 '，' NavigationBar Title Text ' : ' SCiIF期刊影响因子查询2019 '，' NavigationBar Text Style ' 3: ' Black ' }，' Sitemap创建新的云功能！

云功能最大的优势就是不需要购买服务器、注册域名、配置SSL证书，真的是开箱即用。参见cloudfunctions目录中的new nodejs cloud function，创建一个新的cloud function，它包含两个文件：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()返回{ event，openid: wxContext。OPENID，appid: wxContext。APPID，Union id:wxcontext.union id。}}需要注意的是，cloud函数包含了几乎完整的nodejs环境，所以可以通过package.json添加和使用一些常见的nodejs库，比如requests和chreeio.

4.向云功能添加功能

本文的小程序是SCI期刊影响因子查询小程序，逻辑简单，后端只需要提供一个期刊查询接口，即可为前端提供相应的期刊影响因子。

1.创建新的云函数http_get

2.介绍相关类库。在终端打开云函数http_get的目录，然后安装依赖库。因为这个函数利用了第三方的查询接口，所以需要使用http请求库get和http解析库cheerio。具体操作如下

CD/path/to/your/cloudfunctionsnpm install//install wx-cloud-server NPM install get-save NPM install chef-save 3。为函数添加函数。这里，我们主要加载相关的类库，解析html，然后将结果编码为json并返回给客户端。

//加载相关类库const cloud=require(' wx-server-SDK ')const got=require(' got ')const query string=require(' query string ')const chef=require(' chef ')cloud . init()//cloud函数入口函数exports.main=async (event，Context)={ const wxcontext=cloud . getwxcontext()//sci影响因子查询接口const sci _ URL=' some URL '/get journal name let sci name=event . sci name let query=querystringfy({ q33//请求数据let resp=await get(sci _ URL字符串(查询))//解析html const $=chef。负载(分别。body)const list=$(. tb1tr ')//判断是否有查询日志if(list。儿童()。length==0){ return-1 } else {让jounal lists=lists。地图((I，Item)={退货{//期号： $ (item))。儿童()。eq (0)。text()，//省略部分内容，解析html参数//解析if3360 $ (item)。儿童()。等式(7)。text()云功能可以通过云调试进行调试：IDE界面-云开发-云功能，可以选择对应的云功能进行调试。点击调试返回调试结果，根据结果修改函数。

云功能调试

云功能调试

同时，可以通过本地环境调试cloudfunctions:在Cloud Functions下对应的函数文件夹中点击“本地调试”进行调试。与云调试相比，本地调试更方便，每次调试前无需将云功能上传到服务器。但需要注意的是：调试前请在云函数目录下执行npm install，完成相关类库的安装。

云功能调试

5.添加小程序页面

小程序的每一页都包含四个文件：js，json，wxml和wxss。Js负责程序逻辑、json配置页面参数、wxml定义页面结构和wxss定义页面样式。这相当于将一个HTML页面拆分成。html，css和。js。

由于小程序是在微信上运行的webview环境，其语法与html不同。你可以参考官方文件：门户

为了方便页面建设，本文介绍了一个第三方类库：Vant，提供了精美的界面元素，开箱即用。具体用法请参考万通官方文件。

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

小程序接口

相应的代码如下：

页面结构

！-index . wxml-view class=' head _ img ' van-cell-group custom-class=' cell _ group ' van-field custom-class=' cell _ field ' value=' { { sciname } } Placeholder=' journal name/缩写/ISSN ' border=' { { false } } ' focus=' true ' bind : change=' onvalue change '/van-cell-group/view class=' container ' view class=' BTN-area ' van-button type=' info ' size=' large 'length0}}' van-cell-group title='已找到{{sci.length}}此期刊' view wx : for=' { { sci } } ' wx : for-index=' idx ' wx : for-item=' item ' wx : key=' idx ' van-cell title=' { { item . sciname } } ' value=' { { item . if } } ' border=' false ' title-width=' 80% '是-link link-link-typeid={ { idx } } '//view/van-cell-group/view/view页面逻辑：

//index . js const app=GetApp()Page({ data : { isquery3360 false，sciname: ' '，sci:[]，}，OnValueChange3360 FuncTion(value){ this . setDATa({ sci name : value . detail })}，OnClickquery3360 FuncTion(){ var _ this=this . setDATa({ isquery3360 true })console . log(' begin ' _ this data)。})} else { wx . setstoragesync(' scis '，RES . result)_ this . setdata({ sci : RES . result })} _ this . setdata({ isQuery: false })}，Fail: err={_ this。setdata({ isquery3360 false })控制台。log (err)}，})}，onload: function () {}，//省略部分代码})同样的，我添加了一个详细的页面来展示每个日志的详细信息。

部署

1.上传项目文件

首先，对于每个云功能，右键点击，点击上传部署：云安装依赖(当然所有文件都可以上传部署)。然后点击IDE右上角的上传，填写版本信息完成上传。登录微信公众平台的管理界面，切换到版本管理，可以看到提交的版本。

小程序审计

2.填写小程序信息

在管理界面的首页，写着小程序的发布流程。我们需要补充小程序的基本信息，如名称、图标、描述等。作为小程序信息。微信官方一般在7天内完成审核，我新注册的小程序审核需要两天。

3.提交以供审查

评审完成后，可以提交评审。切换到版本管理界面，提交上传的版本进行审批，并注明版本信息。复习需要几天时间。

结论

既然有了开发经验，注册和编码工作只用了一个下午，但是程序评审真的很费时间，需要耐心等待。该程序也发布在github: portal上

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。