wxml->wcc编译->javascript
用户javascript->
wawebview->view
小程序原理
微信
小程序-》
webview
appservice
native
首次加载cdn
小程序包
冷加载读取缓存/检查更新
热加载直接后台切前台
ajax请求server
response
webview预加载
微信小程序以及后台交互架构
后端服务
服务api
web server -》 业务应用 -》 文件，数据库，缓存
后台服务
后台设备：
lb 负载均衡
web server 业务应用服务器-》分布式存储-》数据库集群-》缓存集群
serverless 架构
无服务器
[外链图片转存失败(img-rsyy2xNt-1566227740535)(https://upload-images.jianshu.io/upload_images/11158618-1d1bedb75a5890f6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
[外链图片转存失败(img-MI8SUh0h-1566227740536)(https://upload-images.jianshu.io/upload_images/11158618-53e9e6373416eab4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
小程序-》api网关-》云函数-》cdb云数据库
小程序通过网络api，发起请求
// 主播
<live-pusher src=""></live-pusher>
// 观众
<live-player src=""></live-player>
构建直播小程序
申请腾讯云直播服务
获取加密私钥
部署自己的业务后台
生成开播，播放端地址
开启小程序
setData优化
频繁setData = 频繁dom操作
ui延迟
事件延迟
超大数据setData
脚本执行时间过大
在后台setData
多余的资源消耗
抢占前台js执行
onhide时停止数据更新
[外链图片转存失败(img-x3rzY6Hs-1566227740537)(https://upload-images.jianshu.io/upload_images/11158618-57c51c11a219a139.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
[外链图片转存失败(img-u6X3fPKh-1566227740539)(https://upload-images.jianshu.io/upload_images/11158618-f69baab7db80cf9a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
微信小程序登录过程
获取code
应用态的access_token
/cgi-bin/token
中控cache模块维护
cache失效时间，比如expires_in*5/6
appsecret不要放到前端
session_key不要放前端
开放数据域
目的：保证用户隐私的前提下开放用户数据给第三方
定义：开放数据域 是一个封闭，独立的JavaScript作用域
[外链图片转存失败(img-nPak0nyE-1566227740540)(https://upload-images.jianshu.io/upload_images/11158618-f2496a6d834e798f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
[外链图片转存失败(img-JmvRdkIj-1566227740540)(https://upload-images.jianshu.io/upload_images/11158618-7d529991164329e9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
[外链图片转存失败(img-zyJclLpg-1566227740542)(https://upload-images.jianshu.io/upload_images/11158618-cca1a7669b77ed82.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
[外链图片转存失败(img-zBYTB3XS-1566227740545)(https://upload-images.jianshu.io/upload_images/11158618-5b6d738e0c587f2b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
[外链图片转存失败(img-rxLm3RpN-1566227740548)(https://upload-images.jianshu.io/upload_images/11158618-ddf821070798d0ce.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
[外链图片转存失败(img-dBhmsWdL-1566227740550)(https://upload-images.jianshu.io/upload_images/11158618-12dab4c34e5da4ad.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
[外链图片转存失败(img-z7LQyHV3-1566227740551)(https://upload-images.jianshu.io/upload_images/11158618-32cef1a6762f044e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
wxParse富文本的坑
https://github.com/icindy/wxParse
rich-text
wxapp-webpack-plugin
代码精简
zanproxy
npm install -g zan-proxy
[外链图片转存失败(img-2LFTUuyT-1566227740552)(https://upload-images.jianshu.io/upload_images/11158618-243f56436a8319ce.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
[外链图片转存失败(img-8LmD1WYG-1566227740554)(https://upload-images.jianshu.io/upload_images/11158618-f3b5e1e857627323.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
[外链图片转存失败(img-9xAIaHF1-1566227740555)(https://upload-images.jianshu.io/upload_images/11158618-d5dd96b92a7e3174.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。
请点赞！因为你们的赞同/鼓励是我写作的最大动力！
欢迎关注达叔小生的简书！
这是一个有质量，有态度的博客
[外链图片转存失败(img-rUxE5pcr-1566227740556)(https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]