目录
1.使用npm包
小程序对npm的支持和限制
使用vant组件
使用CSS变量定制主题样式
API的promise化
2.全局数据共享
小程序中的全局数据共享方案
安装MobX相关的包
创建MobX的store实例
将Store中的成员绑定到页面中
在页面上使用Store中的成员
将Store中的成员绑定到组件中
3.分包
分包的项目构成
分包的加载规则
分包的基本用法
打包原则和引用原则
独立分包
独立分包和分包的区别
独立分包的特点
引用原则
分包预下载
4.tabbar案例
初步实现自定义的tabbar效果
渲染tabBar上面的数字徽标
实现tabBar的切换效果
1.使用npm包
小程序对npm的支持和限制
使用vant组件
在app.json的usingComponents节点中引入想使用的组件,如按钮等,然后在wxml页面中使用<van-button></van-button>标签
使用CSS变量定制主题样式
在html文件中,为了方便修改样式,可以设置一个全局变量,在想用的地方进行引用,修改的时候也较为方便,在根节点处进行引用,也就是css中的html{}中
在wxss文件中,也要在根节点中设置全局变量,就是在page{}中设置,注意全局变量的前面都带有两个减号
API的promise化
小程序官方提供的异步API都是基于回调函数实现的,容易造成回调地狱的问题,代码可读性差、维护性差
API的promise化是通过额外的配置,将官方提供的、基于回调函数的异步API,改造为基于Promise的异步API,提高代码的可读性、维护性
在app.js文件中,只需调用一次promisfyAll()方法,如下图所示
2.全局数据共享
小程序中的全局数据共享方案
mobx-miniprogram 创建Store实例对象
mobx-miniprogram-bindings 把Store中的共享数据或方法,绑定到组件或页面中使用
安装MobX相关的包
创建MobX的store实例
使用mobx-miniprogram,并引入observable包,其中action是其中的一个方法
在下面的例子中,用一个新的变量来接数据,并使用了get方法返回二者之和;之后调用了action方法,修改store中的数据
将Store中的成员绑定到页面中
现在页面中导入store方法
import{createStoreBindings} from 'mobx-miniprogram-bindings'
import{store}from'../../store/store'
在onLoad函数中使用fileds这个数组来接收数据,使用actions方法来调用函数
在页面上使用Store中的成员
将Store中的成员绑定到组件中
3.分包
分包的项目构成
主包:一般只包含项目的启动页面或者TabBar页面、以及所有分包都需要用到的一些公共资源
分包:只包含和当前分包有关的页面和私有资源
分包的加载规则
在启动小程序时,默认会下载主包并启动主包内界面,tabBar页面需要放到主包中
用户进入分包内某个界面时,客户端会把对应分包下载下来,下载完成后再进行展示;非tabBar页面可以按照功能的不同,划分为不同的分包之后,进行按需下载
小程序的分包大小:整个小程序的分包大小不超过16M(主包+所有分包);单个分包/主包不超过2M
分包的基本用法
在app.json文件中,使用subpackages来放置,root后面是主包的名字,还可以用name来给主包简写,每个主包下面还可以有多个页面表示分包
打包原则和引用原则
打包原则
tabBar页面必须在主包里,分包之间不能嵌套
引用原则
- 主包无法引用分包内的私有资源
- 分包之间不能相互引用私有资源
- 分包可以引用主包内的公共资源
独立分包
独立分包和分包的区别
独立分包可以在不下载主包的情况下,独立运行
独立分包的特点
一个主包可以有多个独立分包,独立分包的不同之处在于它有属性independent:true
引用原则
独立分包和普通分包以及主包之间是相互隔绝的,不能相互引用彼此的资源
格外注意的是:独立分包不能引用主包内的公共资源
分包预下载
在app.json文件中,使用preloadRule节点定义分包的预下载规则,其中第一行放置页面路径,packages指定预下载哪些分包,network指定在哪种网络下进行预下载
分包预下载的限制:同一个分包中的页面享有共同的预下载大小限制是2M
4.tabbar案例
初步实现自定义的tabbar效果
首先,创建一个custom-tab-bar文件夹,在文件夹中创建一个组件inde;x在app.json文件下的usingComponents方法中加上"van-tabbar":"@vant/weapp/tabbar/index" 和 "van-tabbar-item":"@vant/weapp/tabbar-item/index",并在tabBar中的list前面添加上custom:true
之后,在index.js文件中的data数据中复制list中的全部数据;在index.wxml文件中,通过使用wx:for循环来获得list中的所有数据,在自定义图标中,使用slot="icon"表示为未选中的图标,而slot="icon-active"表示选中的图标,将对应的图标路径放在后面,在放置完图标后可以直接写图标名字item.text
渲染tabBar上面的数字徽标
在自定义图标时,发现图标与文字之间的距离过大,导致徽标出线,这时可以修改wxss的全局样式,不过要先在js文件的Component函数中写一个options方法,其中放置styleIsolation:"shared"函数,之后再去修改全局样式
实现数字徽标的自动呈现,需要以下几步:
首先,是全局数据共享,调用了前面的store文件,所以先在index.js文件中导入store文件,并在Component函数中与data齐步的位置放置behaviors函数,之后就调用storeBindings函数来接收数据;通过监听器,来判断数据是否有变化,并在该步骤将数据赋值给对应的图标
然后,在index.wxml文件中使用三元判断,来对列表中的元素info值是否为空进行判断,不为空则进行显示item.info info="{{item.info ? item.info : ' '}}"
实现tabBar的切换效果
首先,将数据放置在store.js文件中,定义activeTabBarIndex为0,再使用updateActiveTabBarIndex方法接收数据
之后,在index.js文件中使用wx.switch()转换方法实现转换,这里用的是根路径,所以要修改list中的路径,在前面都加上/
使用active-color来修改选中文本的颜色