微信小程序开发优化经验总结

开篇

写了快两年小程序，没有研究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();
      };
    }
复制代码

框架推荐

• wxpage 极其轻量的微信小程序开发框架
• fundebug 监控上报
• wxRequest 请求封装
• TS版本 请求WeRequest

参考连接

• 微店程序员的小程序优化建议
• 【深度好文】我在作前端构建过程当中的思考

结语

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