微信小程序敏捷开发实战

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)]