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. 打开微信公众平台官网,
点击右上角注册按钮,按页面提示内容填写信息后提交即可
2. 正常注册之后,重新进入微信公众平台官网,扫码登录
点击页面左下角的设置,如下图所示,
点击后滑动至页面底部,找到AppID,并复制,如下图所示
复制完毕后,回到微信开发者工具内,点击页面右上角的详情按钮
在出现的小程序详情弹窗内点击修改按钮,粘贴进去刚才复制出来的AppID,
正常修改后,开发者工具内会出现如下操作按钮
点击上传,出现版本信息填写框,按实际情况填写即可,例如
编辑完毕后,点击上传按钮,稍等片刻,即会出现上传结果,例如
上传成功之后,我们打开浏览器下的微信公众平台界面,点击页面左上方的版本管理
右侧页面即会看到我们刚才提交的版本信息,如下所示
点击提交审核,填写相关审核信息后,点击提交按钮,此时返回前一个版本管理页面,审核版本模块下会出现刚才提交的版本信息,待官方审核通过后,右侧才会出现一个发布按钮,点击发布并选择全量发布即可。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。