微信小程序敏捷开发实战

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

posted @ 2019-08-19 23:16  达达前端  阅读(261)  评论(0编辑  收藏  举报