微信小程序基础知识_前端微信小程序所有知识点

一. 页面样式和结构

1.1 小程序组件(html)

(1) 区域布局组件

• view 定义块级区域，相当于网页中的 div 标签
• text 定义行内区域，相当于网页中的 span标签

(2) 链接跳转组件

navigator 组件相当于网页中的 a 标签，用来实现页面之间的跳转。

• url 属性支持相对和绝对路径，路径为空时会报错

• hover-class 属性定义点击态的样式，none 值表示禁用点击效果

• open-type 属性定义跳转方式，tabBar 类型的页面时值为 switchTab，默认值为 navigate

  注意: 如果跳转的页面是在app.json的tabBar中注册过的, 必须要添加open-type="switchTab"才可以, 否则跳转不起作用

(3) 图片组件

image 组件用来在页面中显示图片相当于网页中的 img （注意单词不同）

• image 默认具有宽高尺寸**（320 * 240px）** 占位容器
• 当占位容器与图片实际尺寸宽高比不一致时，图片无法正常显示
• mode 属性控制图片的显示方式
  • scaleToFill 图片提伸铺满占位容器
  • aspectFit 图片同比例缩放显示，长边完整显示出来（占位容器可能会留白）
  • aspectFill 图片同比例缩放显示，短边完整显示出来（图片可能被裁切）
  • widthFix 宽度固定, 高度自适应
  • heightFix 高度固定, 宽度自适应

(4) 滑动组件(轮播图)

swiper 组件在页面中创建可以滑动的区块，常常用来实现轮播图的交互效果。

• 组件的结构
  • swiper 滑块容器，内部只能嵌套 swiper-item，默认高度为 150px
  • swiper-item 滑块单元，内部嵌套任意内容，如 image 组件

<swiper>
  <swiper-item>1</swiper-item>
  <swiper-item>2</swiper-item>
  <swiper-item>3</swiper-item>
</swiper>
1
2
3
4
5

• 组件属性

  • indicator-dots 是否显示小圆点

    小圆点的颜色可以改变

    indicator-color 未选中时的颜色设置

    indicator-active-color 选中时的颜色设置

  • autoplay 是否自动播放

  • interval 自动切换的时间间隔(单位: ms)

  • circular 是否衔接滑动

(5) 表单组件

1. button组件

• size 指定按钮的大小
  • default 默认大小
  • mini 小尺寸
• type 颜色样式
  • primary 绿色
  • default 白色
  • warn 红色
• plain 按钮是否镂空，背景色透明
• 用户头像
  • button 组件的 open-type 属性设置为 chooseAvatar
  • 监听 button 组件的 chooseavatar 事件（没有大写字母）
  • 事件回调中通过事件对象 ev.detail.avatarUrl

2. input输入框组件与网页中 input 标签的作用一致

• type属性指定表单的类型
  • text 文本输入键盘
  • number 数字输入键盘
  • idcard 身份证输入键盘
  • digit 带小数点的数字输入键盘
  • nickname 昵称输入键盘
• value 输入框的初始内容
• placeholder 属性指定输入框为空时的占位文字
• password 是否是密码类型
• focus 是否获取焦点

3. radio-group 和 radio 单选框组件, 相当于网页中的 <input type="radio" />

• value 定义该表单的数据内容 , checkbox 选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value
• checked 定义选中的状态, 可用来设置默认选中
• disabled 是否禁用
• color checkbox 的 颜色

4. checkbox-group 和 check 复选框组件, 相当于网页中的 <input type="checkbox" />

• value 定义该表单的数据内容 , checkbox 选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value
• checked 定义选中的状态, 可用来设置默认选中
• disabled 是否禁用
• color checkbox 的 颜色

5. picker 选择框组件 相当于网页中的 select 标签

• mode 属性定义选择框的类型
  • selector 普通选择器
  • multiSelector 所列选择器
  • time 时间选择器
  • date 日期选择器
  • region 省市区选择器

6. switch 开关选择器

• checked 选中状态
• type 样式 有效值：switch(默认) checkbox

(6) 区域滚动组件

scroll-view 在页面中指定一个可以滚动的区域，并且这个可滚动的区域能够实现一些高级的交互，比如下拉刷新等。

scroll-view 中嵌套任意需要滚动的内容，要求必须有溢出，垂直滚动时 scroll-view 必须要指定高度。

• scroll-x 属性是否允许水平方面滚动
• scroll-y 属性是否允许垂直方向滚动
• refresher-enable 属性是否开启下拉刷新的交互
• refresher-triggered 设置下拉刷新状态，true 下拉刷新已经被触发，false 表示下拉刷新未被触发

(7) rich-text

微信小程序中不支持网页的标签结构, 只有用rich-text 转化, 才能是使网页标签起作用

• nodes HTML 字符串或数组
• user-select 文本是否可选，该属性会使节点显示为 block

1.2 小程序样式(css)

小程序中的样式和网页中的样式基本一致 , 其中, 写在页面的 wxss 中的样式是局部样式 , 只对当前的页面起作用 , 写在app.wxss中的样式为全局样式 , 对所有的页面都起作用

局部样式的优先级 > 全局样式的优先级

注：page 在每个页面中都有，它是由小程序自动添加上的，相当于网页中的 body 标签。

(1) 样式导入

通过导入样式, 可以复用其他页面中的样式

语法: @import '样式文件地址'

(2) 资源使用

小程序中 .wxss 文件中不支持使用本地路径的资源，比如背景图片是不允许使用本地国片路径的，必须使用网络路径（https:// 或 http:// 开头）或者转换成 base64 编码。

(3) 字体图标

小程序中字体图片的使用与网页中基本上是一致的，唯一的区别是小程序的 .wxss 文件中不支持使用本地字体文件，我们使用 iconfont 平台提供的服务生成字体文件后，直接使用其线上的字体文件地址。

@font-face {
  font-family: "iconfont"; /* Project id 3632516 */
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATYAAsAAAAACVwAAASMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDIgqFfIUjATYCJAMUCwwABCAFhGcHRxs0CFGU7k2N7Mdg204e4YSRdMLR9eNemN8PCiyrdGcE0VpZPQtPxIpIv8IQqHchGxsFLsrGxhhAx0bc/7WZn5C0kYUVY0mFNZOTCiVD4qRkau43dTv25XLOxDa2INyuQk54Qj83jTax/7Y8D8SS8H/u9+pPS9C6v8Itu+yBfdEPtOgA2YB35nOfim6k2DXM5CkCtZYVUBxV1DUCfc1jB7CUtOUgbI9rs5EHteyQl7SHaqGse2QO8QZUpFeKq8Br9+fjv5RQg6TIQDvP6eNyA5x8P+b9Q3K8m4PsG3tJwNYJBTLMz8wV98sDN5F+YR6pNk9SaRko5frUa8ztxsXcVzBTOWd/LsM/L0rQDPXA7+nz3VKafIJf9xV5xgewyWB8iKKE82mlFnUXxXkCGmHcHZJMLg35UwFUjBflFd1vxEL6xJ9OSP90CjR+KLzpuzGbFThHUktQW+ZlIdsrWv7QI/S8whctg46TLcOWVYTXrKYrK1xsOrytY0NuNKqWpbXYGi9ajMIGr0se0MwjabII6NAkMH6x5AUWJYTNdDSzTAk4/vv/2azv84s17vqzNoNPi6QR56SANi9l7TMve37qijdO4vQth3ab81kSDQaB8UvYqAktbBAFb6/n6YnltktVYnQe8t51ouQN5okt2t28tNJCpcl06pIWPh9i8XZo9iNTz2bOXC/FsWPr4keXGVJbkhoak5tTLjWnOuzJjSktl1KarY1J0TMbSj/siz52bPqA4Wbtm5eNlTHlUVHl0ZXbDSlJA29l9HaSp1AxuJjvFgPu5wzQM/qh9n5U1PSp7DSousf+up18OnRA8gDCL7Fpwo64weSRwr4xu5mm2otUCDWO9tF70+OoYHB8JIjpXxExR31Y/bT6iFpn6p6Gd51DTPsKfOAc4baukuywEr2PvjgsOrRa8/l/6RdCKw6/BcQLZ3A/ImRBUHnQgnJhnbjz6p1qSb1Lvc7USeH7wMZbCx2iD6EphvXewFQwG7xZJoL7J3EMHcKG0EyAW40AumKtmPC2nhmaYP2MOUuc9/ChN0aXxUTWxJ32CGaDqdM72UY+LxeGA1TOk4fJUJH6glxPcvT35AqSDa0ig76uv7H57l9qj2feP3WdEuDnrSsk4pXzSmjvUn2hA8G3ZOysiZgzGRnzvFnTJzCn80iNhFo9TQW0SKvn/ZjaaucI1TGlBEmVPshUG0Xn+Fko1FmFUrVtqDWn/Pg6bZxIkWuASZM4CM12QNLoPWSaXUDn+AdQ6PQBSs3+Q62zoM5WZzKEUhnxGBm4QSM4syA5RMOM3VXrkXGIjZezss1IdpmR5pITkpLlSuRAchf7uIYaUzAWOVGW7FyFeD1ks0mcU5YsSMAJJoydOYmJYt6nJAiSHUrJEB6GGHAGGYFjJpA4iDYyjv++eojREDY8uSa62Sdz8XJanZMsQVINdKXBUWvuTNZ3GcooBYaJ/HYimcSOU8F8iE0vSDjO/M0sEAGWwNQi55QjkZDEuoaE8U32C6z8kRdqZy9CQZCEklARfaB8gnhZMCmRwYxV7kZIsKpcJl5GAA==') format('woff2'),
       url('//at.alicdn.com/t/c/font_3632516_qjs869axt0h.woff?t=1672223363723') format('woff'),
       url('//at.alicdn.com/t/c/font_3632516_qjs869axt0h.ttf?t=1672223363723') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-search:before {
  content: "\e67d";
}
.icon-edit:before {
  content: "\e6d8";
}
.icon-check:before {
  content: "\e6d7";
}
.icon-share:before {
  content: "\e6d6";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

二. 页面布局

一个完整的小程序页面需要包括 4 个类型的文件：

• .wxml 定义页面的结构，类似于 .html
• .wxss 定义页面的样式，类似于 .css
• .js 定义页面的逻辑，监听事件、发起请求等
• .json 定义页面的配置，如页面标题等

2.1 js页面的布局

每个js页面都必须要调用 Page 函数来注册页面 , 且要传入对象类型的参数：

• data 初始化页面中的数据
  • 访问的方式: this.data.数据名
• setData 更新数据
  • 修改data中的数据: this.setData({ data中的数据名: 值})

Page({
  data: { /*页面的初始数据*/},
 
  //事件函数, 和data平级
  函数名(){},
  
  //生命周期函数
  onLoad(options) { //页面一加载就调用},
  onShow() { // 页面显示就加载 },
  onHide() { // 页面隐藏就加载},
  onUnload() { //页面卸载},

})
1
2
3
4
5
6
7
8
9
10
11
12
13

2.2 长度单位

小程序将设备页面分为750份,每一份就是1rpx

主要作用: 解决移动适配

iphone 宽度 375px----->750rpx 1px ==== 2rpx

1倍图 ---- 量100px — 200rpx

设计图–2倍图 量的100px— 100px/2*2 rpx

结论: 在二倍图上, 量多少px , 取多少rpx 两者比例为 1:1

注：上述的规则仅适用于设计稿宽度为 750px

三. 页面配置

小程序的配置可以配置页面路径、窗口表现、tabBar等，分为全局配置和页面配置，全局配置针对所有页面生效，页面配置只针对当前页生效。

3.1 全局配置 (app.json)

(1) 路径配置

pages 配置页面路径，未配置路径的页面无法被访问到

技巧 : 创建一个页面文件时, 在pages中添加一个配置项, 小程序开发工具自动把文件创建出来,不需要手动创建

//app.json 中
{
   "pages": [
    "pages/index/index",
    "pages/home/home",
    "pages/info/info",
  ],
}
1
2
3
4
5
6
7
8

(2) 起始页配置

entryPath 配置小程序默认的启动页面（首页） 如果不填，将默认为 pages 列表的第一项

 {
   "entryPagePath": "pages/home/home",
 }
1
2
3

(3) window窗口配置

window 用于设置小程序的状态栏、导航条、标题、窗口背景色。

 "window": {
    "enablePullDownRefresh": true,
     
    //窗口配置
    "backgroundColor": "#eee",
    "backgroundTextStyle": "dark",
     
    //导航栏的配置  
    "navigationBarBackgroundColor": "#FFA500", 
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "我的小程序",
    "navigationStyle": "default"
  },
1
2
3
4
5
6
7
8
9
10
11
12
13

窗口的配置

• backgroundColor 窗口的背景色

导航栏的配置

• navigationBarBackgroundColor 导航栏背景颜色 (颜色是十六进制)

• navigationBarTextStyle 导航栏标题颜色，仅支持 black / white

• navigationBarTitleText 导航栏标题文字内容

• navigationStyle 导航栏样式，仅支持以下值: default 默认样式 custom 自定义导航栏

下拉刷新的配置

• backgroundTextStyle 下拉 loading 的样式，仅支持 dark / light
• enablePullDownRefresh 是否开启全局的下拉刷新。

(4) tabBar 配置

tabBar 底部 Tab 栏（tabBar 中的页面必须配置在 pages 中）

 "tabBar": {
    "color": "#999",
    "selectedColor": "#5792AF",
    "backgroundColor": "#e0e0e0",
    "borderStyle": "white",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "我的",
        "iconPath": "/assets/icon/home.png",
        "selectedIconPath": "/assets/icon/home-active.png"
      },
    ]
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• color 文字颜色，仅支持十六进制颜色
• selectedColor 文字选中时的颜色，仅支持十六进制颜色
• backgroundColor tab 的背景色，仅支持十六进制颜色
• borderStyle tabbar上边框的颜色 , 仅支持 black / white
• list tabBar 页面跳转的路径和图标配置
• pagePath 跳转的页面路径
• text tabBar 上按钮文字
• iconPath 图片路径 icon 大小限制为 40kb，不支持网络图片。 当 position 为 top 时，不显示 icon。
• selectedIconPath 选中时的图片路径
• position tabBar 的位置，仅支持 bottom / top

3.2 页面配置

页面配置大部分与全局配置中的 window 是重叠的，页面配置的优先级大于全局配置的。

• disableScroll 只能用在在页面配置中，禁用页面滚动
• usingComponents 后续学到自定义组件时再介绍

四. 模板语法

在页面中渲染数据时所用到的一系列语法叫做模板语法，对应到 Vue 中就是指令的概念。

4.1 数据绑定

• 插值 {{}}

  小程序中无论是属性的绑定还是内容的绑定都必须要使用 {{}}。

  --1. 属性绑定
  <switch checked="{{false}}" />
  --2. 类名绑定
  <view class="{{isActive ? 'active' : ''}}" >首页</view>
  --3. 内容绑定
  <text>{{ msg }}</text>
  1
  2
  3
  4
  5
  6

• 简易数据绑定

  model:value="{{数据名}}" 语法实现了双向的数据绑定，但是目前只能用在 input 和 textarea 组件中。

4.2 条件渲染

• 控制属性：相当于 Vue 中指令的概念，在小程序中做控制属性

  • wx:if 根据表达式的值渲染内容，值为真时显示
  • wx:elif 条件语句
  • wx:else 用在 wx:if 的后面，不可单独使用，wx:if 表达式值为假时显示

  <!-- 条件渲染  wx:if -->
  <view wx:if="{{result===1}}">剪刀</view>
  <view wx:elif="{{result===2}}">石头</view>
  <view wx:else>布</view>
  1
  2
  3
  4

• 组件属性：相当于vue 中的 v-show

  • hidden 根据表达式的值渲染内容，值为真时隐藏
  • 通过 [hidden] { display: none; } 来实现内容的隐藏

  <!-- 隐藏 hidden -->
  <view hidden="{{result===2}}">测试hidden</view>
  <!-- 如果条件频繁切换,用hidden  不频繁 wx:if wx:elif wx:else -->
  1
  2
  3

4.3 循环渲染

• wx:for 根据数组重复渲染组件内容
  • index 默认值，访问数组的索引值
  • item 默认值，访问数组的单元值
• wx:key 列表项的唯一标识符（不使用 {{}}）
  • 数组单元是对象时，只需要写属性名
  • 数组单元是简单类型时，推荐使用 *this
• wx:for-index 自定义访问数组索引的变量名
• wx:for-item 自定义访问数组单元的变量名

<!-- 列表渲染 循环 对象-->
<!-- wx:for="{{数据}}"  默认的 item 项 index 索引 -->
<!-- 如果item index 和其他名称冲突, 
     可以用 wx:for-item 和 wx:for-index 
     对默认的item index的名称进行修改 -->
<!-- wx:key 直接就填 字段名就可以了 -->
<view wx:for="{{students}}" wx:key="id">
 索引:{{index}}  姓名: {{item.name}}---年龄:{{item.age}}
</view>
<!-- 数组 -->
<!-- 简单数据, wx:key 想要用自身的数据来显示 用 *this -->
<view wx:for="{{history}}" wx:key="*this">
 {{item}}
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

五. 事件处理

5.1 事件绑定

bind:事件类型=事件回调 / bind事件类型=事件回调

<!-- 按钮的点击事件的监听 
 bind(绑定,监听) tap(事件类型)  tap 轻击
 bing:tap / bingtap 
-->
<button type="primary" bindtap="onBtn" data-info="⭐"
 >click me</button>
1
2
3
4
5
6

小程序中使用 bind 进行事件的绑定 , 且在绑定的事件函数中, 是不可以传参的 , 所有只能使用其他的方式传参

事件传参

<!-- 小程序中的事件传参
 传参: data-*(自定义参数名)
       mark: * 
-->
<button bindtap="onBtn"  data-id="{{index}}" mark:f2="f2">事件传参</button>
1
2
3
4
5

1. data- 自定义参数名=“值”
2. mark : 自定义参数名=“值”

参数接收

小程序里面的参数是用事件对象完成接收的

data - * 传递的参数 是在 e.target.dataset中

mark: * 传递的参数 是在 e.mark 中

page({
  onBtn(e){
    // 参数接收 e.target.dataset.info
    console.log(e);
  },
})
1
2
3
4
5
6

5.2 常用的通用事件

• bindtap 点击事件
• bindlongpress 长按事件
• bindinput 键盘输入事件
• bindconfirm 回车事件
• bindfocus 输入框聚焦事件
• bindblur 输入框失焦事件
• bindchange value 改变事件
• bindsubmit 表单提交事件
• bindreset 重置表单事件

5.3 组件事件

前面介绍的 tap 事件可以在绝大部分组件是监听，我们可以将其理解为通用事件类型，然而也有事件类型只属于某个组件，我们将其称为组件事件。

scroll-view 组件中的事件：

• bind:scrolltolower 当滚动内容到达底部或最右侧时触发
• bind:refresherrefresh 执行下拉操作时触发
• refresher-enable 启用自定义下拉刷新

表单组件中的事件：

• change 表单数据发生改变时触发（input 不支持）
• submit 表单提交时触发，button 按钮必须指定 form-type 属性

六. 生命周期

生命周期是一些名称固定自动执行的函数。

6.1 页面生命周期

• onLoad 在页面加载时触发，一个页面只会执行 1 次，常用于获取地址参数和网络请求
  • 参数 options 接收的是传递到当前页面路径中的参数
• onShow 页面显示/切入前台时触发，常用于动态更新数据或状态
• onReady 在页面初次渲染完成时执行，只会执行 1 次，常用于节点操作或动画交互等场景
• onHide 在页面隐藏/切入后台时触发，常用于销毁长时间运行的任务，如定时器
• onUnload 页面卸载时触发

6.2 组件生命周期

小程序自定义组件的生命周期需要定义在 lifetimes 中：

Component({
  //组件生命周期
  lifetimes: {}
})
1
2
3
4

• created 在组件初步创建时执行，注意此时不能调用 setData
• attached 在组件完成页面初始化的时候执行
• ready 在组件布局完成后执行
• detached 在组件被销毁的时候触发

6.3 小程序生命周期

小程序的生命周期定义在app.js里面

App({
  /*当小程序初始化完成时，会触发 onLaunch（全局只触发一次）*/
  onLaunch: function () {
    console.log('小程序启动了')
  },
  /* 当小程序启动，或从后台进入前台显示，会触发 onShow*/
  onShow: function (options) {
    console.log('小程序显示了',options)
  },
  /*当小程序从前台进入后台，会触发 onHide */
  onHide: function () {
    console.log('小程序隐藏了')
  },
  /* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息*/
  onError: function (msg) {}
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• onLaunch 小程序启动时执行1次，常用于获取场景值或者启动时的一些参数（如自定义分享）
• onShow 小程序前台运行时执行，常用于更新数据或状态
• onHide 小程序后台运行时执地，常用于销毁长时间运行的任务，如定时器
• onError 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息

七. 自定义组件

创建自定义组件

(1) 在根目录下创建一个文件

(2) 在创建的文件内创建一个存放页面文件的文件

(3) 右键----新建 Component(输入页面名, 回车) 自动创建组件页面文件

创建好的自定义组件从结构上看与页面是完全一致的，由 .wxml、.wxss、.js、.json 构成

7.1 组件页面配置

组件的 .json 文件中必须有 component: true

{
  "component": true, 
}
1
2
3

组件需要在页面(使用组件的页面)或全局中注册后才可以使用，注册组件会用到配置项 usingComponents

{
  "usingComponents": {
    "my-comp":"/components/my-comp/index"
  }
}
1
2
3
4
5

7.2 组件页面布局

组件的 .js 文件中调用的是 Component 函数

• properties 接收父组件传值
• data 数据
• methods 方法
• lifetimes 生命周期函数

// components/my-comp/index.js
Component({
  //接收从组件外传的值
  properties: {
    userAge:Number,
    userName:{
      type:String, //类型
      value:'zz' //默认值
    }
  },
  /* 组件的初始数据*/
  data: { },
  /* 组件的方法列表*/
  组件内的函数和事件方法都是定义在和data同级的methods里面
  methods: { }
    
  //组件的生命周期
  lifetimes:{
    created() {console.log('组件初步创建')},
    attached() {console.log('组件完成初始化')},
    detached() {console.log('组件销毁')}
  },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

7.3 组件样式

在开发中经常会需要修改自定义组件内部的样式，有两种方式可以实现这个目的。

• 样式隔离：默认情况下页面的样式无法影响自定义组件的样式
  • 组件内的options 属性内 addGlobalClass: true 允许在页面中修改自定义组件的样式，但要求必须使用组件本身的类名
  • 在组件中定义样式时使用的选择器不能是标签选择器、ID选择器或属性选择器

/* 如何让外界能影响组件内部的样式呢? */
/* 方式一: 为组件的options新增一个 addGlobalClass: true 
   缺点: 该方式需要提前直到组件内有什么类名, 有点麻烦
*/
Component({ 
  // 解决组件样式起作用的 
  options:{
    addGlobalClass:true,
  },
})
1
2
3
4
5
6
7
8
9
10

• 外部样式类：

  • externalClasses: ['xxx-class', 'yyy-class'] 开发自定义的样式类
  • xxx-class 和 yyy-class 可以接收外部传入的类名，并应用到组件的布局结构中

  /* 方式二: 外部样式 externalClasses */
  Component({
    // 开发自定义的样式类
    externalClasses: ['custom-class']
  })
  1
  2
  3
  4
  5

  组件页面

  <view class="custom-class">我是组件!</view>
  1

  父组件页面

  <my-comp  custom-class="my-bg"></my-comp>
  
  //样式
  .my-bg {
    background-color: #eee;
  }
  1
  2
  3
  4
  5
  6

7.4 slot（插槽）

小程序中默认只能使用一个 slot 需要具名插槽时需要传入 options: { multipleSlots: true }。

Component({
  options:{
    // 具名插槽 需要声明的属性
    multipleSlots:true
  },
})
1
2
3
4
5
6

父页面

<my-comp>
<!-- 插槽 -->
 <!-- 1. 默认插槽  接收 slot -->
  <view>默认内容1111</view>
  <view>默认内容22222</view>
  <!--2. 具名插槽  -->
  <text slot="before">前</text>
  <text slot="after">后</text>
</my-comp>
1
2
3
4
5
6
7
8
9

子组件页面

<!-- 1. 默认插槽 接收 slot -->
<slot></slot>
<!-- 2. 具名插槽  -->
<slot name="before"></slot>
<slot name="after"></slot>
1
2
3
4
5

创建插槽：在组件的任意位置使用 <slot /> 进行占位

• 默认只能使用 1 个 <slot>
• options: { multipleSlots: true } 启用多插槽
• name 为不同的 <slot /> 命名来区分不同的插槽

7.5 组件通信

组件通信是指将页面或组件的数据传入子组件内部或者将子组件的数据传入父组件或页面当中。

父向子传值

数据绑定实现父向子传值 自定义事件名="值/{{值}}"

<my-comp user-age="{{age}}" user-name="名字"></my-comp>
1

子接收 properties 里面接收

Component({
  //接收从组件外传的值
  properties: {
   //简单
    userAge:Number,
   //复杂
    userName:{
      type:String, //类型
      value:'zz' //默认值
    }
  },
})
1
2
3
4
5
6
7
8
9
10
11
12

子向父传值

子传值 this.triggerEvent('自定义事件名',值)

<!-- 子向父传值 -->
<button type="warn" bindtap="onAge"></button>
1
2

 //让父组件内的age加1
onAge(){
 // 子向父传值 this.triggerEvent('自定义事件名',传值)
 this.triggerEvent('changeAge',1)
}
1
2
3
4
5

父接收 bind: 自定义事件名="函数"

<my-comp bind:changeAge="onChangeAge" />
1

//事件对象接收 e.detail
onChangeAge(e) {
   console.log(e.detail);
},
1
2
3
4

八. 内置API

内置 API 实际上就是小程序提供的一系列的方法，这些方法都封装在了全局对象 wx 下，调用这些方法实现小程序提供的各种功能，如网络请求、本地存储、拍照、录音等。

8.1 网络请求

调用 wx.request 能够在小程序中发起网络请求与后端接口进行数据的交互，其语法格式如下：

wx.request({
  url: '这里是接口的地址',
  method: '这里是请求的方法',
  data: '请求时提交的数据',
  header: {/* 请求头信息 */},
  success: () => {/* 成功的回调 */},
  fail: () => {/* 失败的回调 */},
  complete: () => {/* 成功或失败的回调 */}
})
1
2
3
4
5
6
7
8
9

Page({
  data: {
    books: []
  },
  async onGetBooks(){
    //加载效果
    wx.showLoading({
      title: '数据加载中...',
      // 防止穿透的图层
      mask:true,
    })
    const res = await this.getBooks()
    //  console.log(res);
    this.setData({
      books:res.data.data
    })
  },
  //封装请求图书方法
  getBooks(){
    return new Promise((resolve,reject)=>{
      //异步操作, 成功了就调用resolve ,失败调用 reject
        // 获取成功的提示
        wx.showToast({
          title: '获取数据成功',
          icon:'success'
        })
       //  发起请求
      // 小程序由于没有浏览器环境,所以请求不存在跨域问题
      // 但是为了安全,小程序规定,发起的请求的域名必须配置到(合法域名列表中)
      // 也可以通过勾选,不校验合法域名临时解决(但后面小程序上线发起请求必须要配置合法域名)
      wx.request({
        url: 'https://hmajax.itheima.net/api/books',
        method:'GET',
        data:{
          creator:'zz',
        },
        //this 指向, 所以用箭头函数
        // success:(res)=>{
        //   //成功调用 resolve
        //   resolve(res)
        // },
        success:resolve,
        // fail:(err){
        //   //失败调用 reject
        //   reject(err)
        // },
        fail:reject,
        complete:()=>{
          wx.hideLoading()
        }
      })
    })
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

8.2 界面交互

• wx.showLoading 显示 loading 提示框

  • title 文字提示内容

  • mask 是否显示透明蒙层，防止触摸穿透

• wx.hideLoading 隐藏 loading 提示框

• wx.showToast 消息提示框（轻提示）

  • mask 是否显示透明蒙层，防止触摸穿透
  • duration 延迟时间（提示框显示多久）
  • icon 指定图标，none 不使用图标

8.3 本地存储

• wx.setStorageSync('自定义属性名',数据) 存入一个数据，复杂类型数据不需要 JSON.stringify 处理
• wx.getStorageSync('自定义属性名') 读取一个数据，复杂类型数据不需要 JSON.parse 处理
• wx.removeStorageSync('自定义属性名') 删除一个数据
• wx.clearStorageSync() 清空全部数据

8.4 API 特征

小程序中提供的 API 数量相当的庞大，很难也没有必要将所有的 API 全部掌握，但是这些 API 具有一些共有的特征：

• 异步 API：绝大部分的 API 都是异步方式，通过回调函数获取 API 执行的结果
  • success API 调用成功时执行的回调
  • fail API 调用失败时执行的回调
  • complete API 调用结束时执行的回调（无论成功或失败）
• 同步 API：部分 API 支持以同步方式获取结果，这些 API 的名称都以 Sync 结尾，如 wx.getStorageSync 等
• Promise：部分异步的 API 也支持以 Promise 方式返回结果，此时可以配合 asyc/await 来使用

8.5 相册/拍照

wx.chooseMedia 调起摄像头拍照或读取相册内容，该 API 既支持回调方式获取结果，也支持 Promise 方式返回结果：

Page({
  async chooseImage() {
    // 读取结果
    const result = await wx.chooseMedia({
      count: 1, // 只选取一张图片
      sourceType:['album'],  //从相册选择
      mediaType: ['image'] // 只选取图片
    })
    // console.log(result.tempFiles[0].tempFilePath);
    console.log(result)
  }
 
   //上传图片 (变成网络图片)
   wx.uploadFile({
      filePath:res.tempFiles[0].tempFilePath,
      name: 'image',
      url: 'http://geek.itheima.net/v1_0/upload',
      success:(res)=>{
        // console.log('upload',res.data);//是一个JSON字符串
        // console.log('upload',JSON.parse(res.data));
        const imageUrl= JSON.parse(res.data).data.url
        console.log(imageUrl); //上传的网络图片
      },
      fail:(err)=>{
        console.log('err',err);
      }
    })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

九. 分包加载

分包加载是优化小程序加载速度的一种手段。

9.1 为什么？

• 微信平台对小程序单个包的代码体积限制为 2M，超过 2M 的情况下可以采用分包来解决
• 即使小程序代码体积没有超过 2M 时也可以拆分成多个包来实现按需加载
• 配置文件能忽略的只有静态资源，代码无法被忽略

9.2 使用分包

在全局配置中使用 subPackages 来配置分包的根目录和分包中的页面路径：

{
  "subPackages": [
    {
      "root": "subpkg_test",
      "pages": [
        "pages/test/index"
      ]
    },
    {
      "root": "subpkg_user",
      "pages": [
        "pages/profile/index"
      ]
    }
  ],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• root 指定分包的根目录
• pages 指定分包中的页面路径

注：根目录和路径不存在时，小程序开发者工具会自动创建。

9.3 分包预加载

在实际使用分包的过程中，纯粹的按需加载也不是最优的方案，可以将即将访问的页面的包预先下载下来，这样能进一步提升小程序加载的速度，通过 preloadRule 来配置预加载的包：

{
  "preloadRule": {
    "pages/framework/index": {
      "network": "all",
      "packages": ["subpkg_user"]
    }
  },
}
1
2
3
4
5
6
7
8

上述代码的含义是在加载 pages/framework/index 页面时，自动的去加载 subpkg_user 这个分包，等到要访问这个分包中的页面时会直接打开。

十. 框架接口

10.1 应用实例

在 app.js 中调用 App 时会注册应用实例，这个实例具有全局唯一性，通过调用 getApp 函数来获取。

在应用实例中可以添加一些需要共享的数据或方法：

App({
  message: '应用实例中的数据...',
  updateMessage() {
    // this 指向应用实例本身
  }
})
1
2
3
4
5
6

// 获取用应实例
const app = getApp()
Page({
  onLoad() {
    // 查看应用实例中的内容
    console.log(app)
  }
})
1
2
3
4
5
6
7
8

10.2 页面栈

页面栈本质上是一个数组，它记录着当前打开的全部页面历史，页面栈中的每个单元即为一个页面实例（调用 Page 函数时会注册页面实例）。

全局调用 getCurrentPages 函数可以获取当前的页面栈，通过页面栈可以看到所有的页面实例，借助于页面栈可以获取到页面中的一些有用信息：

• data 页面的初始数据
• setData 更新数据
• onShow、onLoad 等生命周期
• route 页面的路径
• 后续开发中还有其它…