目录
前情提要
开发模式
- 申请小程序开发账号
- 安装小程序开发者工具
- 创建和配置小程序项目
小程序官方组件展示
![image.png](https://img-blog.csdnimg.cn/img_convert/aa01846f3e9188de0d6b62b9352baa1e.png#averageHue=#cfcfcf&clientId=uf21ecc3d-676c-4&from=paste&height=370&id=u14bda17a&name=image.png&originHeight=370&originWidth=429&originalType=binary&ratio=1&rotation=0&showTitle=false&size=78578&status=done&style=none&taskId=udc2107a1-3b4b-46b3-83d2-2656afe4ea5&title=&width=429)
注册开发者账号
- 网址:https://mp.weixin.qq.com/
获取appID
- appid是一长串的字符,还有一个secret也是需要的,这里我的就不展示出来了
微信小程序开发工具
- 下载稳定版最新版就好了,就在微信小程序开发里面
代码构成
项目结构
- pages:页面文件夹
- app.js:项目入口文件
- app.json:全局配置文件
- utils:工具模块文件夹
- app.wxss:全局样式文件
- project.config.json:项目配置文件
- sitemap.json:用来配置小程序及其页面是否允许被微信索引
页面组成
- .js:页面脚本文件
- .json:页面配置文件
- .wxml:页面模板结构文件
- .wxss:页面样式表文件
json配置文件
- app.json文件:全局配置
- project.config.json文件:个性化配置
- sitemap.json文件:用来配置小程序及其页面是否允许被微信索引
- 每个页面文件夹中的.json文件:配置本页面窗口外观
app.json
- 作用:当前小程序的全局配置
- 配置项:
- pages:当前小程序所有页面的路径
- window:全局定义小程序所有页面的背景色、文字颜色等
- style:组件样式版本
- sitemapLocation:指明sitemap.json的位置
WXML
- 类似于HTML
- 区别:
- 标签名不同
- 属性节点不同
- 提供了类似于Vue中的模板语法
WXSS
- 样式语言,类似于css
- 区别:
- 新增rpx
- 仅支持部分CSS选择器
.js文件
- app.js:小程序的入口文件,通过调用App()函数来启动整个小程序
- 页面的.js文件:通过调用Page()函数啦创建并运行页面
- 普通.js文件:封装公共函数或属性
开发流程
- 新建小程序页面:在app.json->中新建页面的存放路径,小程序开发者工具会自动创建页面文件夹
- 修改项目首页:app.json->pages数组中排第一的就是项目首页
小程序的宿主环境
通信环境
- 渲染层(WXSS和WXML)和逻辑层(js脚本)之间的通信:有微信客户端(Native)进行转发
- 逻辑层(js脚本)和第三方服务器之间的通信:由微信客户端(Native)进行转发
运行机制
- 小程序启动
- 页面加载
组件
组件分类
- 视图容器
- 基础内容
- 表单组件
- 导航组件
- 媒体组件
- map地图组件
- canvas画布组件
- 开放能力
- 无障碍访问
视图容器类组件
- view
- 类似于div,块级元素
- scroll-view
- 可滚动的视图区域
- 具体用例:
// 纵向滚动
<scroll-view scroll-y></scroll-y>
// 横向滚动
<scroll-view scroll-x></scroll-y>
- swiper和swiper-item
- 轮播图容器组件和轮播图item组件
- 具体用例:
<swiper circular>
<swiper-item>A</swiper-item>
<swiper-item>B</swiper-item>
<swiper-item>C</swiper-item>
</swiper>
- 常用属性:
属性 | 类型 | 默认值 | 说明 |
---|
indicator-dots | boolean | false | 是否显示面板指示点 |
indicator-color | color | rgba(0,0,0,.3) | 指示点颜色 |
indicator-active-color | color | #000 | 当前选中的指示点颜色 |
autoplay | boolean | false | 是否自动切换 |
interval | number | 5000 | 自动切换时间间隔 |
circular | boolean | false | 是否采用衔接滑动 |
基础内容组件
- text
- 文本组件,类似于span,行内元素
- 可通过selectable属性,实现长按选中文本内容的效果
- rich-text
- 富文本组件
- 通过nodes属性节点,把HTML字符串渲染为对应的UI结构
- 具体用例:
<rich-text nodes="<h1 style='color: red;'>标题</h1>"></rich-text>
其他常用组件
- button
- 按钮组件
- 通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
- 具体用例:
// 通过type指定按钮类型
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warm">警告按钮</button>
// size="mini" 小尺寸
<button size="mini">小尺寸按钮</button>
// plain 镂空
<button plain>镂空按钮</button>
- image
- 图片组件
- 默认宽300px、高240px
- mode属性:指定图片的裁剪和缩放模式
mode值 | 说明 |
---|
scaleToFill | (默认值),图片填满image元素 |
aspectFit | 图片长边完全显示 |
aspectFill | 图片短边完全显示 |
widthFix | 宽度不变,image元素高度随图片变化 |
heightFix | 高度不变,image元素宽度随图片变化 |
- 具体用例:
<imgae src="/images/1.png" mode="aspectFill"></imgae>
- navigator
- 页面导航组件,类似于a标签
API
- 事件监听API
- 以on开头,用来监听某些事件的触发
- 例:wx.onWindoeResize(function callback)监听窗口尺寸变化的事件
- 同步API
- 以Sync结尾
- 可以通过含糊返回值直接获取
- 例:wx.setStorageSync(‘key’, ‘value’)向本地存储中写入内容
- 异步API
- 需要通过success、fail、complete接受调用的结果
- 例:wx.request()发起网络请求,通过success回调函数接收数据
模板与配置
WXML模板语法
数据绑定
- 在data中定义数据
- 在WXML中使用数据
- 具体用例:
// 页面的.js文件中
Page({
data:{
// 字符串类型
info:'string data',
// 数组类型
msgList:[{msg:'hello'},{msg:'world'}],
// 图片地址
imgSrc:'https://img2.baidu.com/it/u=2750810294,3836014703&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707',
// 数学运算
randomNum':Math.random() * 10,
}
})
<view>{{info}}</view>
<view>{{msgList[0].msg}}</view>
<image src="{{imgSrc}}"></image>
<view>{{ randomNum >= 5 ? randomNum * 100 : 'little than 5' }}</view>
事件绑定
- 常用事件:
类型 | 绑定方式 | 事件描述 |
---|
tap | bindtap 或 bind:tap | 类似于click,手指触摸后马上离开 |
input | bindinput 或 bind:input | 文本框输入事件 |
change | bindchange 或 bind:change | 状态改变时触发 |
- 事件对象的属性列表:
属性 | 类型 | 说明 |
---|
type | String | 事件类型 |
timeStamp | Integer | 页面打开到触发事件所经过的毫秒数 |
target | Object | 触发事件的组件的一些属性值集合 |
currentTarget | Object | 当前组件的一些属性值集合 |
detail | Object | 额外的信息 |
touches | Array | 触摸事件,当前停留在屏幕中的触摸点信息的数组 |
changedTouched | Array | 触摸事件,当前变化的触摸点信息的数组 |
- 事件绑定用例以及改变data中的值:
// .js文件中
Page({
// 数据
data:{
count:0,
},
// 按钮的处理函数
btnTapHander(e){
// e.currentTarget是绑定了相关事件的触发对象
console.log(e.currentTarget);
// dataset是一个对象, 包含了所有通过data-*传递过来的参数项
console.log(e.target.dataset.info)
// 修改data中数据的值
this.setData({
count:this.data.count + e.target.dataset.info
})
}
// input的处理函数
iptHander(e){
// input中的值可以在e.detail.value中获取
console.log(e.detail.value)
}
})
<button bindtap="btnTapHander" data-info="{{2}}">按钮</button>
<input value="{{msg}}" bindinput="iptHander"></input>
条件渲染
- 具体用例:
<view wx:if="{{ type === 1}}"> 男 </view>
<view wx:elif="{{ type === 2 }}"> 女 </view>
<view wx:else> 不明 </view>
<block wx:if="{{true}}">
<view>1</view>
<view>2</view>
<view>3</view>
</block>
<view hidden="{{ condition }}">显示隐藏</view>
列表渲染
- 索引的默认名是index
- 项的默认名是item
- 每一项的key值最好要有,可以提升渲染效率
- 具体用例:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" wx:key="id">
索引是:{{idx}} 项中的内容是:{{itemName.name}}
</view>
// .js文件中
Page({
data:{
array:[
{ id: 1, name: 'red' },
{ id: 2, name: 'green' },
{ id: 3, name: 'blue' },
]
}
})
WXSS模板样式
rpx
- rpx把所有设备的屏幕,在宽度上等分为750份
import
- wxss支持样式导入
- 具体用例:
@import "common.wxss";
全局配置
常用配置项
- pages
- window
- tabBar:设置小程序底部的tabBar效果
- style
window
- 常用配置:
属性名 | 类型 | 默认值 | 说明 |
---|
navigationBarTitleText | String | 字符串 | 导航栏标题文字内容 |
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 |
navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持black/white |
backgroundColor | HexColor | #ffffff | 窗口的背景色 |
backgroundTextStyle | String | dark | 下拉loading的样式,仅支持dark/light |
enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新 |
onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为px |
tabBar
- 通常分为底部tabBar和顶部tabBar
- tabBar中只能配置最少2个,最多5个tab页签
- 当渲染顶部tabBar是,不显示icon,只显示文本
- tabBar节点的配置项:
属性 | 类型 | 必填 | 默认值 | 描述 |
---|
position | String | 否 | bottom | tabBar的位置,black/white |
borderStyle | String | 否 | black | tabBar上边框颜色,black/white |
color | HexColor | 否 | | tab上文字的默认颜色 |
selectedColor | HexColor | 否 | | tab上文字的选中颜色 |
backgroundColor | HexColor | 否 | | tabBar的背景色 |
list | Array | 是 | | tab页签的列表,最少2个,最多5个 |
- 每个tab项的配置选项
属性 | 类型 | 必填 | 描述 |
---|
pagePath | String | 是 | 页面路径 |
text | String | 是 | tab上显示的文字 |
iconPath | String | 否 | 未选中时的路径 |
selectedIconPath | String | 否 | 选中时的路径 |
- 具体用例:
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/test/index"
],
"tabBar":{
"list":[{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"/images/tabs/home.png",
"selectedIconPath":"/images/tabs/home-active.png"
},{
"pagePath":"pages/logs/logs",
"text":"日志",
"iconPath":"/images/tabs/log.png",
"selectedIconPath":"/images/tabs/log-active.png"
},{
"pagePath":"pages/test/index",
"text":"测试",
"iconPath":"/images/tabs/test.png",
"selectedIconPath":"/images/tabs/test-active.png"
}]
}
}
页面配置
- 配置项跟全局配置的是一样的
网络数据请求
- 处于安全性方面的考虑,小程序对数据接口的请求做出了如下两个限制:
- 只能请求HTTPS类型的接口
- 必须将接口的域名添加到信任列表中
- 但是在开发的时候可以申请暂停以上两个限制
- 配置request合法域名
- 在小程序管理后台中进行request合法域名的配置
- 域名只支持https协议
- 域名不能使用IP地址或localhost
- 域名必须经过ICP备案
- 服务器域名一个月内最多可申请5次修改
- 发送请求
wx.request({
// 请求的接口地址
url: 'https://www.escook.cn/api/get',
// 请求方式 GET POST ...
method: 'GET',
data:{
name: 'xiaoming',
age: 22
},
// 请求成功的回调函数
success: (res) => {
console.log(res)
}
})
- 在页面刚加载时请求数据
// .js文件中 生命周期函数--监听页面加载
onLoad: function(options) {
// getSwiperList 和 getGridList是事先定义好的请求函数
this.getSwiperList()
this.getGridList()
},
-
跳过request合法域名校验(仅限开发与调试阶段)
- 可以临时开启[开发环境不校验请求域名、TLS版本及HTTPS证书]选项,跳过request合法域名的校验
-
因为微信小程序的宿主是微信,所以没有跨域问题,且称“Ajax”为“网络数据请求”。
视图与逻辑
页面导航
声明式导航
- 通过点击导航组件进行导航
- 导航到tabBar页面:url指定页面地址(以/开头),**open-type=“switchTab”**表示跳转方式,不可省略
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
- 导航到非tabBar页面:url指定页面地址(以/开头),**open-type=“navigate”**表示跳转方式,可省略
<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>
- 后退导航,open-type=“navigateBack”,delta=“<数字>”,默认后退一层
<navigator open-type="navigateBack" delta="2">返回两页</navigator>
- 传递参数:url后面可以携带参数,方式是:?分隔参数与路径,键值用=相连,不同参数用&分隔
<navigator url="/pages/info/info?name=kkt&age=20" open-type="navigate">导航到info页面</navigator>
编程式导航
- 导航到tabBar页面:调用wx.switchTab(Obiect object)方法即可,Object参数对象如下:
属性 | 类型 | 是否必选 | 说明 |
---|
url | string | 是 | 跳转路径 |
success | function | 否 | 成功回调 |
fail | function | 否 | 失败回调 |
complete | function | 否 | 结束回调 |
// 页面结构
<button bindtap="gotoMeaasge">跳转到消息页面</button>
// 编程式导航
gotoMeaasge() {
wx.switchTab({
url:'pages/message/message'
})
}
- 导航到非tabBar页面:调用wx.navigateTo(Object object)方法即可,Object参数对象如下:
属性 | 类型 | 是否必选 | 说明 |
---|
url | string | 是 | 跳转路径 |
success | function | 否 | 成功回调 |
fail | function | 否 | 失败回调 |
complete | function | 否 | 结束回调 |
// 页面结构
<button bindtap="gotoInfo">跳转到info页面</button>
// 编程式导航
gotoInfo() {
wx.navigateTo({
url:'pages/info/info'
})
}
- 后退导航:调用wx.navigateBack(Object object)方法即可,Object参数对象如下:
属性 | 类型 | 是否必选 | 说明 |
---|
delta | number | 否(默认值为1) | 返回的页数,若delta大于现有的页数,则返回到首页 |
success | function | 否 | 成功回调 |
fail | function | 否 | 失败回调 |
complete | function | 否 | 结束回调 |
// 页面结构
<button bindtap="gotoBack">后退</button>
// 编程式导航
gotoBack() {
wx.navigateBack()
}
- 传递参数:url后面可以携带参数,方式是:?分隔参数与路径,键值用=相连,不同参数用&分隔
// 页面结构
<button bindtap="gotoInfo">跳转到info页面</button>
// 编程式导航
gotoInfo() {
wx.navigateTo({
url:'pages/info/info?name=kkt&age=20'
})
}
获取参数
- 在onLoad中接受导航参数
/**
* 生命周期函数--监听页面函数
*/
onLoad:function(option) {
// option就是传递过来的参数
}
页面事件
下拉刷新
- 下拉刷新的开启方式与样式可以看前面的
- 监听页面的下拉刷新事件:在页面的.js文件中,onPullDownRefresh()函数用于监听下拉刷新
- 停止下拉刷新:下拉刷新的效果得主动停止,否则不会主动停止的,调用wx.stopPullDownRefresh()即可手动停止
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function(){
// TO DO
// 处理完事件后 手动停止下拉刷新
wx.stopPullDownRefresh();
}
上拉触底事件
- 在页面的.js文件中,通过onReachBottom()函数即可监听当前页面的上拉触底事件
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function(){
// TO DO 因为不断上拉就会不断触发 建议在增加节流操作
}
- 配置上拉触底距离:
- 上拉触底距离指的是触发上拉触底事件时,滚动条距离页面底部的距离;
- 可以在全集或页面的.json配置文件中,通过onReachBottomDistance属性来配置
- 默认是50px
- 添加loading提示效果:
- wx.showLoading({title: ‘数据加载中…’}) 此方法开启loading提示效果,title是提示文本
- wx.hideLoading() 隐藏提示效果
- 节流处理
生命周期
- 应用生命周期函数:需要在app.js中声明
// app.js文件
App({
// 小程序初始化完成时,实行此函数,全局只触发一次,可以完成一些初始化的工作
onLaunch: function(options){},
//小程序启动,或从后台进入前台显示时触发
onShow: function(options){},
// 小程序从前台进入后台时触发
onHide: function(){}
})
- 页面的生命周期函数:需要在页面的.js文件中进行声明
// 页面.js文件
Page({
onLoad: function(options){}, // 监听页面加载,一个页面只调用1次
onShow: function( ){}, // 监听页面显示
onReady: function(){}, // 监听页面初次渲染完成,一个页面只调用1次
onHide: function(){}, // 监听页面隐藏
onUnload: function(){} // 监听页面卸载,一个页面只调用1次
})
WXS脚本
概念与应用场景
WXS(WeiXin Script)是小程序独有的一套脚本语言。因为wxml中无法调用在页面的.js中定义的函数,且wxml中可以调用wxs中定义的函数,所以wxs的典型应用场景是“过滤器”
语法
wxs类似于JavaScript,但是有以下几个不同之处:
- wxs的数据类型:number(数值)、strig(字符串)、boolean(布尔类型)、object(对象类型)、function(函数类型)、array(数组类型)、date(日期类型)、regexp(正则)
- wxs不支持ES6以上的语法形式:不支持let、const、解构赋值、展开运算符、箭头函数、对象属性简写…
- 遵循CommomJs规范:module对象、require()函数、module.exports对象
使用方法(有点类似于nodejs,用来写工具)
- 使用方法类似于
<view>{{m1.toUpper(username)}}</view>
<wxs module="m1">
module.exports.toUpper = function(str){
return str.toUpperCase()
}
</wxs>
function toLower(str){
return str.toLowerCase()
}
module.exports = {
toLower: toLower
}
<view>{{m2.toLower(country)}}</view>
<wxs src="../../utils/tools.wxs" module="m2"></wxs>
注意事项
- wxs不能调用js中定义的函数
- wxs不能调用小程序提供的api
自定义组件
创建&使用
- 在任意一个文件夹上右键就会看到“新建Component”这个选项,点击就会在该文件夹下面自动生成指定名称的.wxml、.wxss、.js、.json文件
- 局部引用&&全局引用:区别仅在于在哪里引入组件,在app.json中引入的是全局组件,在页面的.json问价中引入的是局部引用
{
"usingComponents":{
"test": "/components/test/test"
}
}
<test></test>
- 注意事项:组件的事件处理函数需要定义到methods结点中(methods是在组件文件夹下面的.js文件中的),自定义方法建议以“_”开头
样式隔离
- 默认情况下class选择器会有样式隔离效果,组件内外互不干扰(id选择器、属性选择器、标签选择器没有)
- 隔离效果可以人工干预,通过修改组件的.js文件或者.json文件中的styleIsolation
- styleIsolation的可选值
可选值 | 默认值 | 描述 |
---|
isolated | 是 | 启用样式隔离,class指定的样式不会相互影响 |
apply-shared | 否 | 页面wxss的class样式可以影响到自定义组件 |
shared | 否 | 页面wxss的class样式影响到自定义组件,自定义组件的wxss的class样式也会影响到页面或者其他不是isolated的自定义组件 |
Component({
options: {
styleIsolation: 'isolated',
}
})
{
"styleIsolation": "isolated",
}
properties属性
- 用来接收外界传递到组件中的数据(父传子)
- 但是properties跟data是本质上相同的,且都是可读可写的,用全等符号来他们都是一样的
数据监听器
- 作用:监听和相应任何属性和数据字段的变化,从而执行特定的操作
- 基本用法:
Component({
observer: {
'字段A, 字段B': function(字段A的新值,字段B的新值){
}
}
})
纯数据字段
- 不用于界面渲染的data字段
- 适用对象:那些既不会展示在界面上,又不会传递给其他组件的数据适合被设置为纯数据字段
- 好处:有助于提升页面更新性能
- 使用规则:
Component({
options: {
pureDataPattern: /^_/
},
datd: {
a: true,
_a: true,
}
})
组件的生命周期
组件的生命周期函数
- created(组件实例刚刚被创建):还不能调用setData
- attached(组件实例进入页面节点树):this.data已被初始化完毕
- ready(组件在视图层布局完成)
- moved(组件实例被移动到节点树的另一个位置)
- detached(组件实例被从页面节点树移除):适合做一些清理操作
- error(组件方法抛出错误)
生命周期函数定义在哪里
- 生命周期函数可以在组件的.js文件中的lifetimes字段内进行声明
- 组件所在页面的生命周期函数,需要定义在pageLifetimes节点中
- 什么是组件所在页面的生命周期:自定义组件的行为依赖于页面状态的变化时,就需要用到组件所在页面的生命周期函数
生命周期函数 | 参数 | 描述 |
---|
show | 无 | 组件所在的页面被展示时执行 |
hide | 无 | 组件所在的页面被隐藏时执行 |
resize | Object Size | 组件所在的页面尺寸变化时执行 |
Component({
Lifetimes: {
attacthed() {},
detached() {},
},
pageLifetimes: {
show: function() {},
hide: function() {},
resize: function() {},
}
})
插槽
- 插槽用于承载组件使用者提供的wxml结构。默认为单个插槽,可以开启多个插槽。
- 单个插槽:
<view>
<view>组件内部</view>
<slot></slot>
</view>
<component-tag-name>
<view>这一部分内容将会被放到组件内部的slot节点中</view>
</component-tag-name>
- 多个插槽:
Component({
options: {
multipleSlots: true
},
})
<view>
<view>组件内部</view>
<slot name="before"></slot>
<slot name="after"></slot>
</view>
<component-tag-name>
<view slot="after">这一部分内容将会被放到name为after的slot节点中</view>
<view slot="before">这一部分内容将会被放到name为before的slot节点中</view>
</component-tag-name>
父子组件间通信
属性绑定
- 父向子传递“JSON兼容”的数据,传不了方法
// 父组件的.js文件
data: {
count: 0
}
// 父组件的wxml文件
<test count="{{count}}"></test>
// 子组件的.js文件
proprtties: {
count: Number
}
// 子组件的.wxml文件
<text>{{count}}</text>
事件绑定
- 子向父传递任意数据
- 实现步骤如下:
- 在父组件的.js文件中,定义一个函数,这个函数将传递给子组件
- 在父组件的wxml中,通过自定义事件的形式,进行函数传递
- 在子组件的.js文件中,通过调用this.triggerEvent(‘自定义事件名称’,{/参数对象/}),将数据发送到父组件
- 在父组件的.js文件中,通过e.deatil获取子组件传递过来的数据
// 在父组件的.js文件中定义一个函数 通过e.detail来进行接收
syncCount(e) {
console.log(e.detail);
}
// 在父组件的wxml中使用如下结构传递函数 bind:自定义事件名称="要传递的函数名称"
<test count="{{count}}" bind:sync="syncCount"></test>
// 在子组件的.js文件中,通过this.triggerEvent('自定义事件',{/*参数对象*/})来发送数据至父组件
method: {
addCount() {
this.triggerEvent('sync',{value: this.properties.count})
}
}
获取组件实例
- 父通过this.selectComponent(‘id或class选择器’)获取子组件实例对象,从而访问子组件的任意数据和方法
// wxml文件中
<test class="custom"></test>
// js文件中
const child = this,selectComponent('.custom');
console.log(child);
behavior
- 本质是代码的封装共享
- 每个behavior可以包含一组属性、数据、生命周期函数和方法
- 创建behavior,调用Behavior(Object object)方法即可, module.exports将behavior共享出去
- 导入并使用:使用require导入,挂载后即可生效
- 同名字段的覆盖和组合规则:参考官网
// 单独的js文件中 例:behaviors文件夹下的my-behavior.js文件
module.exports = Behavior({
properties: {},
data: {},
methods :{},
})
// 某组件的js文件中
const myBehavior = require("../../behaviors/my-behavior");
Component({
// 挂载
behaviors: [myBehavior],
// ...
})
Vant Weapp
- 具体用法参考官网,不难,但是要小心
全局数据共享
- 也叫状态管理,为了解决组件之间的数据共享问题
- mobx官方地址在这里:https://github.com/wechat-miniprogram/mobx-miniprogram-bindings,引入mobx包什么的看文档就好了
// store文件夹下的store.js文件中
import { observable, action } from 'mobx-miniprogram'
export const atore = observable({
// 数据字段
numA: 1,
numB: 2,
// 计算属性 形式:get 函数名
get Sum() {
return this.numA + this.numB
},
// actions方法 store中的数据仅能用action方法来进行修改 形式:函数名 action(fun)
updateNum1: action(function(step) {
this.numA += step
}),
updateNum2: action(function(step) {
this.numB += step
}),
})
// 页面的wxml结构 wxml结构中数据的获取使用改变参考前面的就好 一样的
// 因为是状态管理 所以变量都是实时更新的
// 某页面的js文件
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
Page({
onLoad: function() {
// 固定用法 field里面放数据 actions里面放方法
// 这样做了之后 数据跟方法都已经是引出来了 可以直接在wxml文件中使用
this.storeBindings = createStoreBindings(this, {
// 数据源
store,
// 计算属性 字段
fields: ['numA', 'numB', 'sum'],
// 方法
actions: ['updateNum1']
})
},
onUnload:function() {
// 页面卸载时销毁storeBindings
this.storeBindings.destroyStoreBindings()
}
})
// 某组件的js文件
import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
import { store } from "./store";
Component({
// 在组件里面是要用behaviors的
behaviors: [storeBindingsBehavior],
storeBindings: {
// 数据源
store,
// 数据字段 计算属性 左边是自己定义的名字 右边是引用store中的数据 方式有三种 都行的
fields: {
numA: () => store.numA,
numB: (store) => store.numB,
sum: "sum",
},
// action方法 左边是自己定义的名字 右边是store中的方法 这样之后就是指向同一个方法了
actions: {
buttonTap: "update",
},
},
});
分包
- 分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需加载
- 优点:优化小程序首次启动的下载时间,在多团队开发时可以更好地解耦操作
- 分包后项目构成:1个主包+多个分包
- 主包:包含项目启动页面和TabBar页面,以及公共资源
- 分包:有关页面、私有资源
- 分包体积限制:
- 整个小程序不超过16M
- 单个包不能超过2M
// app.json文件中
{
"pages":[
"pages/index",
"pages/logs"
],
// 这一项是配置分包的
"subpackages": [
{
"root": "packageA",
"pages": [
"pages/cat",
"pages/dog"
]
}, {
"root": "packageB",
"name": "pack2",
"pages": [
"pages/apple",
"pages/banana"
]
}
]
}