微信小程序学习笔记

原文链接

一、微信小程序pk网页

1、微信小程序是不是网页？

微信小程序使用的是wxml绘制页面结构，wxss绘制页面样式，js实现页面逻辑。好像和网页的html+css+js类似，其实他们之间还是有很多不同的：

1. 网页的运行环境是浏览器（webview）；小程序只是wxml+wxs运行在webview中，js是单独的一个线程
2. 网页的页面跳转、前进、后退都是在同一个浏览器（webview）中完成的；小程序的每一个页面都是一个新的webview，这些页面存在程序栈中，最多10个webview
3. 微信小程序是运行在一个新的进程中，是一个新的程序，和微信独立运行；网页的话是依赖宿主环境的。
4. 小程序不是网页，但是小程序是混合开发（更深）

2、微信小程序的工作原理

1. 为了达到app的极致体验，微信采用 ZSTD 算法对小程序代码包进行压缩，以尽可能降低下载过程中传输的数据量，在第一次打开小程序的时候将压缩包下载到本地，从而减少资源请求
2. 小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转
3. 逻辑层发送网络请求经由Native转发

3、微信小程序和网页的优劣对比

1. 小程序的页面加载的速度明显比网页快；（资源提前缓存了；渲染线程和逻辑线程共同工作）
2. 小程序的js动画没有网页的js动画流畅；（小程序的js操作dom需要逻辑线程和渲染线程通过native交互，有损耗；微信提供了wxs解决这个问题）
3. 网页的适应性强，只要有浏览器（webview）就可以运行；小程序必须依赖微信环境（或微信开发这工具）
4. 小程序可以获取微信开放的更多信息

二、微信生态开放的信息

注：

获取用户手机号：

获取用户信息：

三、开发框架

微信提供的语言有自己的语法，有一定的学习成本；各大app都有自己的小程序，每个小程序的语法可能不同；

所有选择框架是开发小程序的不二选择，市面上的框架大同小异，技术选择就看自己的实际情况而定；

1、kbone（官方）

官方推荐的框架；kbone 是一个致力于微信小程序和 Web 端同构的解决方案。

因为 kbone 是通过提供适配器的方式来实现同构，所以它的优势很明显：

• 大部分流行的前端框架都能够在 kbone 上运行，比如 Vue、React、Preact 等。
• 支持更为完整的前端框架特性，因为 kbone 不会对框架底层进行删改（比如 Vue 中的 v-html 指令、Vue-router 插件）。
• 提供了常用的 dom/bom 接口，让用户代码无需做太大改动便可从 Web 端迁移到小程序端。
• 在小程序端运行时，仍然可以使用小程序本身的特性（比如像 live-player 内置组件、分包功能）。
• 提供了一些 Dom 扩展接口，让一些无法完美兼容到小程序端的接口也有替代使用方案（比如 getComputedStyle 接口）。

2、uni-app（Dcloud）

uni-app的优势：

• uni-app是一套可以适用多端的开源框架，一套代码可以同时生成ios，Android，H5，微信小程序，支付宝小程序，百度小程序等。
• uni-app对前端开发人员比较友好，学习成本比较低，首先uni-app是基于vue.js的。其次封装的组件和微信小程序的组件一毛一样，所以对于现在的主流前端人员来说学习几乎0成本，如果你作为一个前端，没有接触过vue和微信小程序的话那建议你多去加加油了。
• uni-app使用hbuilderX进行开发，hbuilderX对于vue语法等支持可以说是比较完备了。使用hbuilderX进行开发开发速度比较快

3、mpvue（美团）

mpvue的优势：

• 彻底的组件化开发能力：提高代码复用性
• 完整的 Vue.js 开发体验
• 方便的 Vuex 数据管理方案：方便构建复杂应用
• 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
• 支持使用 npm 外部依赖
• 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
• H5 代码转换编译成小程序目标代码的能力

4、Taro（京东）

taro的优势：

• 框架支持，在 Taro 3 中可以使用完整的 React/Nerv / Vue/Vue3 开发体验
• 多端适配，目前 Taro 3 可以支持转换到 微信/京东/百度/支付宝/字节跳动/QQ 小程序 以及 H5 端。

…

四、可能会遇到的问题

1、动画卡顿

现象：css3动画性能还好，js的手势动画会比较卡顿

原因：小程序js操作dom需要逻辑层和渲染成交互，有性能问题

解决办法：使用wxs开发js动画，wxs是小程序提供的一个运行在渲染层的阉割版js主要是用来处理频繁的js操作dom问题

2、首页自定义tab

现象：微信小程序提供了原生的tab，但是样式单一，不支持修改；官方提供的自定义tab的解决办法，会导致tab闪烁

原因：…

解决办法：将首页使用单页面实现，底部使用公共的tab组件，做好页面优化，性能还是可以的，办法随笨，不过问题解决了

3、opacity动画卡顿

现象：滚动时，顶部导航，透明度渐现动画，在opacity变为1时卡一下；

原因：opacity的值有0.9变为1时，会卡顿，原因…

解决办法：在设置opacity的值时，设置为0.9999，接近1但是不为1，这就规避了这个问题，不过这可能不是最好的解决办法。

…

五、总结

不经历风雨怎么能见到彩虹，小程序的诞生伴随着一个又一个的问题，新的问题同样会带来新的挑战，只有正面问题，迎难而上，将问题一一解决，才能不断成长不断进步。在未来工作中，应该积极发现问题、解决问题，将小程序做的更好。