从前慢-微信小程序
微信小程序
1 微信小程序介绍
微信⼩程序，简称⼩程序，英⽂名 Mini Program ，是⼀种不
需要下载安装即可使⽤的应⽤，它实现
了应⽤“触⼿可及”的梦想，⽤⼾扫⼀扫或搜⼀下即可打开应⽤
1.1.1 为什么是微信小程序
1 微信有海量⽤⼾，⽽且粘性很⾼，在微信⾥开发产品更容
易触达⽤⼾；
2 推⼴app 或公众号的成本太⾼。
3 开发适配成本低。
4 容易⼩规模试错，然后快速迭代。
5 跨平台。
1.1.2 微信⼩程序历史
2016年1⽉11⽇，微信之⽗张⼩⻰时隔多年的公开亮相，解读
了微信的四⼤价值观。张⼩⻰指出，越来越多产品通过公众
号来做，因为这⾥开发、获取⽤⼾和传播成本更低。拆分出
来的服务号并没有提供更好的服务，所以微信内部正在研究新
的形态，叫「微信⼩程序」 需要注意的是，之前是叫做 应⽤号
2016年9⽉21⽇，微信⼩程序正式开启内测。在微信⽣态下，
触⼿可及、⽤完即⾛的微信⼩程序引起⼴泛关注。腾讯云正式
上线微信⼩程序解决⽅案，提供⼩程序在云端服务器的技术⽅案。
2017年1⽉9⽇，微信推出的“⼩程序”正式上线。“⼩程序”是
⼀种⽆需安装，即可使⽤的⼿机“应⽤”。不需要像往常⼀样
下载App，⽤户在微信中“⽤完即⾛”。
1.1.3 疯狂的微信小程序
1 微信⽉活已经达到10.82亿。其中55岁以上的⽤⼾
也达到6300万
2 信息传达数达到450亿，较去年增⻓18%;视频通话4
.1亿次,增⻓100%
3 ⼩程序覆盖超过200+⾏业，交易额增⻓超过6倍，服
务1000亿+⼈次,创造出了5000亿+的商业价值
1.1.4 还有其他的小程序不容忽视
1 ⽀付宝⼩程序
2 百度⼩程序
3 QQ⼩程序
4 今⽇头条 + 抖⾳⼩程序
2 环境准备
注册账号
建议使用全新的邮箱，没有注册过其他小程序或者公
众号的。
访问注册⻚⾯(https://mp.weixin.qq.com/wxopen/waregister?action=step1)，
耐⼼完成注册即可。
获取APPID
由于后期调⽤微信⼩程序的接⼝等功能，需要索取开发
者的⼩程序中的 APPID ，所以在注册成功后，可登录，
然后获取APPID。
登录(https://mp.weixin.qq.com/)，成功后可看到如下界⾯
然后复制你的APPID,悄悄的保存起来，不要给别⼈看到。
2.1 开发⼯具
下载地址
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
微信⼩程序⾃带开发者⼯具，集 开发 预览 调试 发布 于⼀
⾝的 完整环境。
但是由于编码的体验不算好，因此 建议使⽤ vs code + 微
信小程序编辑工具 来实现编码
vs code 负责敲代码， 微信编辑工具 负责预览
3 第⼀个微信⼩程序
注意 第⼀次登录的时候 需要扫码登录
新建⼩程序项⽬
填写项⽬信息
成功
4 微信开发者工具介绍
详细的使⽤，可以查看官⽹
https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
5 小程序结构目录
⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可
以在微信中开发具有原⽣APP体验的服务。
⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ，
以及 JavaScript ，并在视图层与逻
辑层间提供了数据传输和事件系统，让开发者能够专注于
数据与逻辑。
5.1 小程序⽂件结构和传统web对比
| 结构 | 传统web | 微信⼩程序 |
|---|---|---|
| 结构 | HTML | WXML |
| 样式 | CSS | WXSS |
| 逻辑 | Javascript | Javascript |
| 配置 | ⽆ | JSON |
通过以上对⽐得出，传统web 是三层结构。⽽微信⼩程序 是四层结构，多了⼀层 配置.json
5.2. 基本的项目目录
6 小程序配置文件
个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局
的 app.json 和 ⻚⾯⾃⼰的page.json
注意：配置文件中不能出现注释
6.1 全局配置app.json
app.json 是当前⼩程序的全局配置，包括了⼩程序的所有
⻚⾯路径、界⾯表现、⽹络超时时间、底部 tab 等。普通快
速启动项⽬⾥边的 app.json 配置
字段的含义
1 pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为
了让微信客⼾端知道当前你的⼩程序
⻚⾯定义在哪个⽬录。
2 window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂
字颜⾊定义等。
3 完整的配置信息请参考 app.json配置(https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)
6.1.1 tabbar
6.1.2 页面配置page.json
这⾥的 page.json 其实⽤来表⽰⻚⾯⽬录下的 page.json 这类和
⼩程序⻚⾯相关的配置。
开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允
许下拉刷新等等。
⻚⾯的配置只能设置 app.json 中部分 window 配置项的内容，⻚
⾯中配置项会覆盖 app.json
的 window 中相同的配置项
6.1.3 sitemap 配置-了解即可
⼩程序根⽬录下的 sitemap.json ⽂件⽤于配置⼩程序
及其⻚⾯是否允许被微信索引。
7 模板语法
WXML（WeiXin Markup Language）是框架设计的
⼀套标签语⾔，结合基础组件、事件系统，可以构
建出⻚⾯的结构。
7.1 模板语法
7.1.1 普通写法
{{ message }}
Page({
data: {
message: 'Hello MINA!'
}
})
7.1.2 组件属性
Page({
data: {
id: 0
}
})
7.1.3 bool类型
不要直接写 checked=false，其计算结果是⼀个字符串
7.2 运算
7.2.1 三元运算
Hidden
7.2.2 算数运算
{{a + b}} + {{c}} + d
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
7.2.3 逻辑判断
7.2.4 字符串运算
{{"hello" + name}}
Page({
data:{
name: 'MINA'
}
})
7.2.5 注意
花括号和引号之间如果有空格，将最终被解析成为字符串
7.3 列表渲染
7.3.1 wx:for
项的变量名默认为 item wx:for--item 可以指定数
组当前元素的变量名
下标变量名默认为 index wx:for--index 可以指定数
组当前下标的变量名
wx:key ⽤来提⾼数组渲染的性能
wx:key 绑定的值 有如下选择
1 string 类型，表⽰ 循环项中的唯⼀属性 如
list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]
wx:key="id"
2 保留字 *this ，它的意思是 item 本⾝ ，*this 代表的必须是
唯⼀的字符串和数组。
list:[1,2,3,4,5]
wx:key="*this"
代码：
{{index}}: {{item.message}}
Page({
data: {
array: [{
id:0,
message: 'foo',
}, {
id:1,
message: 'bar'
}]
}
})
7.3.2 block
渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素
{{index}}:
{{item}}
7.4 条件渲染
7.4.1 wx:if
在框架中，使⽤ wx:if="{{condition}}" 来判断是否需要
渲染该代码块：
1
2
3
7.4.2 hidden
True
类似 wx:if
频繁切换 ⽤ hidden
不常使⽤ ⽤ wx:if
7.4.3 代码演示
//Page Object
Page({
data: {
msg: "hello mina",
num: 10000,
isGirl: false,
person: {
age: 74,
height: 145,
weight: 200,
name: "富婆"
},
isChecked:false,
list:[
{
id:0,
name:"猪八戒"
},
{
id:1,
name:"天蓬元帅"
},
{
id:2,
name:"悟能"
}
]
}
});
<view> {{msg}} view>
<view>{{num}}view>
<view> 是否是伪娘: {{isGirl}} view>
<view>{{person.age}}view>
<view>{{person.height}}view>
<view>{{person.weight}}view>
<view>{{person.name}}view>
<view data-num="{{num}}"> 自定义属性view>
<view>
<checkbox checked="{{isChecked}}"> checkbox>
view>
<view>{{1+1}}view>
<view>{{'1'+'1'}}view>
<view>{{ 11%2===0 ? '偶数' : '奇数' }}view>
<view>
<view
wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key="id"
>
索引：{{index}}
--
值:{{item.name}}
view>
view>
<view>
<view>对象循环view>
<view
wx:for="{{person}}"
wx:for-item="value"
wx:for-index="key"
wx:key="age"
>
属性:{{key}}
--
值:{{value}}
view>
view>
<view>
<block
wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key="id"
class="my_list"
>
索引：{{index}}
--
值:{{item.name}}
block>
view>
<view>
<view>条件渲染view>
<view wx:if="{{true}}">显示view>
<view wx:if="{{false}}">隐藏view>
<view wx:if="{{flase}}">1view>
<view wx:elif="{{flase}}">2 view>
<view wx:else> 3 view>
<view>---------------view>
<view hidden >hidden1view>
<view hidden="{{false}}" >hidden2view>
<view>-----000-------view>
<view wx:if="{{false}}">wx:ifview>
<view hidden style="display: flex;" >hiddenview>
view>
8 小程序事件的绑定
⼩程序中绑定事件，通过bind关键字来实现。
如 bindtap bindinput bindchange 等
不同的组件⽀持不同的事件，具体看组件的说明即可。
8.1 wxml
8.2 page
Page({
// 绑定的事件
handleInput: function(e) {
console.log(e);
console.log("值被改变了");
}
})
8.3 特别注意
1 绑定事件时不能带参数 不能带括号 以下为错误写法
2 事件传值 通过标签⾃定义属性的⽅式 和 value
3 事件触发时获取数据
handleInput: function(e) {
// {item:100}
console.log(e.currentTarget.dataset)
// 输入框的值
console.log(e.detail.value);
}
8.4 代码演示
// pages/demo04/demo04.js
Page({
data: {
num: 0
},
// 输入框的input事件的执行逻辑
handleInput(e) {
// console.log(e.detail.value );
this.setData({
num: e.detail.value
})
},
// 加 减 按钮的事件
handletap(e) {
// console.log(e);
// 1 获取自定义属性 operation
const operation = e.currentTarget.dataset.operation;
this.setData({
num: this.data.num + operation
})
}
})
<input type="text" bindinput="handleInput" />
<button bindtap="handletap" data-operation="{{1}}" >+button>
<button bindtap="handletap" data-operation="{{-1}}">-button>
<view>
{{num}}
view>
9 样式WXSS
WXSS( WeiXin Style Sheets )是⼀套样式语⾔，⽤于
描述 WXML 的组件样式。
与 CSS 相⽐，WXSS 扩展的特性有：
响应式⻓度单位 rpx
样式导⼊
9.1 尺寸单位
rpx(responsive pixel):可以根据屏幕宽度进⾏⾃适应。规定屏
幕宽为 750rpx 。如在iPhone6 上,屏幕宽度为 375px ,共有
750个物理像素，则 750rpx = 375px = 750物理像素 ,
1rpx = 0.5px = 1物理像素 。
建议： 开发微信⼩程序时设计师可以⽤ iPhone6 作为视
觉稿的标准。
使⽤步骤：
1 确定设计稿宽度 pageWidth
2 计算⽐例 750rpx = pageWidth px ,
因此 1px=750rpx/pageWidth 。
3 在less⽂件中，只要把设计稿
中的 px => 750/pageWidth rpx 即可。
/*
1 小程序中 不需要主动来引入样式文件
2 需要把页面中某些元素的单位 由 px 改成 rpx
1 设计稿 750x
750 px = 750 rpx
1 px = 1 rpx
2 把屏幕宽度 改成 375px
375 px = 750 rpx
1 px = 2rpx
1rpx = 0.5px
3 存在一个设计稿 宽度 414 或者 未知 page
1 设计稿 page 存在一个元素 宽度 100px
2 拿以上的需求 去实现 不同宽度的页面适配
page px = 750 rpx
1 px = 750 rpx / page
100 px = 750 rpx * 100 / page
假设 page = 375px
4 利用 一个属性 calc属性 css 和 wxss 都支持 一个属性
1 750 和 rpx 中间不要留空格
2 运算符的两边也不要留空格
*/
view{
/* width: 200rpx; */
height: 200rpx;
font-size: 40rpx;
background-color: aqua;
/* 以下代码写法是错误 */
/* width:750 rpx * 100 / 375 ; */
width:calc(750rpx * 100 / 375);
}
9.2 样式导⼊
wxss中直接就⽀持，样式导⼊功能。
也可以和 less中的导⼊混⽤。
使⽤ @import 语句可以导⼊外联样式表，只⽀持相对路径。
⽰例代码：
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
9.3 选择器
特别需要注意的是 ⼩程序 不⽀持通配符 * 因此以下代码⽆效！
*{
margin:0;
padding:0;
box-sizing:border-box;
}
⽬前⽀持的选择器有：
9.4 小程序中使用less
原⽣⼩程序不⽀持 less ，其他基于⼩程序的框架⼤体都
⽀持，如 wepy ， mpvue ， taro 等。
但是仅仅因为⼀个less功能，⽽去引⼊⼀个框架，肯定
是不可取的。因此可以⽤以下⽅式来实现
1 编辑器是 vscode
2 安装插件 easy less
3 在vs code的设置中加⼊如下，配置
"less.compile": {
"outExt": ".wxss"
}
4 在要编写样式的地⽅，新建 less ⽂件，如 index.less ,然后
正常编辑即可。
/* 1 定义less变量 */
@color:yellow;
text{
/* 2 使用变量 */
color:@color;
}
view{
.vie1{
text{
color: red;
}
}
}
/* 导入 */
@import "../../styles/reset.less";
view{
color: @themeColor;
}
.main{
/*
1 less中 支持 两种注释 多行 单行
2 wxss 不能写 单行注释 因为 写了 和没写是一样！！！
*/
/* font-size: 200px; */
// font-size: 400px;
}
编译后生成以下内容
/* 1 定义less变量 */
text {
/* 2 使用变量 */
color: yellow;
}
view .vie1 text {
color: red;
}
/* 导入 */
view {
color: green;
}
.main {
/*
1 less中 支持 两种注释 多行 单行
2 wxss 不能写 单行注释 因为 写了 和没写是一样！！！
*/
/* font-size: 200px; */
}
10 常见组件
重点讲解⼩程序中常⽤的布局组件
view,text,rich--text,button,image,navigator,icon,swiper,radio,checkbox。等
10.1 view
代替 原来的 div 标签
点击我试试
10.2 text
1 ⽂本标签
2 只能嵌套text
3 ⻓按⽂字可以复制（只有该标签有这个功能）
4 可以对空格 回⻋ 进⾏编码
普 通
10.3 image
1 图⽚标签，image组件默认宽度320px、⾼度240px
2 ⽀持懒加载
mode 有效值：
mode 有13种模式，其中4种是缩放模式，9种是裁剪模式。
image{
box-sizing: border-box;
border: 1px solid red;
width: 300px;
height: 200px;
}
<image mode="bottom" lazy-load src="https://tva2.sinaimg.cn/large/007DFXDhgy1g51jlzfb4lj305k02s0sp.jpg" />
10.4 swiper
微信内置轮播图组件
默认宽度 100% ⾼度 150px
10.4.1 swiper
滑块视图容器。
10.4.2 swiper-item
滑块
默认宽度和⾼度都是100%
/* pages/demo10/demo10.wxss */
swiper {
width: 100%;
/* height: calc(100vw * 352 / 1125); */
height: 31.28vw;
}
image {
width: 100%;
}
<swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
<swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg" /> swiper-item>
<swiper-item> <image mode="widthFix" src="//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" /> swiper-item>
<swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i2/37/O1CN01syHZxs1C8zCFJj97b_!!37-0-lubanu.jpg" /> swiper-item>
swiper>
10.5 navigator
导航组件 类似超链接标签
open-type 有效值：
<navigator url="/pages/demo10/demo10"> 轮播图页面 navigator>
<navigator url="/pages/index/index"> 直接跳转到 tabbar页面 navigator>
<navigator open-type="redirect" url="/pages/demo10/demo10"> 轮播图页面 redirect navigator>
<navigator open-type="switchTab" url="/pages/index/index"> switchTab直接跳转到 tabbar页面 navigator>
<navigator open-type="reLaunch" url="/pages/index/index"> reLaunch 可以随便跳 navigator>
10.6 rich-text
富文本标签
可以将字符串解析成 对应标签，类似 vue中 v--html 功能
// 1 index.wxml 加载 节点数组
10.6.1 nodes属性
nodes 属性⽀持 字符串 和 标签节点数组
⽂本节点：type = text
nodes 不推荐使⽤ String 类型，性能会有所下降。
rich--text 组件内屏蔽所有节点的事件。
attrs 属性不⽀持 id ，⽀持 class 。
name 属性⼤⼩写不敏感。
如果使⽤了不受信任的 HTML 节点，该节点及其所有
⼦节点将会被移除。
img 标签仅⽀持⽹络图⽚。
// pages/demo12/demo12.js
Page({
data: {
// 1 标签字符串 最常用的
// html:''
// 2 对象数组
html:[
{
// 1 div标签 name属性来指定
name:"div",
// 2 标签上有哪些属性
attrs:{
// 标签上的属性 class style
class:"my_div",
style:"color:red;"
},
// 3 子节点 children 要接收的数据类型和 nodes第二种渲染方式的数据类型一致
children:[
{
name:"p",
attrs:{},
// 放文本
children:[
{
type:"text",
text:"hello"
}
]
}
]
}
]
}
})
<rich-text nodes="{{html}}">rich-text>
10.7 button
size 的合法值
type 的合法值
form-type 的合法值
open-type 的合法值
// pages/demo13/demo13.js
Page({
// 获取用户的手机号码信息
getPhoneNumber(e){
console.log(e);
},
// 获取用户个人信息
getUserInfo(e){
console.log(e);
}
})
<button>默认按钮button>
<button size="mini"> mini 默认按钮button>
<button type="primary"> primary 按钮button>
<button type="warn"> warn 按钮button>
<button type="warn" plain> plain 按钮button>
<button type="primary" loading> loading 按钮button>
<button open-type="contact">contactbutton>
<button open-type="share">sharebutton>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumberbutton>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfobutton>
<button open-type="launchApp">launchAppbutton>
<button open-type="openSetting">openSettingbutton>
<button open-type="feedback">feedbackbutton>
10.8 icon
代码:
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconType: [
'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
'download', 'search', 'clear'
],
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
],
}
})
wxml
10.9 radio
可以通过 color属性来修改颜色
需要搭配 radio-group ⼀起使⽤
// pages/demo15/demo15.js
Page({
data: {
gender: ""
},
handleChange(e){
// 1 获取单选框中的值
let gender=e.detail.value;
// 2 把值 赋值给 data中的数据
this.setData({
// gender:gender
gender
})
}
})
<radio-group bindchange="handleChange">
<radio color="red" value="male">男radio>
<radio color="red" value="female" >女radio>
radio-group>
<view>您选中的是:{{gender}}view>
10.10 checkbox
可以通过 color属性来修改颜色
需要搭配 checkbox-group ⼀起使⽤
// pages/demo16/demo16.js
Page({
data: {
list:[
{
id:0,
name:"",
value:"apple"
},
{
id:1,
name:"",
value:"grape"
},
{
id:2,
name:"",
value:"bananer"
}
],
checkedList:[]
},
// 复选框的选中事件
handleItemChange(e){
// 1 获取被选中的复选框的值
const checkedList=e.detail.value;
// 2 进行赋值
this.setData({
checkedList
})
}
})
<view>
<checkbox-group bindchange="handleItemChange">
<checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
{{item.name}}
checkbox>
checkbox-group>
<view>
选中的水果:{{checkedList}}
view>
view>
11 自定义组件
类似vue或者react中的自定义组件
⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。
11.1 创建自定义组件
类似于页面，一个自定义组件由 json wxml wxss js 4个
文件组成
可以在微信开发者⼯具中快速创建组件的⽂件结构
在⽂件夹内 components/myHeader ，创建组件 名为
myHeader
11.2 声明组件
⾸先需要在组件的 json ⽂件中进⾏⾃定义组件声明
myHeader.json
{
"component": true
}
11.3 编辑组件
同时，还要在组件的wxml⽂件中编写组件模板，在 wxss ⽂件
中加⼊组件样式
slot 表⽰插槽，类似vue中的slot
myHeader.wxml
{{innerText}}
在组件的 wxss ⽂件中编写样式
注意：在组件wxss中不应使用ID选择器、属性选择器和标
签名选择器。
myHeader.wxss
/* 这里的样式只应用于这个自定义组件 */
.inner {
color: red;
}
11.4 注册组件
在组件的 js ⽂件中，需要使⽤ Component() 来注册组件，并
提供组件的属性定义、内部数据和
⾃定义⽅法
myHeader.js
Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
innerText: {
// 期望要的数据是 string类型
type: String,
value: 'default value',
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod: function(){}
}
})
11.5 声明引入自定义组件
⾸先要在⻚⾯的 json ⽂件中进⾏引⽤声明。还要提供对应的组
件名和组件路径
index.wxml
{
// 引用声明
"usingComponents": {
// 要使用的组件的名称 // 组件的路径
"my-header":"/components/myHeader/myHeader"
}
11.6 页面中使用自定义组件
用来替代slot的
11.7 定义段与示例方法
Component 构造器可⽤于定义组件，调⽤ Component 构
造器时可以指定组件的属性、数据、⽅法等。
11.8 组件-自定义组件传参
1 ⽗组件通过属性的⽅式给⼦组件传递参数
2 ⼦组件通过事件的⽅式向⽗组件传递参数
11.8.1 过程
1 ⽗组件 把数据 {{tabs}} 传递到 ⼦组件的 tabItems 属性中
2 ⽗组件 监听 onMyTab 事件
3 ⼦组件 触发 bindmytap 中的 mytap 事件
⾃定义组件触发事件时，需要使⽤ triggerEvent ⽅法，指定 事
件名 、 detail 对象
4 ⽗ -> ⼦ 动态传值 this.selectComponent("#tabs");
⽗组件代码
// page.wxml
内容-这里可以放插槽
// page.js
data: {
tabs:[
{name:"体验问题"},
{name:"商品、商家投诉"}
]
},
onMyTab(e){
console.log(e.detail);
},
⼦组件代码
// com.wxml
{{item.name}}
// com.js
Component({
properties: {
tabItems:{
type:Array,
value:[]
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
handleItemActive(e){
this.triggerEvent('mytap','haha');
}
}
})
12 小程序生命周期
分为应⽤⽣命周期和⻚⾯⽣命周期
12.1 应用生命周期
12.2 页面生命周期
// pages/demo18/demo18.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log("onLoad");
// onLoad发送异步请求来初始化页面数据
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log("onShow");
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log("onReady");
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log("onHide");
},
/**
* 生命周期函数--监听页面卸载 也是可以通过点击超链接来演示
*
*/
onUnload: function () {
console.log("onUnload");
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
console.log("onPullDownRefresh");
// 页面的数据 或者效果 重新 刷新
},
/**
* 页面上拉触底事件的处理函数
* 需要让页面 出现上下滚动才行
*/
onReachBottom: function () {
console.log("onReachBottom");
// 上拉加载下一页数据
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
console.log("onShareAppMessage");
},
/**
* 页面滚动 就可以触发
*/
onPageScroll(){
console.log("onPageScroll");
},
/**
* 页面的尺寸发生改变的时候 触发
* 小程序 发生了 横屏竖屏 切换的时候触发
*/
onResize(){
console.log("onResize");
},
/**
* 1 必须要求当前页面 也是tabbar页面
* 2 点击的自己的tab item的时候才触发
*/
onTabItemTap(){
console.log("onTabItemTap");
}
})
{
"pageOrientation": "auto"
}
<text>pages/demo18/demo18.wxmltext>
<navigator url="/pages/demo17/demo17" open-type="navigate">
demo17
navigator>
<navigator url="/pages/demo17/demo17" open-type="redirect">
demo17 redirect
navigator>
<view>1view>
<view>2view>
<view>3view>
<view>4view>
<view>5view>
<view>6view>
<view>7view>
<view>8view>
<view>9view>
<view>10view>
<view>11view>
<view>12view>
<view>13view>
<view>14view>
<view>15view>
<view>16view>
<view>17view>
<view>18view>
<view>19view>
<view>20view>
<view>21view>
<view>22view>
<view>23view>
<view>24view>
<view>25view>
<view>26view>
<view>27view>
<view>28view>
<view>29view>
<view>30view>
<view>31view>
<view>32view>
<view>33view>
<view>34view>
<view>35view>
<view>36view>
<view>37view>
<view>38view>
<view>39view>
<view>40view>
<view>41view>
<view>42view>
<view>43view>
<view>44view>
<view>45view>
<view>46view>
<view>47view>
<view>48view>
<view>49view>
<view>50view>
<view>51view>
<view>52view>
<view>53view>
<view>54view>
<view>55view>
<view>56view>
<view>57view>
<view>58view>
<view>59view>
<view>60view>
<view>61view>
<view>62view>
<view>63view>
<view>64view>
<view>65view>
<view>66view>
<view>67view>
<view>68view>
<view>69view>
<view>70view>
<view>71view>
<view>72view>
<view>73view>
<view>74view>
<view>75view>
<view>76view>
<view>77view>
<view>78view>
<view>79view>
<view>80view>
<view>81view>
<view>82view>
<view>83view>
<view>84view>
<view>85view>
<view>86view>
<view>87view>
<view>88view>
<view>89view>
<view>90view>
<view>91view>
<view>92view>
<view>93view>
<view>94view>
<view>95view>
<view>96view>
<view>97view>
<view>98view>
<view>99view>
<view>100view>
13 项目开发
接⼝⽂档
https://www.showdoc.cc/128719739414963
帮助⽂档
1 小程序开发⽂档
https://developers.weixin.qq.com/miniprogram/dev/framework/
2 mdn
https://developer.mozilla.org/zh-CN/
3 阿⾥巴巴字体 iconfont
https://www.iconfont.cn/
13.1 项目搭建
13.1.1 新建小程序项目
填入自己的appid
13.1.2 搭建目录结构
13.1.3 搭建项目的页面
13.1.4 引⼊字体图标
1 打开阿⾥巴巴字体图标 ⽹站
2 选择的图标
3 添加⾄项⽬
4 下载到本地
5 将样式⽂件 由 css 修改为 wxss
6 ⼩程序中引⼊
13.1.5 搭建项目tabbar结构
参照之前讲解的⼩程序基础中的tabbar知识点
13.2 首页
13.2.1 效果
13.2.2 业务逻辑
1 使⽤tabbar 实现底部导航功能
2 使⽤⾃定义组件的⽅式 实现 头部搜索框
3 加载 轮播图 数据
4 加载 导航 数据
5 加载 楼层 数据
13.2.3 接口
1 获取⾸⻚轮播图数据
https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata
2 获取⾸⻚分类菜单数据
https://api-hmugo-web.itheima.net/api/public/v1/home/catitems
3 获取⾸⻚ 楼层数据
https://api-hmugo-web.itheima.net/api/public/v1/home/floordata
13.2.4 接口
1 获取⾸⻚轮播图数据
https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata
2 获取⾸⻚分类菜单数据
https://api-hmugo-web.itheima.net/api/public/v1/home/catitems
3 获取首页楼层数据
https://api-hmugo-web.itheima.net/api/public/v1/home/floordata
13.2.5 关键技术
小程序内置 request API
es6的 promise
小程序 swiper 组件
⾃定义组件 实现 搜索框
13.3 分类页面
13.3.1 效果
13.3.2 业务逻辑
1 加载分类⻚⾯数据
2 点击左侧菜单，右侧数据动态渲染
13.3.3 接口
1 分类⻚⾯数据
https://api-hmugo-web.itheima.net/api/public/v1/categories
13.3.4 关键技术
scroll--view 组件
es7的 async 和 await
13.3.5 小程序中⽀持es7的async语法
es7的 async 号称是解决回调的最终⽅案
1 在⼩程序的开发⼯具中，勾选 es6转es5语法
2 下载 facebook的regenerator库中的 regenerator/packages/regenerator-runtime/runtime.js
3 在⼩程序⽬录下新建⽂件夹 lib/runtime/runtime.js ，将代码拷⻉进去
4 在每⼀个需要使⽤async语法的⻚⾯js⽂件中，都引⼊（不能全局引⼊）
import regeneratorRuntime from '../../lib/runtime/runtime';
13.4 商品列表页面
13.4.1 效果
13.4.2 业务逻辑
1 加载商品列表数据
2 启⽤下拉⻚⾯功能
1 ⻚⾯的json⽂件中开启设置 enablePullDownRefresh:true
2 ⻚⾯的js中，绑定事件 onPullDownRefresh
3 启⽤上拉⻚⾯功能 onReachBottom ⻚⾯触底事件
4 加载下⼀⻚功能
13.4.3 接口
1 商品列表搜索
https://api-hmugo-web.itheima.net/api/public/v1/goods/search
13.4.4 关键技术
⼩程序配置⽂件中 启⽤上拉 和下拉功能
搜索框和tab栏是⼩程序的⾃定义组件(有组件事件和参数交互)
13.5 商品详情页面
13.5.1 效果
13.5.2 业务逻辑
1 渲染商品详情数据
2 点击图⽚，调出图⽚画廊，进⾏预览
3 点击收藏
4 联系客服
5 分享功能
6 加⼊购物⻋
13.5.3 接口
1 获取详情数据接口
https://api-hmugo-web.itheima.net/api/public/v1/goods/detail
2 加⼊购物⻋接⼝ 使⽤本地存储来维护购物⻋数据
3 ⽴即购买接⼝ (相当于是 创建订单接⼝)
https://api-hmugo-web.itheima.net/api/public/v1/my/orders/create
13.5.4 关键技术
swiper组件
本地存储实现 收藏功能
联系客服 ⼩程序管理后台中 直接添加即可
富⽂本标签 渲染 富⽂本
⼩程序 预览图⽚接⼝
13.6 收藏页
13.6.1 效果
13.6.2 业务逻辑
1 获取本地存储中的数据进⾏渲染
2 点击商品可以跳转到商品详情⻚⾯
13.6.3 关键技术
⼩程序 ⾃定义组件
本地存储 加载收藏数据
13.7 购物车页面
13.7.1 效果
13.7.2 业务逻辑
1 渲染购物⻋数据
2 添加收货地址
3 修改商品数量
4 单选和全选功能
13.7.3 接口
1 获取购物⻋数据 本地存储实现
2 调⽤微信的收货地址
13.7.4 关键技术
小程序 选择收货地址 api
小程序 复选框 组件
13.8 支付页面
13.8.1 效果
13.8.2 业务逻辑
1 获取微信收货地址
2 渲染购物⻋中要结算的商品
3 实现⽀付
1 获取微信的登录信息
2 获取⾃⼰后台返回的⽀付相关参数
3 调⽤微信接⼝实现 ⽀付
4 ⽀付成功创建订单
5 跳转到订单⻚⾯
13.8.3 支付流程
13.8.4 接口
1 获取预⽀付参数
https://api-hmugo-web.itheima.net/api/public/v1/my/orders/req_unifiedorder
2 创建订单
https://api-hmugo-web.itheima.net/api/public/v1/my/orders/create
3 更新订单状态
https://api-hmugo-web.itheima.net/api/public/v1/my/orders/chkOrder
13.8.5 关键技术
⼩程序 ⽀付 api
13.9 授权页面
13.9.1 效果
13.9.2 业务逻辑
1 获取⽤⼾信息
返回 encryptedData,rawData,iv,signature
2 小程序登录
返回 code
3 提交数据到⾃⼰ 的后台 执⾏post请求 提交数据
encryptedData,rawData,iv,signature code
4 将 token 和⽤⼾数据 rawData 存⼊本地存储
13.9.3 接口
1 提交数据到后台 返回token
https://api-hmugo-web.itheima.net/api/public/v1/users/wxlogin
13.10 订单列表页面
13.10.1 效果
13.10.2 业务逻辑
1 根据不同的的状态去加载不同的订单数据
2 点击标题紧挨着对应数据
13.10.3 接口
1 查询订单数据
https://api-hmugo-web.itheima.net/api/public/v1/my/orders/all
13.10.4 关键技术
⼩程序 ⾃定义组件的 传参 ⽗向⼦动态传参 this.selectComponent("#tabs");
时间戳 格式化处理
13.11 搜索页面
13.11.1 效果
13.11.2 接口
1 搜索建议查询
https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch
13.11.3 业务逻辑
1 获取输⼊框的值进⾏搜索和渲染
2 点击 取消 按钮时 清除输⼊状态，修改⻚⾯模样
13.11.4 关键技术
1 小程序 输⼊框组件
2 输⼊值改变时，为了提⾼性能，使⽤ 防抖 技术
13.12 个人中心页面
13.12.1 效果
13.12.2 业务逻辑
1 获取登录信息
2 加载收藏信息
3 查询订单状态
13.12.3 接口
1 获取⽤⼾信息
2 获取收藏数据 从本地存储中获取
3 获取订单数据
https://api-hmugo-web.itheima.net/api/public/v1/my/orders/all
13.12.4 关键技术
1 css属性filter的使⽤
13.13 意见反馈页面
13.13.1 效果
13.13.2 业务逻辑
1 点击 + 可以选择本地图⽚，并且显⽰到⻚⾯上
2 点击 提交 可以上传图⽚到 接⼝ 地址 新浪图床 上
https://images.ac.cn/Home/Index/UploadAction/
3 点击图⽚，会移除⾃⼰
4 点击 tab栏的标题，可以切换选中效果
13.13.3 关键技术
1 ⾃定义组件 tab
2 ⾃定义组件 图⽚删除组件
3 小程序 上传⽂件 api
想要获取该该课程markdown笔记（脑图+笔记）。可以扫描以下
微信公众号二维码。或者搜索微信公众号-Java大世界。回复
微信小程序即可获取笔记获取方式。