微信小程序整理

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、微信小程序的优劣势

优势：

1. 无需下载、体积小、开发成本低
2. 打开速度快，用户体验好
3. 安卓上可以添加到桌面，和原生app差不多
4. 更高的安全保障，因为小程序的发布需要通过微信端的层层审核，平台信息更靠谱

劣势：
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事件（用来放$emit、$broadcast、$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官方文档
微信小程序面试基础知识