【微信小程序】小程序前期入门及审核发布流程

STEP1：前期软件安装及基本页面配置

1. 电脑上需要安装node环境，下载地址如下

https://nodejs.org/zh-cn/
推荐下载长期维护版本，如下图所示

Node安装：直接点击下载后的msi文件，默认点击下一步进行安装，安装后，打开cmd，输入指令node -v确定node是否有正常安装，
如有出现下图中所示版本号，说明安装成功

2. 下载微信开发者工具，下载地址如下

https://developers.weixin.qq....
推荐下载稳定版，如下图所示

微信开发者工具安装步骤：
打开下载好的exe文件，默认点击下一步，直到出现选择安装位置，切换到本机软件安装路径即可

切换安装路径后，点击安装

3. 微信开发者工具使用步骤

初次使用，需手机微信扫码确认登录，登录后，会出现如下界面

点击加号，会出现项目初始化配置界面，可以参考下图所示顺序编辑项目初始化配置内容
（备注：初学时，AppID选项可以先选择测试号，后期可以在开发者工具下切换AppID）
（后端服务选项，前期可以不选择云开发，后期业务如有需要可以再加上）

点击新建之后，会自动出现实例项目界面，如下所示

4. 微信小程序开发简介

首先描述一下项目路径下，主要几个文件的作用

app.json (全局配置文件)
官方文档说明地址如下
https://developers.weixin.qq....

例如，上图中右侧显示的pages数组，数组下存储的是小程序的页面路径列表，小程序打开时，默认打开页面为该数组的第一项，

app.wxss (全局样式文件)
官方文档说明地址如下
https://developers.weixin.qq....
该文件下的样式，小程序下的所有页面都可以引用到，语法与css大致相同，尺寸单位应使用官方推荐的rpx， 例如 width: 200rpx;

app.js(小程序逻辑文件)
官方文档说明地址如下
https://developers.weixin.qq....

全局下的公用变量可以存放在该文件下的globalData内，编辑全局变量操作的具体使用方式，后续章节会介绍

5. 如何新增一个页面？

选中项目下的page文件夹，右键，点击新建文件夹

输入文件夹名称，例如login

选中login文件夹，右键，选择新建page

输入page名称，例如index，按下回车按钮，此时新页面就创建成功了，当前项目结构会更新成如下结构

且此时，app.json文件下,pages数组会自动填充刚才新建的页面路径，如下图所示

调整数组下的路径顺序，将page/login/index的顺序暂时调到第一位，如下所示

此时执行保存文件操作（ctrl + s），左侧模拟器内，会出现如下界面

该页面显示的内容即为page/login/index.wxml文件下显示的内容

如何理解新建page后文件夹下出现的四个文件用途？
附上官网简介，（简单理解为：逻辑层和视图层分开在两个文件下做处理）

如何修改页面显示内容？
举一个简单点的例子：
打开page/login/index.wxml文件，修改文件下的内容为下图所示内容，保存文件

此时页面即出现刚才编辑后的标签内容

微信小程序可以使用哪些标签？
这个部分可以参考官网文档下对标签内容的介绍（可以简单先过一遍）
https://developers.weixin.qq....

---

STEP2：小程序申请AppID及提交发布

1. 打开微信公众平台官网，

https://mp.weixin.qq.com/

点击右上角注册按钮，按页面提示内容填写信息后提交即可

2. 正常注册之后，重新进入微信公众平台官网，扫码登录

点击页面左下角的设置，如下图所示，

点击后滑动至页面底部，找到AppID，并复制，如下图所示

复制完毕后，回到微信开发者工具内，点击页面右上角的详情按钮

在出现的小程序详情弹窗内点击修改按钮，粘贴进去刚才复制出来的AppID,
正常修改后，开发者工具内会出现如下操作按钮

点击上传，出现版本信息填写框，按实际情况填写即可，例如

编辑完毕后，点击上传按钮，稍等片刻，即会出现上传结果，例如

上传成功之后，我们打开浏览器下的微信公众平台界面，点击页面左上方的版本管理

右侧页面即会看到我们刚才提交的版本信息，如下所示

点击提交审核，填写相关审核信息后，点击提交按钮，此时返回前一个版本管理页面，审核版本模块下会出现刚才提交的版本信息，待官方审核通过后，右侧才会出现一个发布按钮，点击发布并选择全量发布即可。