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,
失常批改后,开发者工具内会呈现如下操作按钮

点击上传,呈现版本信息填写框,按理论状况填写即可,例如

编辑结束后,点击上传按钮,稍等片刻,即会呈现上传后果,例如

上传胜利之后,咱们关上浏览器下的微信公众平台界面,点击页面左上方的版本治理

右侧页面即会看到咱们方才提交的版本信息,如下所示

点击提交审核,填写相干审核信息后,点击提交按钮,此时返回前一个版本治理页面,审核版本模块下会呈现方才提交的版本信息,待官网审核通过后,右侧才会呈现一个公布按钮,点击公布并抉择全量公布即可。