wxml->wcc 编译 ->JavaScript
用户 JavaScript->
wawebview->view
小程序原理
微信
小程序 -》
- webview
- appservice
- native
首次加载 cdn
小程序包
冷加载读取缓存 / 检查更新
热加载直接后台切前台
Ajax 请求 server
response
webview 预加载
微信小程序以及后台交互架构
后端服务
服务 API
Web server -》 业务应用 -》 文件, 数据库, 缓存
后台服务
后台设备:
lb 负载均衡
Web server 业务应用服务器 -》分布式存储 -》数据库集群 -》缓存集群
serverless 架构
无服务器
image.PNG
image.PNG
小程序 -》API 网关 -》云函数 -》cdb 云数据库
小程序通过网络 API, 发起请求
- // 主播
- <live-pusher src=""></live-pusher>
- // 观众
- <live-player src=""></live-player>
构建直播小程序
申请腾讯云直播服务
获取加密私钥
部署自己的业务后台
生成开播, 播放端地址
开启小程序
setData 优化
频繁 setData = 频繁 dom 操作
ui 延迟
事件延迟
超大数据 setData
脚本执行时间过大
在后台 setData
多余的资源消耗
抢占前台 JS 执行
onhide 时停止数据更新
image.PNG
image.PNG
微信小程序登录过程
获取 code
应用态的 access_token
/CGI-bin/token
中控 cache 模块维护
cache 失效时间, 比如 expires_in*5/6
appsecret 不要放到前端
session_key 不要放前端
开放数据域
目的: 保证用户隐私的前提下开放用户数据给第三方
定义: 开放数据域 是一个封闭, 独立的 JavaScript 作用域
image.PNG
image.PNG
image.PNG
image.PNG
image.PNG
image.PNG
image.PNG
wxParse 富文本的坑
- https://github.com/icindy/wxParse
- rich-text
- wxapp-webpack-plugin
代码精简
- zanproxy
- NPM install -g zan-proxy
image.PNG
image.PNG
image.PNG
若本号内容有做得不到位的地方 (比如: 涉及版权或其他问题), 请及时联系我们进行整改即可, 会在第一时间进行处理.
请点赞! 因为你们的赞同 / 鼓励是我写作的最大动力!
来源: http://www.jianshu.com/p/c6ca52374584