微信小程序敏捷开发实战

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