小程序原生框架

如何选择原生和第三方框架

• 性能表现：框架的二次封装比原生直接写性能反而更好，除非自行在原生基础上优化
• 复杂程度：相对自由度更低，越是底层的应用越需要进行设计和时间打磨，这取决于后续项目规划，需要平衡开发周期和项目属性。
• 多平台开发：兼容代码调试周期长，项目业务简单且不依赖原生的特有的属性，会出现原生更新特性后需要时间调试，类似安卓内核升级
• 技术表现：H5多端运行框架，如：uniapp、taro运行UI-View嵌入原生的壳中，功能有所阉割

框架	技术栈	微信小程序	H5	App	支付宝/百度小程序
Taro	React/Vue	✅	✅	✅	✅
uni-app	Vue	✅	✅	✅	✅
WePY	Vue	✅	❌	❌	❌
mpvue	Vue	✅	✅	❌	❌

跨端开发框架深度横评之2020版

小程序原生框架各页面关系

• JS模版：每个页面包含四个文件：.js .json .wxml .wxss
• 项目全局配置在app.js与app.json

.
├── index.js	//页面的主要函数存放，可使用ts
├── index.json //配置组件、导航栏、标签栏等
├── index.wxml //xml页面，含有微信
└── index.wxss

App.js与Utils的区别

• App一般使用官方提供的API
• Utils使用自行封装的函数，属于业界内的规范可不遵守

小程序Pages生命周期

每一个页面都有对应的生命周期，app.js是所有page的父节点，啃码的时候可反复咀嚼官方提供的图

TS+SASS项目

• TS+Sass项目（最新版开发工具已支持）与原有的js差别不大
• 相比旧版项目内只需要创建 ts 文件即可，无需再生成同名的 js 文件。less / sass文件同理

TS+Sass项目目录

• 以TS+Sass为例，新建项目时可选择创建TS+Sass

.
├── app.json
├── app.scss
├── app.ts
├── pages
│   ├── index
│   │   ├── index.json
│   │   ├── index.scss
│   │   ├── index.ts
│   │   └── index.wxml
├── styles
│   ├── _base.scss
│   ├── _font.scss
└── utils
    ├── base
    ├── components
    ├── filter
    ├── request
    ├── vendors
    ├── store
    └── util.ts

小程序的特点

• 配合微信的监管
  • 请求的域名需备案和在「公众平台-开发管理-开发设置-服务器域名」里配置
  • 获取用户信息需使用官方接口
• 使用Canvas合成图片需在图片下载到本机的临时路径
• wxml 的主要使用差别
  • 官方组件一览
  • image 默认不保持宽高比，src可直接使用svg
  • view 是块状元素、text 是行内元素

小程序与Vue的区别

• 组件、模块两者运用相差不大
• 没有vuex状态管理，需自行封装
• npm包使用方式不同（需加载后使用微信工具构建）

总结

• 小程序是混杂Vue（大部分）和React语法的微信私有技术，但不属于传统意义上的html项目
• 使用多端框架注意控制兼容代码的工作量，项目一旦复杂起来，调试的工作将会是翻倍增长
• 需要依赖微信生态且受其监控，包括域名的请求需添加白名单、每年的服务费以及可能会使用的云函数费用