小程序简介
小程序和普通网页开发的区别
- 运行环境不同
- API不同:由于运行环境的不同,所以小程序中无法调用DOM和BOM的API,但是小程序中可以调用微信环境提供的各种API,例如定位,扫码,支付
- 开发模式不同:小程序有自己的一套标准开发模式
- 申请小程序开发账号
- 安装小程序开发者工具
- 创建和配置小程序项目
注册小程序开发账号
-
点击注册按钮
使用浏览器打开https://mp.weixin.qq.com/网址,点击右上角的立即注册即可进入到小程序开发账号的注册流程,主要流程截图如下
-
选择注册账号的类型
-
填写账号信息
-
查找APPID(在开发管理中)
安装开发者工具
- 了解微信开发者工具
微信开发者工具是官方推荐使用的小程序开发工具,它提供的主要功能如下:- 快速创建小程序项目
- 代码的查看和编辑
- 对小程序功能进行设置
- 小程序的预览和发布
- 下载
推荐下载和安装最新的稳定版(Stable Build)的微信开发者工具,下载界面的链接如下
https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
3. 安装即可
项目结构
- 了解项目的基本结构
- pages用来存放所有小程序的页面
- utils用来存放工具性质的模块(例如:格式化时间的自定义模块)
- app.js小程序项目的入口文件
- app.json 小程序项目的全局配置文件
- app.wxss 小程序项目的全局样式文件
- project.config.json 项目的配置文件
- sitemap.json 用来配置小程序及其页面是否允许被微信索引
- 小程序页面的组成部分
小程序官方建议把所有小程序的页面都存放在pages目录中,以单独的文件夹存在,如图所示:
其中每页由四个基本文件组成,他们分别是:- .js文件(页面的脚本文件,存放页面的数据,事件处理函数等等)
- .json文件(当前页面的配置文件,配置窗口的外观,表现等)
- .wxml文件(页面的模版结构文件)
- .wxss文件(当前页面的样式表文件)
JSON配置文件的作用
JSON是一种数据格式,在实际开发中,JSON总是以配置文件的形式出现。小程序项目中也不例外:通过不同的.json配置文件,可以对小程序项目进行不同级别的配置。
小程序项目中有四种json配置文件,分别是
- 项目根目录中的app.json配置文件
- 项目根目录中的project.config.json配置文件
- 项目根目录中的sitemap.json配置文件
- 每个文件夹中的.json配置文件
app.json
app.json是当前小程序的全局配置文件,包括了小程序的所有页面路径,窗口外观,界面表现,底部tab等。Demo项目里面的app.json配置内容如下
简单的了解下这四个配置项的作用
- pages:用来记录当前小程序所有页面的路径
- window:全局定义小程序所有页面的背景色,文字颜色等
- style:全局定义小程序组件所使用的样式版本
- sitemapLocation:用来指明sitemap.json的位置
project.config.json
project.config.json是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置,例如:
- setting中保存了编译相关的配置
- projectname中保存的是项目名称
- appid中保存的是小程序的账号ID
sitemap.json
微信现已开放小程序内搜索,效果类似于PC网页的SEO。sitemap.json文件用来配置小程序页面是否允许微信索引。
当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。
注意:sitemap的索引提示是默认开启的,如果需要关闭sitemap的索引提示,可在小程序项目配置文件project.config.json的setting字段配置字段checkSiteMap为false
页面中的.json文件
小程序中的每一个页面,可以使用.json文件来对本页面的窗口外观进行设置,页面中的配置项会覆盖app.json的window中心相同的配置项。
新建小程序页面
只需要在app.json -> pages中新增页面的存放路径,小程序开发者工具即可帮我们自动创建对应的页面文件,如图所示:
修改项目首页
只需要调整app.json -> pages数组中页面路径的前后顺序,即可修改项目的首页。小程序会把排在第一位的页面,当作项目首页进行渲染,如图所示:
WXML模版
什么是WXML
WXML(WeiXin Markup Language)是小程序框架设计的一套标签语言,用来构建小程序页面的结构,其作用类似于网页开发的HTML。
WXML和HTML的区别
- 标签名称不同
- HTML(div,span,img,a)
- WXML(view,text,image,navigator)
- 属性节点不同
<a href="#">超链接</a>
<navigator url="pages/home/home"></navigator>
- 提供了类似于Vue中的模版语法
- 数据绑定
- 列表渲染
- 条件渲染
WXSS
什么是WXSS
WXSS(WeiXin Style Sheets)是一套样式语言,用于描述WXML的组件样式,类似于网页开发中的CSS。
WXSS和CSS的区别
- 新增了rpx尺寸单位:
- CSS中需要手动进行像素单位换算,例如rem
- WXSS在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算
- 提供了全局的样式和局部样式
- 项目跟目录中的app.wxss会作用于所有小程序页面
- 局部页面的.wxss样式仅对当前页面生效
- WXSS仅支持部分CSS选择器
- .class和#id
- element
- 并集选择器,后代选择器
- ::after,::before等伪类选择器
JS逻辑交互
小程序中的.js文件
一个项目仅仅提供界面展示是不够的,在小程序中,我们通过.js文件来处理用户的操作。例如:响应用户的点击,获取用户的位置等等。
小程序中.js文件的分类
小程序中.js文件分为三大类,分别是:
- app.js
- 是整个小程序项目的入口文件,通过调用App()函数来启动整个小程序
- 页面的.js文件
- 是页面的入口文件,通过调用Page()函数来创建并运行页面
- 普通的.js文件
- 是普通的功能模块文件,用来封装公共的函数或属性供页面使用。
小程序的宿主环境
什么是宿主环境
宿主环境(host environment)指的是程序运行锁必须得依赖环境。例如:
Android系统和IOS系统是两个不同的宿主环境。安卓版的微信App是不能在IOS环境下运行的,所以,Android是安卓环境的宿主环境,脱离了宿主环境的软件是没有任何意义的。
小程序的宿主环境
手机微信就是小程序的宿主环境,如图所示
小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能,例如:
微信扫码,微信支付,微信登录,地理定位,etc…
小程序宿主环境提供的内容
- 通信模型
- 运行机制
- 组件
- API
通信的主体
小程序中通信的主体是渲染层和逻辑层,其中:
- WXML模版和WXSS样式工作在渲染层
- JS脚本工作在逻辑层
小程序的通信模型
小程序中的通信模型分为两部分:
- 渲染层和逻辑层之间的通信
- 由微信客户端进行转发
- 逻辑层和第三方服务器之间的通信
- 由微信客户端进行转发
- 由微信客户端进行转发
小程序启动的过程
- 把小程序的代码包下载到本地
- 解析app.json全局配置文件
- 执行app.js小程序入口文件,调用App()创建小程序实例
- 渲染小程序首页
- 小程序启动完成
页面渲染的过程
- 加载解析页面的.json文件
- 加载页面的.wxml模版和.wxss样式
- 执行页面的.js文件,调用Page()创建页面实例
- 页面渲染完成
组件
小程序中组件的分类
小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构,官方把小程序的组件分为了9大类,分别是:
- 视图容器
- 基础内容
- 表单组件
- 导航组件
- 媒体组件
- map地图组件
- canvas画布组件
- 开放能力
- 无障碍访问
常见的视图容器组件
- view
- 普通视图区域
- 类似于HTML中的div,是一个快级元素
- 常用来实现页面的布局效果
- scroll-view
- 可滚动的视图区域
- 常用来实现滚动列表效果
- swiper和swiper-item
- 轮播图容器组件和轮播图item组件
view组件的基本使用
实现如图所示的flex横向布局效果:
scroll-view组件的基本使用
实现如图所示的纵向滚动效果:
swiper和swiper-item组件的基本使用
实现如图的轮播图的效果:
<!--轮播图的结构-->
<swiper class="swiper-container">
<!--第一个轮播图-->
<swiper-item>
<view class="item">A</view>
</swiper-item>
<!--第二个轮播图-->
<swiper-item>
<view class="item">B</view>
</swiper-item>
<!--第三个轮播图-->
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>
.swiper-container{
height: 150px;
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1) .item{
background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
background-color: lightskyblue;
}
swiper-item:nth-child(3) .item{
background-color: lightpink;
}
swiper组件的常用属性
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
indicator-dots | boolean | false | 是否显示面板指示点 |
indicator-color | color | rgba(0,0,0.3) | 指示点颜色 |
indicator-active-color | color | #000000 | 当前选中的指示点颜色 |
autoplay | boolean | false | 是否自动切换 |
interval | number | 5000 | 自动切换时间间隔 |
circular | booelan | false | 是否采用衔接滑动 |
常用基础组件内容
- text
- 文本组件
- 类似于HTML中的span标签,是一个行内元素
- rich-text
- 富文本组件
- 支持把HTML字符串渲染为WXML结构
- button
- 按钮组件
- 功能比HTML中的button按钮丰富
- 通过open-type属性可以调用微信提供的各种功能而(客服,转发,获取用户授权,获取用户信息等)
- image
- 图片组件
- imgae组件默认宽度约300px,高度约240px
- navigator
- 页面导航组件
- 类似于HTML中的a链接
text组件的基本使用
通过text组件的selectable属性,实现长按选中文本内容的效果:
rich-text组件的基本使用
通过rich-text组件的nodes属性节点,把HTML字符串渲染为对应的UI结构:
<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>
button组件的基本使用
```html
<!--按钮组件的基本使用-->
<!--通过type属性指定按钮颜色类型-->
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<!--size="mini"小尺寸按钮-->
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<!--plain镂空按钮-->
<button size="mini" plain>普通按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>
image组件的基本使用
<image src=""></image>
image组件的mode属性用来指定图片的裁剪和缩放模式,常用的mode属性如下:
mode值 | 说明 |
---|---|
scaleToFill | (默认值缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸填满image元素 |
aspectFit | 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整的将图片显示出来 |
aspectFill | 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是图片通常只在水平或垂直方向是完整的,另一个方向会发生截取 |
widthFix | 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 |
heightFix | 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 |
小程序里的API概述
小程序中的API是由宿主环境提供的,通过这些丰富的小程序API,开发者可以方便的调用微信提供的能力,例如:获取用户信息,本地存储,支付功能等。
小程序中API的三大分类
小程序官方将API分为了如下的三大类:
- 事件监听类:
- 特点:以on开头,用来监听某些事件的触发
- 同步API
- 特点:以sync结尾的API都是同步API
- 同步API的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
- 异步API
- 特点:类似于ajax函数,需要通过success,fail,complete接收调用的结果
协同工作
了解权限管理需求
在中大型的公司里面,人员的分工非常仔细:同一个小程序项目,一般会有不同岗位,不同角色的员工同时参与设计和开发。
此时出于管理的需要,我们迫切需要对不同岗位,不同角色的员工的权限进行边界的划分,使他们能够高效的进行协同工作。
了解项目成员的组织结构
小程序的开发流程
WXML模版语法
数据绑定的基本原则
- 在data中定义数据
- 在WXML中使用数据
在data中定义页面的数据
在页面对应的.js文件中,把数据定义到data对象中即可:
Mustache语法的格式
把data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)将变量包起来即可。语法格式为:
Mustache语法的应用场景
Mustache语法的主要应用场景如下:
- 绑定内容
- 绑定属性
- 运算(三元运算,算术运算)
事件绑定
什么是事件
事件是渲染层到逻辑层的通讯方式,通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务逻辑的处理
小程序中常用的事件
类型 | 绑定方式 | 事件描述 |
---|---|---|
tap | bindtap或bind:tap | 手触摸后马上离开,类似于HTML中的click事件 |
input | bindinput或bind | input |
change | bindchange或bind:change | 状态改变时触发 |
事件对象的属性列表
当事件回调触发的时候,会收到一个时间对象event,他的详细属性如下表所示:
属性 | 类型 | 说明 |
---|---|---|
type | String | 事件类型 |
timeStamp | Integer | 页面打开到触发事件锁经过的毫秒数 |
target | Obejct | 触发事件的组合的一些属性值集合 |
currentTarget | Object | 当前组件的一些属性值集合 |
detail | Object | 额外的信息 |
touches | Array | 触摸事件,当前停留在屏幕中的触摸点信息的数组 |
changedTouches | Array | 触摸事件,当前变化的触摸点信息的数组 |
target和currentTarget的区别:target是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件。
bindtap的语法格式
在小程序中,不存在HTML中的onclick鼠标点击事件,而是通过tap事件来响应用户的触摸行为
- 通过bindtap,可以为组件绑定tap触摸事件,语法如下:
<button type="primary" bindtap="btnTapHandler">按钮</button>
- 在页面的.js文件中定义对应的事件处理函数,事件参数通过形参event(一般简写成e)来接收:
btnTapHandler(e){
console.log(e)
},
在事件处理函数中为data中的数据赋值
通过调用this.setData(dataObejct)方法,可以给页面中data中的数据重新赋值,示例如下:
<button type="primary" bind:tap="CountChange">+1</button>
CountChange(){
this.setData({
count:this.data.count + 1
})
console.log(this.data.count)
},
事件传参
小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。例如,下面的代码将不能正常工作:
<button type="primary" bind:tap="CountChange(123)">事件传参</button>
因为小程序会把bindtap的属性值,统一当作事件名称来处理,相当于要调用一个名称为CountChange(123)的事件处理函数。
可以为组件提供data-*自定义属性传参,其中代表的是参数的名字,示例代码如下:
<button bind:tap="btnHandler" data-info="{{2}}">事件传参</button>
最终:
- info会被解析为参数的名字
- 数值2会被解析为参数的值
在事件处理函数中,通过event.target.dateset.参数名即可获取到具体参数的值,示例代码如下:
btnHandler(event){
// dataset是一个对象,包含了所有通过data-*传递过来的参数项
console.log(event.target.dataset)
// 通过dataset可以访问到具体参数的值
console.log(event.target.dataset.info)
},
bindinput的语法格式
在小程序中,通过input事件来响应文本框的输入事件,语法格式如下:
- 通过bindinput,可以为文本框绑定输入事件
<input type="text" bindinput="inputHandler"/>
- 在页面的.js文件中定义事件处理函数:
inputHandler(e){
console.log(e.detail.value)
},
实现文本框和data之间的数据同步
- 定义数据: msg:‘你好’,
- 渲染结构:
<input value="{{msg}}" bindinput="inputHandler"/>
- 编写js:
inputHandler(event){
this.setData({
// 通过e.detail.value获取文本框的最新值
msg:event.detail.value
})
},
条件渲染
wx:if
在小程序中,使用wx:if="{{condition}}"来判断是否需要渲染代码块:
<view wx:if="{{condition}}">True<</view>
也可以使用wx:elf和wx:else来添加else判断
<view wx:if="{{type === 1}}">男<</view>
<view wx:elif="{{type === 2}}">女<</view>
<view wx:else}">保密<</view>
结合<block>
使用wx:if
如果要一次性控制多个组件的展示与隐藏,可以使用一个<block></block>
标签将多个组件包装起来,并在<block>
标签上使用wx:if控制属性,示例如下:
<block wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
</block>
注:<block>
并不是一个组件,他只是一个包裹性质的容器,不会在页面中做任何渲染。
hidden
在小程序中,直接使用hidden="{{condition}}"也能控制元素的显示和隐藏:
<view hidden="{{condition}}">条件为true隐藏,条件为false显示</view>
wx:if与hidden的对比
- 运行方式不同:
- wx:if以动态创建和移除元素的方式,控制元素的展示与隐藏
- hidden以切换样式的方式(display:none/blick),控制元素的显示和隐藏
- 使用建议
- 频繁切换时,建议使用hidden
- 控制条件比较复杂时,建议使用wx:if搭配wx:elif,wx:else进行展示和隐藏的切换
列表渲染
wx:for
通过wx:for可以根据指定的数组,循环渲染重复的组件结构,语法示例如下:
<view wx:for="{{array}}">
索引是:{{index}} 当前项是:{{item}}
</view>
手动指定索引和当前项的变量名
使用wx:for-index可以指定当前循环项的索引的变量名
wx:key的使用
类似于Vue列表渲染中的:key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的key值,从而提高渲染的效率,示例代码如下
WXSS模版样式
什么是WXSS
WXSS(WeiXin Style Sheets)是一套样式语言,用于美化WXML的组件样式,类似于网页开发中的CSS。
WXSS具有大部分CSS的特性,同时,WXSS还对CSS进行了扩充以及修改,以适应微信小程序的开发。与CSS相比,WXSS扩展的特性有:
- rpx尺寸单位
- @import样式导入
什么是rpx尺寸单位
rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位。
rpx实现原理
rpx的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx把所有的设备的屏幕,在宽度上等分成750份(即当前屏幕的总宽度为750rpx)。
小程序在不同设备上运行的时候,会自动把rpx的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。
样式导入
什么是样式导入
使用WXSS提供的@import语法,可以导入外联的样式表。
@import的语法格式
@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。示例如下:
全局样式和局部样式
- 全局样式
定义在app.wxss中的样式为全局样式,作用于每一个页面。 - 局部样式
在页面的.wxss文件中定义的样式为局部样式,只作用于当前页面。
注:当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全局样式
当局部样式权重大于或等于全局样式的权重的时候,才会覆盖全局的样式
全局配置
全局配置文件和常用配置项
小程序根目录下的app.json文件是小程序的全局配置文件,常用的配置项如下:
- pages:记录当前小程序所有页面的存放路径
- window:全局设置小程序窗口的外观
- tabBar:设置小程序底部的tabBar效果
- style:是否启用新版的组件样式
了解window节点常用的配置项
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
navigationBarTitleText | String | 字符串 | 导航栏标题文字内容 |
navagationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色,如#000000 |
navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持black/while |
backgroundColor | HexColor | #ffffff | 窗口的背景色 |
backgroundTextStyle | String | dark | 下拉loading的样式,仅支持dark/light |
enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新 |
onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部的距离,单位为px |
设置导航栏里面的标题
设置步骤:app.json -> window -> navigationBarTitleText
设置导航栏的背景色
设置步骤:app.json -> window -> navagationBarBackgroundColor
设置导航栏的标题颜色
设置步骤:app.json -> window -> navagationBarTextStyle
全局开启下拉刷新功能
概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为
设置步骤:app.json -> window -> enablePullDownRefresh的值设置为true
"enablePullDownRefresh": true
注:在app.json中启用下拉刷新功能,会作用于每一个小程序页面!
设置下拉刷新时窗口的背景色
当全局开启下拉刷新功能之后,默认的窗口背景为白色。如果自定义下拉刷新窗口背景色,设置步骤为:
app.json -> window -> 为backgroundColor 指定16进制的颜色值#efefef。效果如下:
设置下拉刷新时loading的样式
当全局开启下拉刷新功能之后,默认窗口的loading样式为白色,如果要更改loading样式的效果,设置步骤为:
app.json -> window -> 为backgroundTexyStyle指定dark值。
"backgroundTextStyle": "dark"
注:backgroundTextStyle的可选值只有light和dark
设置上拉触底的距离
概念:上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。
设置步骤:
app.json -> window -> 为onReachBottomDistance设置新的数值
注:默认距离为50px,如果没有特殊需求,建议使用默认值即可。
tabBar
什么是tabBar
tabBar是移动端应用常见的页面效果,用于实现多页面的快速切换,小程序中通常将其分为:
- 底部tabBar
- 顶部tabBar
注意: - tabBar中只能配置最少2个,最多5个tab页签
- 当渲染顶部tabBar时,不显示icon,只显示文本
tabBar的6个组成部分
- backgroundColor:tabBar的背景色
- selectedIconPath:选中时的图片路径
- borderStyle:tabBar上边框的颜色
- iconPath:未选中时的图片路径
- selectedColor:tab上的文字选中时的颜色
- color:tab上文字的默认(未选中)的颜色
tabBar节点的配置项
属性 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
position | String | 否 | bottom | tabBar的位置,仅支持bottom/top |
borderStyle | String | 否 | black | tabBar上边框的颜色仅支持black/white |
color | HexColor | 否 | tab上文字的默认(未选中)的颜色 | |
selectedColor | HexColor | 否 | tab上的文字选中的颜色 | |
backgroundColor | HexColor | 否 | tabBar的背景色 | |
list | Array | 是 | tab页签的列表,最少2个,最多5个 |
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "index"
},
{
"pagePath": "pages/list/list",
"text": "list"
}
]
},
页面配置
页面配置文件的作用
小程序中,每个页面都有自己的.json文件,用来对当前页面的窗口外观,页面效果等进行配置。
页面配置和全局配置的关系
小程序中,app.json中的window节点,可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现,此时,“页面级别的.json配置文件”就可以实现这种需求。
注意:当页面配置与全局配置冲突时,根据就近原则,最终的效果以页面配置为准。
页面配置中常用的配置项
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
navifationBarBackgroundColor | HexColor | #000000 | 当前页面导航栏背景颜色,如#000000 |
nagigationBarTextStyle | String | white | 当前页面导航栏标题颜色,仅支持black/white |
navigationBarTitleText | String | 当前页面导航栏标题文字内容 | |
backgroundColor | HexColor | #ffffff | 当前页面窗口的背景色 |
backgroundTextStyle | String\dark | 当前页面下拉loading的样式,仅支持dark/light | |
enablePullDownRefresh | Boolean | false | 是否为当前页面开启下拉刷新的效果 |
onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为px |
网络数据请求
小程序中网络数据请求的限制
出于安全性方面的考虑,小程序官方对数据接口的请求作出了如下两个限制:
- 只能请求HTTPS类型的接口
- 必须将接口的域名添加到信任列表中
配置request合法域名
配置步骤:登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改request合法域名
注意事项:
- 域名只支持https协议
- 域名不能使用IP地址或localhost
- 域名必须经过ICP备案
- 服务器域名一个月内最多可申请5次修改
发起GET请求
调用微信小程序提供的wx.request()方法,可以发起GET请求,示例代码如下:
getInfo(){
wx.request({
url: 'url',
method:'GET',
data:{
"name":'zs',
age:20
},
success:(res=>{
console.log(res)
})
})
} ,
发起POST请求
调用微信小程序提供的wx.request()方法,可以发起POST请求,示例代码如下:
postInfo(){
wx.request({
url: 'url',
method:"POST",
data:{
name:"ls",
age:25
},
success:(res=>{
console.log(res)
})
})
},
在页面刚加载时请求数据
在很多情况下,我们需要在页面刚加载的时候去,自动请求一些初始化的数据,此时需要在页面的onLoad事件中调用获取数据的函数,示例代码如下:
onLoad(options) {
this.getInfo()
this.postInfo()
},
跳过request合法域名校验
如果后端程序员仅仅提供了http协议的接口,暂时没有提供https协议的接口。
此时为了不耽误开发的进度,我们可以在微信开发者工具中,临时开启开发环境不校验请求域名,TLS版本以及HTTPS证书选项,跳过request合法域名的校验。
注:跳过request合法域名校验的选项,仅限在开发与调试阶段使用!
关于跨域和ajax的说明
跨域问题只存在于基于浏览器的web开发环境,由于小程序的宿主环境不是浏览器,而是微信客户端,所以小程序中不存在跨域的问题。
Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象,由于小程序的宿主环境是微信客户端,所以小程序中不能叫做“发起Ajax请求”,而是叫做“发起网络数据请求”。
页面导航
什么是页面导航
页面导航指的是页面之间的相互跳转。例如,浏览器中实现导航页面的方式有如下两种:
<a>
连接- location.href
小程序中实现页面导航的两种方式
- 声明式导航
- 在页面上声明一个
<navigator>
导航组件 - 通过点击
<navigator>
组件实现页面跳转
- 在页面上声明一个
- 编程式导航
- 调用小程序的导航API,实现页面的跳转
声明式导航
导航到tabBar页面
tabBar页面指的是被配置为tabBar的页面、在使用<navigator>
组件跳转到指定的tabBar页面时,需要指定url属性和open-type属性,其中:
- url表示要跳转的页面的地址,必须以/开头
- open-type表示跳转的方式,必须为switchTab
示例代码如下:
<navigator url="" open-type="switchTab">导航到消息页面</navigator>
导航到非tabBar页面
非tabBar页面指的是没有被配置为tabBar的页面,在使用<navigator>
组件跳转到普通的非tabBar页面时,则需要指定url属性和open-type属性,其中:
1. url表示要跳转的页面的地址,必须以/开头
2. open-type表示跳转的方式,必须为navigate
示例代码如下:
<navigator url="" open-type="navigate">导航到页面</navigator>
注:为了简便,在导航到非tabBar页面时,open-type="navigate"属性可以省略。
后退导航
如果要后退到上一页面或多级页面,则需要指定open-type属性和delta属性,其中:
1. open-type的值必须时navigateBack,表示要进行后退导航
2. delta的值必须是数字,表示要后退的层级
示例代码如下
<navigator open-type="navigateBack" delta="1">返回上一页</navigator>
注意:为了简便,如果只是后退到上一页面,则可以省略delta属性,因为其默认值就是1。
编程式导航
导航到tabBar页面
调用wx.switchTab(Object object)方法,可以跳转到tabBar页面。其中Object参数对象的属性列表如下:
属性 | 类型 | 是否必选 | 说明 |
---|---|---|---|
url | string | 是 | 需要跳转的tabBar页面的路径,路径后不能带参数 |
success | function | 否 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用失败的回调函数 |
complete | function | 否 | 接口调用结束的回调函数(调用成功失败都会执行) |
示例代码如下:
// 页面结构
<button bindtap="gotoMessage">跳转到消息页面</button>
// 通过编程式导航,跳转到message页面
gotoMessage(){
wx.switchTab({
url:""
})
}
导航到非tabBar页面
调用wx.navigateTo(Object obejct)方法,可以跳转到非tabBar的页面。其中Obejct参数对象的属性列表同上,示例代码如下
// 页面结构
<button bindtap="gotoMessage">跳转到消息页面</button>
// 通过编程式导航,跳转到message页面
gotoMessage(){
wx.navigateTo({
url:""
})
}
后退导航
调用wx.navigateBack(Object obejct)方法,可以返回上一页面或多级页面。其中Obejct参数对象的属性列表如下:
属性 | 类型 | 默认值 | 是否必选 | 说明 |
---|---|---|---|---|
delta | number | 1 | 是 | 需要跳转的tabBar页面的路径,路径后不能带参数 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功失败都会执行) |
示例代码如下
// 页面结构
<button bindtap="gotoMessage">跳转到消息页面</button>
// 通过编程式导航,跳转到message页面
gotoMessage(){
wx.navigateBack()
}
导航传参
声明式导航传参
navigator组件的url属性用来指定将要跳转到的页面的路径。同时,路径的后面还可以携带参数:
- 参数与路径之间使用?分隔
- 参数键与参数值用=连接
- 不同参数用&分隔
示例代码如下:
<navigator url="***?name=zs&age=20">跳转到info页面</navigator>
编程式导航传参
调用wx,navigateTo(Object object)方法跳转页面时,也可以携带参数,代码示例如下:
// 页面结构
<button bindtap="gotoInfo">跳转到info页面</button>
// 通过编程式导航,跳转到info页面,并携带参数
gotoInfo(){
wx.navigateTo({
url:"***?name=zs&age=20"
})
}
在onLoad中接收导航参数
通过声明式导航传参或编程式导航传参所携带的参数,可以直接在onLoad事件中获取到,示例代码如下:
onLoad:function(options){
// options就是导航传过来的参数对象
console.log(options)
// 一般都在data中定义一个query然后赋值给options
}
下拉刷新事件
什么是下拉刷新
下拉刷新时移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。
启用下拉刷新
启用下拉刷新有两种方式
- 全局开启下拉刷新
在app,json的window节点中,将enablePullDownRefresh设置为true - 局部开启下拉刷新
在页面的.json配置文件中,将enablePullDownRefresh设置为true
在实际开发中推荐使用第二种方式,为需要的页面单独开启下拉刷新的效果。
配置下拉刷新窗口的样式
在全局或页面的.json配置文件中,通过backgroundColor或backgroundTextStyle来配置下拉刷新窗口的样式,其中:
- backgroundColor用来配置下拉刷新窗口的背景颜色,仅支持16进制的颜色值
- backgroundTextStyle用来配置下拉刷新的loading样式,仅支持dark和light
监听页面的下拉刷新事件
在页面的,js文件中,通过onPullDownRefresh()函数即可监听当前页面的下拉刷新事件。
停止下拉刷新的效果
在处理完下拉刷新后,下拉刷新的loading会一直显示,不会主动消失,所以需要手动隐藏loading效果。此时,调用wx.stopPullDownRefresh()可以停止当前页面的下拉刷新。
上拉触底事件
什么是上拉触底
上拉触底是移动端的专有名词,通过手指在屏幕上的上拉操作,从而加载更多数据的行为。
监听页面的上拉触底事件
在页面的.js文件中,通过onReachBottom()函数即可监听当前页面的上拉触底事件。
配置上拉触底距离
上拉触底距离指的是触发上拉触底事件时,滚动条距离页面底部的距离。可以在全局或.json配置文件,通过onReachBottomDistance属性来配置上拉触底的距离,小程序默认的触底距离是50px,在实际开发中,可以自己调整这个距离
生命周期
什么是生命周期
生命周期(Life Cycle)是指一个对象从创建->运行->销毁的整个阶段,强调的是一个时间段。
我们可以把每个小程序运行的过程,也概括为生命周期:
- 小程序的启动,表示生命周期的开始
- 小程序的关闭,表示生命周期的结束
- 中间小程序的运行过程,就是小程序的生命周期
生命周期的分类
在小程序中,生命周期分为两类,分别是:
- 应用生命周期
特指小程序从启动->运行->销毁的过程 - 页面生命周期
特指小程序中,每个页面的加载->渲染->销毁的过程
什么是生命周期函数
生命周期函数:是由小程序框架提供的内置函数,会伴随着生命周期,自动按次序执行。其作用为:允许程序员在特定的时间点,执行某些特定的操作。例如,页面刚加载的时候,可以在onLoad生命周期函数中初始化页面的数据。
注:生命周期强调的是时间段,生命周期函数强调的是时间点
生命周期函数的分类
小程序中生命周期函数分为两类,分别是:
- 应用生命周期
特指小程序从启动->运行->销毁期间依次调用的那些函数 - 页面生命周期
特指小程序中,每个页面的加载->渲染->销毁期间依次调用的那些函数
应用的生命周期函数
小程序的应用生命周期函数需要在app.js中进行声明,示例代码如下:
App({
//小程序初始化完成时执行此函数,全局只触发一次,可以做一些初始化的工作
onLaunch:function(options){},
// 小程序启动,或从后台进入前台时触发
onShow:function(options){},
// 小程序从前台进入后台触发
onHide:function(){}
})
wxs脚本
什么是wxs
WXS(WeiXin Script)是小程序独有的一套脚本语言,结合WXML,可以构建出页面的结构。
wxs的应用场景
wxml中无法调用在页面.js中定义的函数,但是,wxml中可以调用wxs中定义的函数。因此,小程序中wxs的典型应用场景就是“过滤器”。
基础语法
内嵌wxs脚本
wxs代码可以编写在wxml文件中的<wxs>
标签内,就像js代码可以编写在html文件中的<script>
标签内一样。
wxml文件中的每个<wxs></wxs>
标签,必须提供module属性,用来指定当前wxs的模块名称,方便在wxml中访问模块内的成员:
<view>{{m1.toUpper(username)}}</view>
<wxs module="m1">
module.exports.toUpper = function(str){
return str.toUpperCase()
}
</wxs>
外联wxs脚本
wxs代码还可以编写在以.wxs为后缀名的文件里面,就像js代码可以编写在以.js为后缀名的文件中一样。代码示例如下:
function toLower(str){
return str.toLowerCase()
}
module.exports = {
toLower:toLower
}
使用外联的wxs脚本
是wxml中引入外联的wxs脚本时,必须为<wxs>
标签添加module和src属性,其中:
- module用来指定模块的名称
- src用来指定要引入的脚本的路径,且必须是相对路径
<view>{{m2.toLower(country)}}</view>
<wxs src="../../utils/tools.wxs" module="m2"></wxs>
wxs的特点
- 与js不同
为了降低wxs的学习成本,wxs语言在设计时借鉴大量的js的语法,但是本质上,wxs和js是完全不同的两种语言 - 不能作为组件的事件回调
wxs典型的应用场景就是过滤器,经常配合mustache语法进行使用,例如:<view>{{m2.toLower(country)}}<view>
但是,在wxs中定义的函数不能作为组件的事件回调函数。例如,下面的用法是错误的:
<button bindtap="m2.toLower">按钮</button>
- 隔离性
隔离性指的是wxs的运行环境和其他js代码是隔离的。体现在如下两方面:- wxs不能调用js中定义的函数
- wxs不能调用小程序提供的API
- 性能好
在IOS设备上,小程序内的WXS会比js代码块2~20倍
在abdroid设备上,运行效率几乎没有差异
自定义组件
组件的创建与使用
- 创建组件
- 在项目的根目录中,创建components->test文件夹
- 在新建的components->test文件夹上,鼠标右键,点击新建component
- 键入组件的名称之后回车, 会自动生成组件对应的四个文件,后缀名分别为.js,.json,.wxml,.wxss
注:为了保证目录结构的清晰,建议把不同的组件存放到单独目录中,例如:
引用组件
组件的引用方式分为“局部引用”和“全局引用”,顾名思义:
- 局部引用:组件只能在当前被引用的页面内使用
- 全局引用:组件可以在每个小程序页面中使用
局部引用组件
在页面的.json配置文件中引用组件的方式,叫做“局部引用”。示例代码如下:
// 在页面的.json文件中引入组件
{
"usingComponets":{
"my-test1":"/componets/test/test"
}
}
// 在页面的/wxml文件中,使用组件
<my-test></my-test>
全局引用组件
在app.json全局配置文件中引入组件的方式,叫做“全局引用”。示例代码如下:
// 在app.json全局配置文件中引入组件的方式叫做全局引用。示例代码如下:
{
"usingComponets":{
"my-test2":"/componets/test/test"
}
}
// 在页面的.wxml文件中使用组件
<my-test2></my-test2>
全局引用VS局部引用
根据组件的使用频率和范围选择合适的引用方式
组件和页面的区别
从表面来看,组件和页面都是由.js,.json,.wxml和.wxss这四个文件组成的。但是组件和页面的js与json文件有明显的不同
- 组件的json文件中需要声明"componet":true属性
- 组件的js文件中调用的是Componet()函数
- 组件的事件处理函数需要定义到methods节点中。
样式
组件样式隔离
默认情况下,自定义组件的样式只对当前组件生效,不会影响到组件之外的UI结构,如图所示:
- 组件A的样式不会影响组件C的样式
- 组件A的样式不会影响小程序页面的样式
- 小程序页面的样式不会影响组件A和C的样式
好处: - 防止外界的样式影响组件内部的样式
- 防止组件的样式破坏外界的样式
组件样式隔离的注意点
- app.wxss中的全局样式对组件无效
- 只有class选择器会有隔离的效果,id选择器,属性选择器,标签选择器不受样式隔离的影响
建议:在组件和引用组件的页面中建议使用class选择器,不要使用其他选择器。
修改组件的样式隔离选项
默认情况下,自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时,我们希望在外界能够控制组件内部的样式,此时,可以通过stylesolation修改组件的样式隔离选项,用法如下:
stylesolcation的可选值
可选值 | 默认值 | 描述 |
---|---|---|
isolated | 是 | 表示启用样式隔离,在自定义组件之外,使用class指定的样式不会相互影响 |
apply-shared | 是 | 表示页面wxss样式将影响到自定义组件,但自定义组件wxss中指定的样式不会影响到页面 |
shared | 是 | 表示页面wxss样式将影响到自定义组件,自定义组件wxss中指定的样式也会影响页面和其他设置了apply-shared或shared的自定义组件 |
数据方法和属性
data属性
在小程序组件中,用于组件模版渲染的私有数据,需要定义到data节点中,示例如下:
Component({
data:{
count:0
}
})
methods方法
在小程序组件中,事件处理函数和自定义方法需要定义到methods节点中,示例代码如下:
properties属性
在小程序组件中,properties是组件的对外属性,用来接收外界传递到组件中的数据,示例代码如下:
data和properties的区别
在小程序的组件中,properties属性和data数据的用法相同,他们都是可读可写的,只不过:
- data更倾向于存储组件的私有数据
- properties更倾向于存储外界传递到组件中的数据
使用setData修改properties的值
由于data数据和properties属性在本质上没有区别,因此properties属性的值也可以用于页面渲染,或使用setData为properties中的属性重新赋值,示例代码如下:
数据监听器
什么是数据监听器
数据监听器用于监听和响应任何属性和数据字段的变化,从而执行特定的操作。他的作用类似于vue中的watch侦听器。在小程序组件中,数据监听器的基本语法格式如下:
数据监听器的基本用法
组件的UI结构如下:
组件的.js文件代码如下:
监听对象属性的变化
数据监听器支持监听对象中单个或多个属性的变化,示例语法如下:
监听对象中所有属性的变化
如果某个对象中需要被监听的属性太多,为了方便,可以使用通配符**来监听对象中所有属性的变化,示例代码如下:
纯数据字段
什么是纯数据字段
纯数据字段指的是那些不用于界面渲染的data字段。
应用场景:例如有些情况下,某些data中的字段既不会展示在界面上,也不会传递给其他组件,仅仅在当前组件内部使用。带有这种特性的data字段适合被设置为纯数据字段。
好处:纯数据字段有助于提升页面更新的性能。
使用规则
在Component构造器的options节点中,指定pureDataPattern为一个正则表达式,字段名符合这个正则表达式的字段将成为纯数据字段,示例代码如下:
组件的生命周期
组件全部的生命周期函数
小程序组件可用的全部生命周期如下表所示:
生命周期函数 | 参数 | 描述说明 |
---|---|---|
created | 无 | 在组件实例刚刚被创建时执行 |
attached | 无 | 在组件实例进行页面节点树时执行 |
ready | 无 | 在组件在视图层布局完成后执行 |
moved | 无 | 在组件实例被移动到节点树另一个位置时执行 |
detached | 无 | 在组件实例被从页面节点树移除时执行 |
error | Object error | 每当组件方法抛出错误时执行 |
组件主要的生命周期函数
在小程序组件中,最重要的生命周期函数有3个,分别是created,attached,detached。他们各自的特点如下:
- 在组件实例刚被创建好的时候,created生命周期函数会被触发
- 此时还能调用setData
- 通常在这个生命周期函数中,只应该用于给组件的this添加一些自定义的属性字段
- 在组件完全初始化完毕,进入页面节点树后,attached生命周期函数会被触发
- 此时,this.data已被初始化完毕
- 这个生命周期很有用,绝大多数的初始化工作可以在这个实际进行(例如发请求获取初始数据)
- 在组件离开页面节点树后,detached生命周期函数会被触发
- 退出一个页面时,会触发页面内每个自定义组件的detached生命周期函数
- 此时适合做一些清理性质的工作
lifetimes节点
在小程序组件中,生命周期函数可以直接定义在Component构造器的第一级参数中,可以在lifetimes字段内进行声明(这是推荐的方式,其优先级最高)。示例代码如下:
组件所在页面的生命周期
什么是组件所在页面的生命周期
有时,自定义组件的行为依赖于页面状态的变化,此时就需要用到组件所在页面的生命周期。例如,每当触发页面的show声明周期函数的时候,我们希望能够重新生成一个随机的rgb颜色值。在自定义组件中,组件所在的页面的生命周期函数有如下三个,分别是:
生命周期函数 | 参数 | 描述 |
---|---|---|
show | 无 | 组件所在的页面被展示时执行 |
hide | 无 | 组件所在的页面被隐藏时执行 |
resize | Obejct size | 组件所在的页面尺寸变化时执行 |
pageLifetimes节点
组件所在页面的声明周期函数,需要定义在pageLifetimes节点中,示例代码如下:
插槽
什么是插槽
在自定义组件的wxml结构中,可以提供一个<slot>
节点(插槽),用于承担组件使用者提供的wxml结构。
单个插槽
在小程序中,默认每个自定义组件中只允许使用一个<slot>
进行占位,这种个数上的限制叫做单个插槽。
启用多个插槽
在小程序的自定义组件中,需要使用多<slot>
插槽时,可以在组件的.js文件中,通过如下方式进行启用。示例代码如下:
定义多个插槽
可以在组件的.wxml中使用多个<slot>
标签,以不同的name来区分不同的插槽。示例代码如下:
在使用带有多个插槽的自定义组件时,需要用slot属性来将节点插入到不同的<slot>
中。示例代码如下:
父子组件之间的通信
父子组件之间通信的3种方式
- 属性绑定
用于父组件向子组件的指定属性设置数据,技能设置JSON兼容的数据 - 事件绑定
用于子组件向父组件传递数据,可以传递任意数据 - 获取组件实例
父组件还可以通过this.selectComponent()获取子组件实例对象
这样就可以直接访问子组件的任意数据和方法
属性绑定
属性绑定用于实现父向子传值,而且只能传递普通类型的数据,无法将方法传递给子组件。父组件的示例代码如下:
子组件在properties节点中声明对应的属性并使用。示例代码如下:
事件绑定
事件绑定用于实现子向父传值,可以传递任何类型的数据。使用步骤如下:
-
在父组件的.js中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件
-
在父组件的wxml中,通过自定义事件的形式,将步骤1中定义的函数引用,传递给子组件
-
在子组件的.js中,通过调用this.triggerEvent(‘自定义事件名称’,{/参数对象/}),将数据发送到父组件
-
在父组件的.js中,通过e.detail获取到子组件传递过来的数据
获取组件实例
可在父组件里调用this.selectComponent(“id或class选择器),获取子组件的实例对象,从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器,例如this.selectComponent(”.my-component")。
behaviors
什么是behaviors
behaviors是小程序中用于实现组件间代码共享的特性,类似于Vue.js中的mixins
behaviors的工作方式
每个behaviors可以包含一组属性,数据,生命周期函数和方法。组件引用他时,他的属性,数据和方法会被合并到组件中。
每个组件可以引用多个behavior,behavior也可以引用其它behavior。
创建behavior
调用Behavior(Object object)方法即可创建一个共享的behavior实例对象,供所有的组件使用:
导入并使用behavior
在组件中,使用require()方法导入需要的behavior,挂载后即可访问behavior中的数据或方法,示例代码如下:
behavior中所有可用的节点
使用npm包
小程序对npm的支持与限制:目前,小程序中已经支持使用npm安装第三方包,从而来提高小程序的开发效率。但是,在小程序中使用npm包有如下三个限制:
- 不支持一来与Node.js内置库的包
- 不支持依赖于浏览器内置对象的包
- 不支持依赖于C++插件的包
总结:虽然npm上的包有千千万,但是能供小程序使用的包却为数不多
使用Vant Weapp
什么是Vant Weapp
Vant Weapp是有赞前端团队开源的一套小程序UI组件库,助力开发者快速搭建小程序应用。它所使用的是MIT开源许可协议,对商业使用比较友好。
安装Vant组件库
在小程序项目中,安装Vant组件库主要分为如下3步:
- 通过npm安装(建议制定版本为@1.3.3)
- 构建npm包
- 修改app.json
使用vant组件
安装完Vant组件库之后,可以在app.json的usingComponents节点中引入需要的组件,即可在wxml中直接使用组件,示例代码如下:
定制全局主题样式
在app.wxss中,写入CSS变量,即可对全局生效:
API Promise化
基于回调函数的异步API的缺点
默认情况下,小程序官方提供的异步API都是基于回调函数实现的,例如,网络请求的API需要按照如下的方式调用:
缺点:容易造成回调地域的问题,代码的可读性维护性差!
什么是API Promise化
API promise化,指的是通过额外的配置,将官方提供的,基于回调函数的异步API,升级改造为基于Promise的异步API,从而提高代码的可读性,维护性,避免回调地域的问题。
实现API Promise化
在小程序中,实现API Promise化主要依赖于miniprogram-api-promise这个第三方npm包。他的安装和使用步骤如下:
调用Promise化之后的异步API
全局数据共享
什么是全局数据共享
全局数据共享(有叫做:状态管理)是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有:Vuex,Redux,MobX等。
小程序中的全局数据共享方案
在小程序中,可使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享。其中:
- mobx-miniprogram用来创建Store实例对象
- mobx-miniprogram-bindings用来把Store中的共享数据或方法绑定到组件或页面中使用
Mobx
安装MobX相关的包
在项目中运行如下的命令,安装MobX相关的包:
注:MobX相关的包安装完毕之后,记得删除miniprogram_npm目录后,重新构建npm。
创建MobX的Store实例
创建MobX的Store实例
将Store中的成员绑定到页面中
将Store中的成员绑定到组件中
在组件中使用store的成员
分包
什么是分包
分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载
分包的好处
对小程序进行分包的好处主要有以下几点:
- 可以优化小程序首次启动的下载时间
- 在多团队共同开发时可以更好的解耦合作
分包前项目的构成
分包前,小程序项目中所有的页面和资源都被打包到了一起,导致整个项目体积过大,影响小程序首次启动的下载时间
分包后项目的构成
分包后,小程序项目由一个主包和多个分包组成:
主包:一般只包含项目的启动页面或tabBar页面,以及所有分包都需要用到的一些公共资源
分包:只包含和当前分包有关的页面和私有资源
分包的加载规则
- 在小程序启动时,默认会下载主包并启动主包内页面
tabBar页面需要放到主包中 - 当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示
非tabBar页面可以按照功能的不同,划分为不同的包之后,按需进行下载
分包的体积限制
目前。小程序分包的大小有以下两个限制:
- 整个小程序所有分包大小不超过16M(主包+所有分包)
- 单个分包/主包大小不能超过2M
使用分包
配置方法
打包原则
- 小程序会按subpackages的配置进行分包,subpackages之外的目录将被打包到主包中
- 主包也可以有自己的pages(即最外层的pages字段)
- tabBar页面必须在主包内
- 分包之间不能互相嵌套
引用原则
- 主包无法引用分包内的私有资源
- 分包之间无法相互引用私有资源
- 分包可以引用主包内的公共资源
独立分包
什么是独立分包
独立分包本质上也是分包,只不过他比较特殊,可以独立于主包和其他分包而单独运行
独立分包和普通分包的区别
最主要的区别:是否依赖于主包运行
普通分包必须依赖于主包才能运行
独立分包可以在不下载主包的情况下独立运行
独立分包的使用场景
开发者可以按需,将某些具有一些功能独立性的页面配置到独立分包中,原因如下:
- 当小程序从普通的分包页面启动时,需要首先下载主包
- 而独立分包不依赖主包即可运行,可以很大程度上提升分包页面的启动速度
注:一个小程序中可以有多个独立分包
独立分包的配置方法
独立分包的引用原则
独立分包和普通分包以及主包之间,是相互隔绝的,不能相互引用彼此的资源!
分包预下载
什么是分包预下载
分包预下载指的是:在进入小程序的某个页面时,由框架自动预下载可能需要的分包,从而提升进入后续分包页面的启动速度。
配置分包的预下载
预下载分包的行为会在进入指定的页面时触发,在app,json中,使用preloadRule节点定义分包的预下载规则,示例代码如下:
分包预下载的限制
同一个分包中的页面享有共同的预下载大小限额2M,例如: