微信小程序开发优化经验总结写了快两年小程序，没有研究nw.js内核原理，没有去hack小程序内层实现，只是讲讲开发经验，

开篇

写了快两年小程序，没有研究nw.js内核原理，没有去hack小程序内层实现，只是讲讲开发经验，毕竟小程序和现代开发体验差了一截，很多浏览器上的h5熟悉开发流程到小程序总是束手束脚，除了介绍自己的经验，也会附上几篇不错的参考链接。本文主要基于原生开发体验优化，webpy之类的请忽略。（为啥不用框架，没必要。）

正文

样式布局

图标字体文件使用阿里iconfont
全局通用样式文件引入配合蓝狐能够实现快速开发页面

<!--app.wxss文件-->
@import './margin.wxss';
@import './color.wxss';
@import './font.wxss';
@import './layout.wxss';
@import './btn.wxss';
@import './price.wxss';
@import './line.wxss';
@import './ignore.wxss';

<!--index.wxml-->
<view class="ft14 c9">xxx</view>

推荐引入 async/await

//需要用到的页面使用方法
const regeneratorRuntime = require("regenerator-runtime");

####性能优化

setData 可以通过某个key更新

<!--减少渲染图层和逻辑图层通信的数据量-->
this.setData({
    data[0]:'xxx'
})

图片 | dom 懒加载 IntersectionObserver (data-lazy字段不太好用，因为会一次性加载3屏图片)
首屏优化
- 精简dom
- 懒加载
- 接口层的数据精简、前端制作渲染工作
- 上cdn
有条件上TS

使用优化

组件调用page 通过hack getCurrentPage函数找到当前Page类

<!--component.js-->
    __pageFunc(api, cb) {
      const originPage = getCurPage();
      const oriApi = originPage[api];
      originPage[api] = mixOpts => {
        oriApi.call(originPage, mixOpts);
        console.log('--- mix Comp ---', api, mixOpts);
        cb && cb();
      };
    }

框架推荐

参考链接

结语

一年前入手小程序开发时候实在是吐槽的不行，不过这都不影响它的使用效果和推广。小程序提供的api能够让h5达到接近原生的体验，以及便利性。我想这也是小程序不管是开发者还是用户都能够很容易就接受它的原因。