1.登录
关键用户标识 OpenId 开发者识别用户 UnionId 开发者实现多个小程序、公众号、APP之间的数据互通
关键Api wx.login wx.checkSession wx.authorize wx.getUserInfo
利用OpenId创建用户体系
a.小程序客户端通过wx.login获取code
b.传递code向服务端,服务器返回openid和会话密钥session_key,此时开发者服务端可以利用openid生成用户入库,再向小程序客户端返回自定义登录态
c.小程序客户端缓存自定义登录态
利用Unionid创建用户体系
a.用户关注某个相同主体公众号,进行微信登录授权,通过wx.login可以直接获取到unionid
b.结合wx.getUserInfo和<button open-type="getUserInfo"></button>两种方式引导用户主动授权,主动授权后通过返回的信息和服务端交互,即可拿到unionid建立用户体系。然后由服务端返回登录态
2.图片导出
借助canvas元素,将需要导出的样式首先在canvas画布上绘制出来
借助微信提供的canvasToTempFilePath导出图片,最后再使用saveImageToPhotosAblum(需要授权)保存图片到本地
3.数据统计
埋点sdk 每一个Page中都有一个Page方法,接受一个生命周期函数。对Page进行依次包装,篡改它的生命周期和点击事件,混入埋点代码,不干扰业务逻辑,只要做一些简单的配置即可埋点
微信本身提供的数据分析能力,微信本身提供了常规分析和自定义分析两种数据分析方式。借助小程序数据助手这款小程序可以很方便的查看。
4.工程化
gulp的task
a.实时编译less文件至相应目录
b.引入支持async,await的运行时文件
c.编译字体文件为base64并生成相应css文件,方便使用
d.依赖分析哪些地方引用了npm包
e.检查代码规范
5.架构
View层用来渲染页面结构
AppService层用来逻辑处理、数据请求、接口调用
视图层和逻辑层通过系统层的JSBridage进行通信
6.View - WXML
支持数据绑定 支持逻辑算术、运算 支持模板、引用 支持添加事件
WXML-Compiler->JS-data->Virtual DOM-Virtual DOM->DOM Tree
7.View - WXSS
支持大部分css特性
WXSS-Compiler->JS-Width,DPR->CSS
8.尺寸单位
rpx(responsive pixel):可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx
9.组件
视图容器 基础内容 链接、导航 表单 操作反馈 媒体 地图 画布
10.原生组件
cavanas video map textarea
11.获取用户信息流程
wx.login session_key wx.checkSession
12.性能优化
view部分是运行在webview上,前端领域的大多数优化方式都有用
加载优化 - 减少代码包的大小(压缩、清理无用代码和资源文件、减少代码包中的图片等资源文件的大小和数量、分包加载)
首屏加载 - 异步数据不需要等待页面渲染完成,利用数据stroge API对异步数据进行缓存,先展示页面骨架和基础内容,操作即时反馈
13.数据流管理
WePY默认支持Redux,在脚手架生成项目的时候可以内置
Mpvue作为Vue的移植版本,当然支持Vuex,同样在脚手架生成项目的时候可以内置
14.mpvue
大方向
通过mpvue提供mp的runtime适配小程序
通过mpvue-loader产出微信小程序所需要的文件结构和模块内容
具体问题
如何预编译生成render function
如何预编译生成wxml、wxss、wxs
如何patch出diff
如何更新视图
如何建立小程序事件代理机制,在事件代理函数中触发与之对应的vue组件事件响应
如何建立vue实例与小程序Page实例关联
如何建立小程序和vue生命周期映射关系,能在小程序生命周期中触发vue生命周期