微信小程序学习笔记

笔记开始于2021-04-21，开发者工具版本号为1.05.2103200

官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/

入门小程序开发

前置准备

首先要注册开发者账号，之前注册过服务号之类也要再次注册，小程序不同于服务号需要单独注册

注册了小程序的开发者账号之后，扫码登录小程序后台（扫码登录时选择小程序测试号）找到AppID，后面会用到

之后下载微信开发者工具进行小程序的开发就可以了

Hello world

在小程序开发者工具中点击加号创建小程序，填写项目名称、项目目录以及前面的AppID即可

点击新建后会自动生成一个HelloWorld的小程序，我们通过操作开发者工具可以直接进行预览

微信开发者工具简单使用

开发者工具使用详细教程可以参官方文档

1. 在左上角用户头像的右侧有这样四个按钮开关，他们对应着页面显示内容，具体如下所示：

• 模拟器：左侧小程序预览界面
• 编辑器：右侧代码编写区域
• 调试器：右下角浏览器控制台
• 可视化：通过鼠标拖拽完成小程序页面的绘制，基本用不到…

2. 在四个开关按钮右侧有这样一栏，具体作用如下所示：

• 预览：点击预览后稍等会生成二维码，可以直接在手机微信上扫码查看效果
• 真机调试：除了手机端扫码预览之外还会在PC生成调试器，可以实时观测手机上的小程序，起到调试作用
• 清缓存：这个没必要说了，，，

小程序目录结构

这里先了解一下小程序项目目录结构，了解一下每个文件分别是干什么的

首先从根目录开始了解，将根目录这几个文件划分为三块

/* 这两个文件夹可自定义命名，没有强制要求，utils可以删除不要 */
|-pages   // 这是页面文件夹，小程序中所有的页面都会放在该目录下
|-utils   // 一些可复用的函数可以抽取为单独的JS文件放在该目录下，然后在其他页面中通过require引用
  |-util.js  // 目录下只有一个个的JS文件，这里就不单独说了
  |-abc.js ...

/* 小程序的主体文件，必须存在且放在项目根目录 */
|-app.js    // JS逻辑代码
|-app.json  // 小程序的全局配置，例如小程序标题是什么，背景颜色是什么，有多少个page页面...
|-app.wxss  // 全局生效的CSS文件

/* 其他配置文件，可有可无 */
|-project.config.json // 使用开发者工具每个人都有自定义的配置，这个是用来存储个性配置的文件，与项目无关
|-sitemap.json        // 微信搜索引擎的相关配置，具体参考官网

utils目录在上面已经解释过了，这里介绍一下pages目录

可以看到，pages下有index、logs两个文件夹，两个文件夹下分为存放js、json、wxml、wxss四种类型的同名文件，这四种类型的同名文件被称为一个Page页面，将四个文件放在某个文件夹下，这个文件夹就可以看成一个Page页面

/* 写法与Angular有些类似，他将一个HTML页面拆分为四个文件分别写不同的代码 */
|-abc.js    // 主要写JS代码，处理页面取值等等业务逻辑
|-abc.wxml  // 主要写HTML代码，控制页面布局等等
|-abc.wxss  // 主要写CSS代码，用来美化页面布局
|-abc.json  // 当前页面的配置文件，优先级高于全局配置文件app.json

页面相关知识

常用控件使用

JS文件介绍

声明周期函数

页面相关事件

单击事件（支持冒泡）：bindtap

单机事件（禁止冒泡）：catchtap

页面表单操作

路由页面跳转

// 保留当前页面跳转，跳转到下一页后会在左上角自动生成返回按钮
wx.navigateTo()
// 销毁当前页面，跳转到下一页
wx.redirectTo()
// 销毁所有页面，然后打开指定页面
wx.reLaunch()

发起网络请求

常用小程序API