微信小程序的开发学习笔记
-
- 注册小程序
- 下载微信开发者工具
- 微信小程序代码结构-项目结构
- 小程序代码的构成- WXML 模板
- 小程序代码的结构- WXSS 样式
- 小程序代码的结构- JS 逻辑交互
- 微信小程序页面渲染的过程
- 微信小程序中组件的分类
- 小程序 API 概述
- VSCODE 相关插件
- 协同工作和发布-小程序的版本
- 查看小程序运营数据的两种方式
- WXML 模板语法 -
数据绑定
- WXML 模板语法 -
事件绑定
- WXML 模板语法 -
条件渲染
- WXML 模板语法 -
列表渲染
- WXSS 模板样式
- WXSS 模板样式 -
rpx
- WXSS 模板样式 -
样式导入
- WXSS 模板语法 -
全局样式和局部样式
- 全局配置
- 全局设置 -
tabBar
- 页面配置文件的作用
- 微信小程序数据请求 -
GET 和 POST
- 什么是页面导航?
- 页面导航 -
声明式导航
- 页面导航 -
编程式导航
- 页面导航 -
导航传参
- 页面事件 -
下拉刷新
- 页面事件 -
上拉触底事件
- 生命周期
- WXS 脚本 - 概述
- WXS 脚本 -
基础语法
- WXS 脚本 -
WXS 的特点
自定义组件
- 自定义组件 - 样式
- 自定义组件 -
数据、方法和属性
- 自定义组件 -
数据监听器
- 自定义组件 - 数据监听器 - 案例
- 自定义组件 - 纯数据字段
- 自定义组件 -
组件的生命周期
- 自定义组件 -
组件所在页面的生命周期
- 自定义组件 -
插槽
- 自定义组件 -
父子组件之间的通信
- 自定义组件 -
behaviors
- 使用
npm
包 Vant Weapp
组件库- 使用 npm 包 -
API Promise 化
全局数据共享
- 全局数据共享 -
MobX
分包
- 分包 -
使用方法
- 分包 -
独立分包
- 分包 -
分包预下载
- 案例 - 自定义 tabBar
注册小程序
- 微信公众平台官网
- 第一步:点击右上角
【立即注册】
- 第二步:选择
【小程序】
- 第三步:点击
【前往注册】
- 第四步:按要求填写信息
下载微信开发者工具
微信小程序代码结构-项目结构
-
pages:用来存放所有小程序的页面;
- .js文件:页面的脚本文件,存放页面的数据、事件处理函数等
- .json文件:当前页面的配置文件,配置窗口的外观、表现等,页面中的配置项会覆盖 app.json 的 window 中相同的配置项
- .wxml文件:页面的模板结构文件
- .wxss文件:当前页面的样式文件
-
utils:用来存放工具性质的模块;
-
app.js:小程序项目的入口文件
-
app.json:小程序项目的全局配置文件,包括小程序的所有页面路径、窗口外观、界面表现、底部 tab
- pages:用来记录当前小程序所有页面的路径
- window:全局定义小程序所有页面的背景色、文字颜色等
- style:全局定义小程序组件所使用的样式版本(v2:最新的样式;删除后使用旧的样式)
- sitemapLocation:用来指明 sitemap.json 的位置
-
app.wxss:小程序项目的全局样式文件
-
project.config.json:项目的配置文件
- settings:中保存了编译相关的配置
- projectname:中保存的是项目名称(无关紧要,跟向程序名称不相同也行)
- appid:中保存的是小程序的账号 ID
-
sitemap.json:用来配置小程序及其页面是否允许被微信索引(类似于 PC 网页的 SEO)
action :“allow” // 被索引
action :“disallow” // 不被索引
注意:sitemap 的索引提示是默认开启的,如需要关闭 sitemap 的索引提示,可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false
小程序代码的构成- WXML 模板
- WXML 和 HTML 的区别
- 1、标签名称不同
- HTML (div、span、img、a)
- WXML(view、text、image、navigator)
- 2、属性节点不同
- 超链接
- navigator
- 3、提供了类似于 Vue 中的模板语法
- 数据绑定
- 列表渲染
- 条件渲染
小程序代码的结构- WXSS 样式
- 1、新增了 rpx 尺寸单位
- 2、提供了全局的样式和局部样式
- 项目根目录中的 app.wxss 会作用于所有小程序页面
- 局部页面的 .WXSS 样式仅对当前页面生效
- 3、WXSS 仅支持部分 CSS 选择器
- .class 和 #id
- element
- 并集选择器、后代选择器
- ::after 和 ::before 等伪类选择器
小程序代码的结构- JS 逻辑交互
- 一个项目仅仅提供界面展示是不够的,在小程序中,我们通过 .js 文件来处理用户的操作。例如:响应用户的点击、获取用户的位置等等。
- 小程序中的 JS 文件分为三大类,分别是:
- 1、app.js
- 是整个小程序项目的入口文件,通过调用 App()函数来启动整个小程序
- 2、页面的 .js 文件
- 是页面的入口文件,通过调用 Page() 函数来创建并运行页面
- 3、普通的 .js 文件
- 是普通的功能模块文件,用来封装公共的函数或属性供页面使用
- 1、app.js
微信小程序页面渲染的过程
- 1、加载解析页面的 .json 配置文件
- 2、加载页面的 .wxml 模板和 .wxss 样式
- 3、执行页面的 .js 文件,调用 Page() 方法创建页面实例
- 4、页面渲染完成
微信小程序中组件的分类
- 小程序中的组件也是宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类,分别是:
1、视图容器
2、基础内容
3、表单组件
4、导航组件
- 5、媒体组件
- 6、map 地图组件
- 7、canvas 画布组件
- 8、开放能力
- 9、无障碍访问
- 常用的视图容器类组件
- 1、
view
- 普通视图区域
- 类似于 HTML 中的 div ,是一个块级元素
- 常用来实现页面的布局效果
- 2、
scroll-view
- 可滚动的视图区域
- 常用来实现滚动列表效果
- 3、
swiper 和 swiper-item
- 轮播图容器组件 和 轮播图 item 组件
- 1、
- 常用的基础内容组件:
- 1、
text
- 文本组件
- 类似于 HTML 中的 span 标签,是一个行内元素。
- 通过 text 组件的
selectable
属性,实现长按选中文本内容的效果(小程序中只有 text 组件支持长按选中功能)
- 2、
rich-text
- 富文本组件
- 支持把 HTML 字符串渲染为 WXML 结构
- 1、
- 其他常用组件
- 1、
button
- 按钮组件
- 功能比 HTML 中的 button 按钮丰富
- 通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
- 2、
image
- 图片组件
- image 组件默认宽度约300px、高度约240px
- image 组件的
mode
属性用来指定图片的裁剪
和缩放
模式,常用的 mode 属性值如下:
- 1、
mode 值 | 说明 |
---|---|
scaleToFill | (默认值)缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 |
aspectFit | 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 |
aspectFill | 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 |
widthFix | 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 |
heightFix | 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 |
小程序 API 概述
- 小程序中的 API 是由宿主环境提供的,通过这些丰富的小程序 API ,开发者可以方便的调用微信提供的能力,例如:获取用户信息、本地存储、支付功能等
- 小程序 API 的 3 大分类
- 小程序官方把 API 分为了如下 3 大类:
- 1、事件监听 API
- 特点:以 on 开头,用来监听某些事件的触发
- 举例:wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
- 2、同步 API
- 特点1:以 Sync 结尾的 API 都是同步 API
- 特点2:同步 API 的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
- 举例:wx.setStorageSync(‘key’,‘value’)向本地存储中写入内容
- 3、异步 API
- 特点:类似于 jQuery 中的 $.ajax(options) 函数,需要通过 success、fall、complete接受调用的结果
- 举例:wx.request() 发起网络数据请求,通过 success 回调函数接受数据
- 1、事件监听 API
- 小程序官方把 API 分为了如下 3 大类:
VSCODE 相关插件
- 1、小程序开发助手
- 2、Easy LESS
- 配置生成 .WXSS 文件方法
-
"less.compile": { "compress": false, //是否压缩 "sourceMap": false, //是否生成map文件,有了这个可以在调试台看到less行数 "out": true, // 是否输出css文件,false为不输出 // "outExt": ".css" // 输出文件的后缀,小程序可以写'wxss' "outExt": ".wxss" // 输出文件的后缀,小程序可以写'wxss' }
- 3、
WXML - Language Service
- Vscode 开发微信小程序核心插件
协同工作和发布-小程序的版本
版本阶段 | 说明 |
---|---|
开发版本 | 使用开发者工具,可将代码上传到开发版本中。开发版本只保留每人最新的一份上传的代码。点击提交审核,可将代码提交审核。开发版本可删除,不影响线上版本和审核中版本的代码 |
体验版本 | 可以选择某个开发版本作为体验版,并且选取一份体验版。 |
审核中的版本 | 只能有一份代码处于审核中。有审核结果后可以发布到线上,也可直接重新提交审核,覆盖原审核版本。 |
线上版本 | 线上所有用户使用的代码版本,该版本代码在新版本代码发布后被覆盖更新。 |
查看小程序运营数据的两种方式
-
1、在“小程序后台”查看
- a、登录小程序管理后台
- b、点击侧边栏的“统计”
- c、点击相应的 tab 可以看到相关的数据
-
-
2、使用“小程序数据助手”查看
- a、打开微信
- b、搜索“小程序数据助手”
- c、查看已发布的小程序相关的数据
WXML 模板语法 - 数据绑定
- 1、数据绑定的基本原则
-
1、在 data 中定义页面的数据
- 在页面对应的 .js 文件中,把数据定义到 data 对象中即可:
- 在页面对应的 .js 文件中,把数据定义到 data 对象中即可:
-
2、在 WXML 中使用数据
- 把 data 中的数据绑定到页面中渲染,使用
Mustache语法
(双大括号)将变量包起来即可。语法格式为:
- 把 data 中的数据绑定到页面中渲染,使用
-
- 2、动态绑定属性
- 页面的数据如下:
- 页面的结构如下
- 页面的数据如下:
- 3、三运运算
- 页面的数据如下:
- 页面的机构如下:
- 页面的数据如下:
- 4、算数运算
-
页面的数据如下:
-
页面的结构如下:
-
WXML 模板语法 - 事件绑定
- 什么是事件?
- 事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
- 小程序中常用的事件
类型 | 绑定方式 | 事件描述 |
---|---|---|
tap | bindtap 或 bind:tap | 手指触摸后马上离开,类似于 HTML 中的 click 事件 |
input | bindinput 或 bind:input | 文本框的输入事件 |
change | bindchange 或 bind:change | 状态改变时触发 |
- 事件对象的属性列表
- 当事件回调触发的时候,会收到一个事件对象 event ,它的详细属性如下表所示:
属性 | 类型 | 说明 |
---|---|---|
type | String | 事件类型 |
timeStamp | Integer | 页面打开到触发事件所经过的毫秒数 |
target | Object | 触发事件的组件的一些属性值集合 |
currentTarget | Object | 当前组件的一些属性值集合 |
detail | Object | 额外的信息 |
touches | Array | 触摸时间,当前停留在屏幕中的触摸点信息的数组 |
changedTouches | Array | 触摸事件,当前变化的触摸点信息的数组 |
- target 和 currentTarget 的区别
- target 是触发该事件的源头组件。
- currentTarget 则是当前事件所绑定的组件。举例如下:
- 点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层 view 的 tap 事件处理函数。此时,对于外层的 view 来说:
- e.target 指向的是触发事件的源头组件,因此,e.target 是内部的按钮组件
- e.currentTarget 指向的是当前正在触发事件的那个组件,因此,e.currentTarget 是当前的 view 组件
bindtap 的语法格式
- 在小程序中,不存在 HTML 中的 onclick 鼠标点击事件,而是通过
tap 事件
来响应用户的触摸行为。- 1、通过 bindtap ,可以为组件绑定 tap 触摸事件,语法如下:
- 2、在页面 .js 文件中定义对应的事件处理函数,事件参数通过形参 event (一般简写成 e)来接收:
- 1、通过 bindtap ,可以为组件绑定 tap 触摸事件,语法如下:
- 在小程序中,不存在 HTML 中的 onclick 鼠标点击事件,而是通过
- 在事件处理函数中为 data 中的数据赋值
- 通过调用 this.setData(dataObject)方法,可以给页面 data 中的数据重新赋值,示例如下:
- 页面的结构如下:
- 页面 .js 文件如下:
- 页面的结构如下:
- 通过调用 this.setData(dataObject)方法,可以给页面 data 中的数据重新赋值,示例如下:
事件传参
-
小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。
-
可以为组件提供
data-*
自定义属性传参,其中*代表的是参数的名字
,示例代码如下: -
-
最终:
msg
会被解析为参数的名字- 字符串会被解析为参数的值
-
在事件处理函数中,通过
event.target.dataset.参数名
即可获取到具体参数的值,示例代码如下: -
-
bind:input 或 bindinput
的语法格式- 在小程序中,通过
input 事件
来响应文本框的输入事件,语法格式如下:-
1、通过 bindinput ,可以为文本框绑定输入事件,示例代码如下:
-
-
2、在页面的 .js 文件中定义事件处理函数:
-
-
- 在小程序中,通过
- 实现文本框和 data 之间的数据同步
- 实现步骤:
-
1、定义数据
-
2、渲染结构
-
3、美化样式
-
-
4、绑定 input 事件处理函数
-
-
- 实现步骤:
WXML 模板语法 - 条件渲染
- 1、
wx:if
- 在小程序中,使用
wx:if=“{ { flag === 1}}”
来判断是否需要渲染该代码块 - 也可以用
wx:elif
和wx:else
来添加 else 判断:
- 在小程序中,使用
- 2、结合
block
使用 wx:if- 如果要一次性控制多个组件的展示与隐藏,可以使用一个
block
标签将多个组件包装起来,并在block
标签上使用 wx:if 控制属性,示例如下:
-
注意
:block 并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染。
- 如果要一次性控制多个组件的展示与隐藏,可以使用一个
- 3、
hidden
- 在小程序中,直接使用
hidden = “{ { flag === 1 }}”
也能控制元素的显示与隐藏:
- 在小程序中,直接使用
- 4、
wx:if
与hidden
的对比- 1、运行方式不同
- wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏
- hidden 以切换样式的方式(display:none/block),控制元素的显示与隐藏
- 2、使用建议
- 频繁切换是,建议使用 hidden
- 控制条件复杂时,建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换
- 1、运行方式不同
WXML 模板语法 - 列表渲染
- 1、
wx:for
- 通过 wx:for 可以根据指定的数组,循环渲染重复的组件结构,语法示例如下:
- 通过 wx:for 可以根据指定的数组,循环渲染重复的组件结构,语法示例如下:
- 2、手动指定索引