1、分包加载
什么是分包加载?
当小程序打包的时候,不一定只能打一个包,可以根据功能需求,拆分成几个小包。当需要某个功能的时候,才去加载对应的包。
优点:
对用户来说,首次下载时先加载小程序的主包;当进入某个分包的页面时,才去加载分包;优化了首次进入小程序的时间,提升了用户体验
对开发者来说,可以有更大的开发体积,承载更多的功能。
注意事项:
1、分包一般根据功能划分,将公共的业务逻辑和组件提取到主包后, 独立的功能可以拆分为小包,但每个小包的总量不能超过2m,且总包容量不能超过4m
2、 对于老版本的微信客户端下,是依然采取整包加载的方式加载的,所以尽量控制代码包的大小。
3、在 app.json文件中subPackages字段声明项目分包结构
2、提高微信小程序的应用速度
1、模块组件、提取公共方法
2、优化业务逻辑、减少不必要的data渲染交互
3、分包加载,提升用户体验
4、预测用户行为
5、静态资源上传云服务器
3、微信小程序原理
JavaScript:js逻辑运行在微信app中,并非浏览器中;所以很多功能逻辑需要微信APP的API的支持;
WXML:微信基于XML开发的,所以只能使用微信提供的现有标签,常规的html标签大多都不支持;
WXSS:支持大多数css,但并不是全部支持,1px=2rpx的单位换算,自动适配各屏幕宽度;
微信架构:数据驱动,视图和数据分开,数据驱动视图更新。
微信小程序主要分为两个部分webview和appService,webview负责展示UI,appservice负责业务逻辑的处理,系统层JSBridge实现通信,UI的渲染、事件的处理
4、微信小程序的优劣势
优势:
- 无需下载、体积小、开发成本低
- 打开速度快,用户体验好
- 安卓上可以添加到桌面,和原生app差不多
- 更高的安全保障,因为小程序的发布需要通过微信端的层层审核,平台信息更靠谱
劣势:
1、依托于微信,限制较多,无法开发管理类后台应用
2、推广受限
3、样式单一,固定的tabbar风格
5、原生小程序、wepy框架、vue框架
wepy框架是腾讯团队借鉴vue框架,结合原生微信小程序封装的一个mvvm结构的框架
wepy与原生小程序的区别:
1、数据获取方式不一样:
(1)原生小程序的数据绑定方式:
通过Page提供的setData方法来绑定数据,因为小程序架构本身原因,页面渲染层和JS逻辑层分开的,setData操作实际就是JS逻辑层与页面渲染层之间的通信,那么如果在同一次运行周期内多次执行setData操作时,那么通信的次数增加、页面性能降低。
(2)WePY数据绑定方式:
WePY使用脏数据检查对setData进行封装,在函数运行周期结束时执行脏数据检查,一来可以不用关心页面多次setData是否会有性能上的问题,二来可以更加简洁去修改数据实现绑定,不用重复去写setData方法。
需注意的是,在异步函数中更新数据的时候,必须手动调用$apply方法,才会触发脏数据检查流程的运行。
2、原生 wx.request 需要自己封装异步方法,wepy框架中已完成对 wx.request 的异步封装,可直接使用 async/await 的方式
// 原生代码:
wx.request({
url: 'xxx',
success: function (data) {
console.log(data);
}
});
// WePY 使用方式, 需要开启 Promise 支持,参考开发规范章节
wepy.request('xxxx').then((d) => console.log(d));
// async/await 的使用方式, 需要开启 Promise 和 async/await 支持,参考 WIKI
async function request () {
let d = await wepy.request('xxxxx');
console.log(d);
}
3、 wx.request 接收参数不一样:
// 原生的事件传参方式:
<view data-id="{{index}}" data-title="wepy" data-other="otherparams" bindtap="tapName"> Click me! </view>
Page({
tapName: function (event) {
console.log(event.currentTarget.dataset.id)// output: 1
console.log(event.currentTarget.dataset.title)// output: wepy
console.log(event.currentTarget.dataset.other)// output: otherparams
}
});
// WePY 1.1.8以后的版本,只允许传string。
<view @tap="tapName({{index}}, 'wepy', 'otherparams')"> Click me! </view>
methods: {
tapName (id, title, other, event) {
console.log(id, title, other)// output: 1, wepy, otherparams
}
}
4、 组件代替模板和模块
// 原生代码:
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
<!-- index.wxml -->
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
<!-- index.js -->
var item = require('item.js')
// WePY
<!-- /components/item.wpy -->
<text>{{text}}</text>
<!-- index.wpy -->
<template>
<com></com>
</template>
<script>
import wepy from 'wepy';
import Item from '../components/item';
export default class Index extends wepy.page {
components = { com: Item }
}
</script>
5、wx:for 与 repeat组件
当需要循环渲染WePY组件时(类似于通过wx:for循环渲染原生的wxml标签),必须使用WePY定义的辅助标签
<repeat>
><template>
<!-- 注意,使用for属性,而不是使用wx:for属性 -->
<repeat for="{{list}}" key="index" index="index" item="item">
<!-- 插入<script>脚本部分所声明的child组件,同时传入item -->
<child :item="item"></child>
</repeat>
</template>
<script>
import wepy from 'wepy';
// 引入child组件文件
import Child from '../components/child';
export default class Index extends wepy.page {
components = {
// 声明页面中要使用到的Child组件的ID为child
child: Child
}
data = {
list: [{id: 1, title: 'title1'}, {id: 2, title: 'title2'}]
}
}
</script>
WePY 1.x 版本中,组件使用的是静态编译组件,即组件是在编译阶段编译进页面的,每个组件都是唯一的一个实例,目前只提供简单的repeat 支持。
不支持在 repeat 的组件中去使用 props, computed, watch 等等特性。
可以用$broadcast、$emit、$invoke
的方式传值,避免使用props,造成莫名bug。
wepy与vue区别:
1、文件后缀不同(.wpy、.vue), 基于语言不同, 使用环境不同
2、混入mixin 方法和页面方法,响应的先后顺序不同。在wepy框架中page页面响应后,再响应mixin里的方法。(vue完全相反)
3、wepy中非dom结构上绑定的方法(自定义方法)需要放在methods对象外,customMethods对象内
4、wepy新增 events事件(用来放
e
m
i
t
、
emit、
emit、broadcast、
i
n
v
o
k
等
组
件
间
响
应
的
事
件
方
法
)
5
、
生
命
周
期
函
数
有
区
别
,
w
e
p
y
中
p
a
g
e
与
组
件
公
用
o
n
l
o
a
d
方
法
,
其
它
o
n
S
h
o
w
、
o
n
H
i
d
e
、
o
n
R
e
a
d
y
等
是
p
a
g
e
私
有
的
钩
子
函
数
。
6
、
w
e
p
y
中
提
供
o
n
P
u
l
l
D
o
w
n
、
o
n
T
a
b
S
w
i
t
c
h
、
o
n
S
c
r
o
l
l
、
o
n
T
o
u
c
h
B
o
t
t
o
m
、
o
n
S
h
a
r
e
M
e
n
u
等
方
法
7
、
属
性
写
法
不
一
样
,
w
x
:
i
f
、
v
−
i
f
、
v
−
f
o
r
等
,
更
新
视
图
的
写
法
不
一
样
,
t
h
i
s
.
t
i
t
l
e
、
t
h
i
s
.
invok等组件间响应的事件方法) 5、生命周期函数有区别,wepy中 page与组件公用 onload 方法,其它onShow、onHide、onReady等是page私有的钩子函数。 6、wepy中提供onPullDown、onTabSwitch、onScroll、onTouchBottom、onShareMenu等方法 7、属性写法不一样,wx:if 、 v-if、v-for 等,更新视图的写法不一样,this.title、this.
invok等组件间响应的事件方法)5、生命周期函数有区别,wepy中page与组件公用onload方法,其它onShow、onHide、onReady等是page私有的钩子函数。6、wepy中提供onPullDown、onTabSwitch、onScroll、onTouchBottom、onShareMenu等方法7、属性写法不一样,wx:if、v−if、v−for等,更新视图的写法不一样,this.title、this.apply()
8、支持 wxs 语法,但语法与原生 wxs 稍有出入。css单位不一样 1px = 2rpx
9、WePY提供的全局interceptor拦截器对原生API的请求进行拦截
–未完待续–
参考文献:
wepy官方文档
微信小程序面试基础知识