1.分包
分包目的在于提高小程序的体积，多一个包就多2M，最多20M
常规的分包：
小程序一打开首先加载主包，然后再加载分包
分包可以用主包内的资源，主包不可以使用分包的资源
分包A不可以使用分包B里面的内容
分包可以使用app.wxss里面的全局样式
举例：
主页面wxml内容：
<button bindtap="go">点我跳转</button>
<wxs src="/tools/tools.wxs" module="tools"></wxs>
<view>{{tools.str('vue','react')}}</view>
<view>{{tools.price(50)}}</view>
JS内容：
go(){
wx.navigateTo({
url: '/packageA/pages/cat/cat',
})
},
工具tools内容：
/* 不支持日期对象 */
function str(str1,str2){
return str1 + str2
}
function price(num){
return '$'+num+'.00'
}
module.exports = {
str:str,
price:price
}
效果：
2.async和await、Loding加载项：
在上次一张内容里面 把之前的promise 改成async 和await，增加Loding加载项
其他内容不变直接上JS内容：
// pages/home/home.js
const { indexHttp } = require('../../http/api')
const { http } = require('../../http/http')
Page({
/**
* 页面的初始数据
*/
data: {
slides:[],
itemList:[],
page:1,
isloding:true
},
/**
* 生命周期函数--监听页面加载
*/
onLoad:async function (options) {
/* indexHttp('/api/index',{},'GET')
.then(res=>{
let {slides,goods:{data}} =res;
this.setData({slides,itemList:data})
})
.catch(err=>{
console.log(err);
}) */
if(this.data.isloding)return this.init();
},
async init(){
try{
this.setData({
isloding:false
})
wx.showLoading({
title: '正在加载中',
})
let {slides,goods:{data}} = await indexHttp('/api/index',{
page:this.data.page
},'GET')
/* 下拉刷新的时候需要把数组中原来的内容清空 */
if(this.data.page==1){
this.data.itemList = [];
}
this.setData({
slides,
/* 解构赋值 把老数组和新数组解构 并组合成一个完整的新数组 */
// itemList:[...this.data.itemList,...data]
itemList:this.data.itemList.concat(data)
})
wx.hideLoading()
this.setData({
isloding:true
})
}catch(err){
console.log('页面被外星人抓走了',err)
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
/* 下拉刷新的时候默认显示第一页 */
this.data.page = 1;
this.init();
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
this.data.page++;
this.init();
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
效果图：
