头图

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

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

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

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

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

https://developers.weixin.qq....
推荐下载稳定版,如下图所示
image.png
微信开发者工具安装步骤:
打开下载好的exe文件,默认点击下一步,直到出现选择安装位置,切换到本机软件安装路径即可
image.png
切换安装路径后,点击安装

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

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

image.png

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

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

image.png

4. 微信小程序开发简介

首先描述一下项目路径下,主要几个文件的作用
image.png

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

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

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

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

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

5. 如何新增一个页面?

选中项目下的page文件夹,右键,点击新建文件夹
image.png

输入文件夹名称,例如login
image.png
选中login文件夹,右键,选择新建page
image.png
输入page名称,例如index,按下回车按钮,此时新页面就创建成功了,当前项目结构会更新成如下结构
image.png
且此时,app.json文件下,pages数组会自动填充刚才新建的页面路径,如下图所示
image.png
调整数组下的路径顺序,将page/login/index的顺序暂时调到第一位,如下所示
image.png
此时执行保存文件操作(ctrl + s),左侧模拟器内,会出现如下界面
image.png
该页面显示的内容即为page/login/index.wxml文件下显示的内容

如何理解新建page后文件夹下出现的四个文件用途?
附上官网简介,(简单理解为:逻辑层和视图层分开在两个文件下做处理)
image.png

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

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

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


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

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

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

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

image.png
image.png
image.png

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

点击页面左下角的设置,如下图所示,
image.png
点击后滑动至页面底部,找到AppID,并复制,如下图所示
image.png
复制完毕后,回到微信开发者工具内,点击页面右上角的详情按钮
image.png
在出现的小程序详情弹窗内点击修改按钮,粘贴进去刚才复制出来的AppID,
正常修改后,开发者工具内会出现如下操作按钮
image.png
点击上传,出现版本信息填写框,按实际情况填写即可,例如
image.png
编辑完毕后,点击上传按钮,稍等片刻,即会出现上传结果,例如
image.png

上传成功之后,我们打开浏览器下的微信公众平台界面,点击页面左上方的版本管理
image.png
右侧页面即会看到我们刚才提交的版本信息,如下所示
image.png

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


前端小高
552 声望10 粉丝

Hey!