微信小程序框架解析
微信小程序详细介绍ppt课件
音频与视频播放
使用微信小程序的音频和视频组 件，如`audio`和`video`，实现 音频和视频的播放、暂停、快进
等控制。
动画效果
借助微信小程序的动画API，如 `wx.createAnimation`，为页面 元素添加丰富的动画效果，提升
用户体验。
04
微信小程序运营推广 策略
用户获取途径及留存方法
确保数据传输的安全性，微信小程 序强制要求使用HTTPS协议进行网 络通信。
数据格式处理
对传输的数据进行格式化处理，如 JSON格式，以确保数据的准确性和 可读性。
多媒体内容展示技巧
图片展示
利用微信小程序的图片组件和 API，如`image`组件和
`wx.getImageInfo`，实现图片 的加载、预览和缩放序安全与性 能保障措施
数据加密传输和存储安全策略
数据传输加密
01
采用HTTPS协议对传输的数据进行加密，确保数据在传输过程
中的安全性。
数据存储加密
02
对敏感数据进行加密存储，如用户密码、支付密码等，防止数
据泄露。
访问控制
03
严格控制数据的访问权限，确保只有授权的用户或系统才能访
类似于HTML的标记语言，用于 描述页面结构
WXSS
类似于CSS的样式语言，用于描 述页面样式
编程语言及框架选择
• JavaScript：用于处理页面逻辑和交互
编程语言及框架选择
01
02
03
原生开发
直接使用微信提供的API 进行开发，适合简单的小 程序
WePY
一个类Vue.js的开发框架 ，提供了更优雅的编程体 验和更高的开发效率
内容更新与活动策划建议
微信小程序技术解析
微信小程序技术解析随着智能手机的普及，移动互联网的发展越来越成熟。
在这个大环境下，微信小程序的出现成为了一种新型的互联网应用形式，吸引了越来越多开发者的关注和投入。
本文就来探讨一下微信小程序的技术原理和具体实现方式。
一、微信小程序介绍微信小程序是一种基于微信平台的应用程序，可以在微信中直接使用，省去了下载安装的过程。
它具有轻量化、快速启动、使用方便等优点，深受用户喜爱。
目前微信小程序已经形成了一个完整的生态体系，涉及到生活、商业、社交等各个方面。
二、微信小程序开发技术简介微信小程序采用的是前后端分离的开发方式，前端主要采用HTML、CSS、JavaScript等技术，而后端则一般采用Java、PHP、Python等语言。
技术栈比较多样化，可以灵活根据具体需求进行选择。
在微信小程序开发中，主要使用了如下技术：1、WXMLWXML(WeiXin Markup Language)是一种类似HTML的标记语言，主要用于描述微信小程序中的页面结构，是微信小程序开发中比较重要的一个组成部分。
它采用了组件化的思想，可以进行模块化的开发和管理。
2、WXSSWXSS(WeiXin Style Sheets)是微信小程序开发中的样式语言。
类似于CSS，但与CSS有些差异。
WXSS支持嵌套样式选择器、引用外部样式表等功能，并且还新增了一些特殊的选择器，如“::before”和“::after”。
3、JavaScriptJavaScript是微信小程序的主要开发语言，它可以实现一些业务逻辑，如前端页面交互、数据处理等功能。
微信小程序可以使用ES6语法，对性能进行优化，减少代码量。
4、API微信小程序开放了丰富的API，包括网络通信、数据存储、文件读写等功能。
开发者可以调用这些API来满足自己的需求，同时也可以自行开发一些基于API的组件。
5、云开发微信小程序还提供了云开发平台，支持开发者在小程序中快速构建云服务，免去了后端开发的烦恼。
微信小程序开发5后端解析wx.getUserInfor中的用户信息,微信小程序支付
微信⼩程序开发5后端解析wx.getUserInfor中的⽤户信息,微信⼩程序⽀付后端，如何解析wx.getUserInfor中的⽤户信息。
1 我们⽤encryptedData和iv,进⾏解密，必须要⽤到session_key，所以⽤必须是登⼊状态。
2 但是session_key是有有效期。
⽽且session_key的有效期，不是⼀个固定值，他是通过⽤户⾏为来决定，session_key的有效期时间。
3 但是我们可以通过wx.checkSession来判断有没有过期。
4 保证session_key没有过期的情况下。
我们将iv,encryptedData,token(登⼊凭证）发送到后端.5 后端使⽤官⽅提供的sdk，进⾏解密。
地址 https:///miniprogram/dev/framework/open-ability/signature.html6 解密成功以后保存到数据，数据库的字符集⼀定要是utf8mb4，因为utf8默认是3字节，微信这类带表情包名字必须4字节才能保存表情包没有敏感信息，⽆法获得⽤户信息可以得到⽤户信息数据库utf8mb4：当要⽤到微信名字，表情包时，创建数据库设为utf8mb4格式django中settings⽂件配置import pymysqlpymysql.install_as_MySQLdb()DATABASES = {'default': {'ENGINE': 'django.db.backends.mysql','NAME': 'python13','USER':'root','PASSWORD':'','HOST':'127.0.0.1','PORT': 3306,'OPTIONS': {'charset': 'utf8mb4'}, # 设为4字节，兼容符号 }}如官⽅的sdk没有Crypto包⽤下⾯的⽅法解决：pip install pycryptodome代码⽰例：微信⼩程序前端：app.js//app.jsApp({/*当⼩程序初始化完成，会触发onlaunch（全局只触发⼀次） */onLaunch: function () {// 登录this.my_login()//this 就是当前app对象},my_login:function(){let that = thiswx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionId console.log(res.code)wx.request({url: that.globalData.baseurl + 'login/',data: { 'code': res.code },method: "POST",success(e) {}})}})console.log("⼩程序的初始化：onlaunch")},/**可以在全局使⽤ */globalData: {userInfo: null,baseurl:"http://127.0.0.1:8000/"}})test3.wxml<button open-type="getUserInfo" bindgetuserinfo='user1'>⽤户信息</button> test3.js// pages/test3/test3.jsconst app = getApp() // 引⽤app模块Page({user1:function(e){// this 当前页⾯，也就是page对象// console.log('e', e.detail) // 等同于wx.getUserInfo⽅法wx.getSetting({success(res) {if (res.authSetting['erInfo']) { // 获取⽤户信息权限wx.checkSession({ // 确认⽤户session_key有⽆过期success() {//session_key 未过期，并且在本⽣命周期⼀直有效wx.getUserInfo({success: (res) => {console.log('res', res) // 这个res⾥⾯就是⽤户信息// 将数据发送到后端wx.request({// 这⾥是发送iv,encryptedDataurl: app.globalData.baseurl+'getinfo/',data:{iv:res.iv,encryptedData:res.encryptedData,token: wx.getStorageSync('token')},method:"POST",success:(e) => {console.log('后台返回的数据',e)}})}})},fail() {// session_key 已经失效，需要重新执⾏登录流程app.my_login() // 通过开头导⼊const app = getApp()，获取app对象 wx.getUserInfo({success: (res) => {console.log('res', res) // 这个res⾥⾯就是⽤户信息////这⾥是发送iv,encryptedData,还没写wx.request({url: 'url',})}})}})}}})},})django后端：urls.pyfrom django.conf.urls import urlfrom django.contrib import adminfrom app01.views import test,user,payurlpatterns = [url(r'^admin/', admin.site.urls),url(r'^getinfo/', .as_view()),url(r'^pay/',pay.Pay.as_view())]views/user.pyfrom rest_framework.views import APIViewfrom rest_framework.response import Responsefrom app01.wx import wx_loginfrom django.core.cache import cacheimport hashlib,timefrom app01.models import Wxuserfrom app01.wx import WXBizDataCryptfrom app01.my_ser import wx_user_serclass Login(APIView):def post(self,request):param = request.dataif not param.get("code"):return Response({"status":1,"msg":"缺少参数"})else:code = param.get("code")user_data = wx_login.get_login_info(code)if user_data:val = user_data['session_key'] +"&"+user_data['openid']md5 = hashlib.md5()md5.update(str(time.clock()).encode("utf-8")) # 当前cpu的时间 md5.update(user_data['session_key'].encode("utf-8"))key = md5.hexdigest()cache.set(key,val,7200)has_user = Wxuser.objects.filter(openid=user_data['openid']).first() if not has_user:Wxuser.objects.create(openid=user_data['openid'])return Response({"status":0,"msg":"ok","data":{"token":key}return Response({"status":2,"msg":"⽆效的code"})class Info(APIView):def post(self,request):param = request.dataif param.get('iv') and param.get('token') and param.get('encryptedData'):session_key_openid = cache.get(param.get('token'))if session_key_openid:session_key,openid = session_key_openid.split('&')# 解密user_info = WXBizDataCrypt.WXBizDataCrypt.get_info(session_key,param.get('encryptedData'),param.get('iv'))save_data = {"name": user_info['nickName'],"avatar": user_info['avatarUrl'],"language": user_info['language'],"province": user_info['province'],"city": user_info['city'],"country": user_info['country'],}Wxuser.objects.filter(openid=openid).update(**save_data)user = Wxuser.objects.filter(openid=openid).first()user = wx_user_ser(instance=user,many=False).datareturn Response({'status':0,'msg':'ok','data':user})else:return Response({'code':2,'msg':'⽆效的token'})else:return Response({'code':1,'msg':'缺少参数'})wx/settings.pyAppId="..."AppSecret='...'code2Session = 'https:///sns/jscode2session?appid={}&secret={}&js_code={}&grant_type=authorization_code' pay_mchid ='1415981402'pay_apikey = 'xi34nu5jn7x2uujd8u4jiijd2u5d6j8e'wx/wx_login.pyfrom app01.wx import settingsimport requestsdef get_login_info(code):code_url = settings.code2Session.format(settings.AppId,settings.AppSecret,code)response = requests.get(code_url)json_response = response.json() # 把json格式数据转换为字典print("json_response",json_response)if json_response.get("session_key"):return json_responseelse:return Falsewx/WXBizDataCrypt.pyimport base64import jsonfrom Crypto.Cipher import AESfrom app01.wx import settingsclass WXBizDataCrypt:def__init__(self, appId, sessionKey):self.appId = appIdself.sessionKey = sessionKeydef decrypt(self, encryptedData, iv):# base64 decodesessionKey = base64.b64decode(self.sessionKey)encryptedData = base64.b64decode(encryptedData)iv = base64.b64decode(iv)cipher = AES.new(sessionKey, AES.MODE_CBC, iv)decrypted = json.loads(self._unpad(cipher.decrypt(encryptedData))) if decrypted['watermark']['appid'] != self.appId:raise Exception('Invalid Buffer')return decrypteddef _unpad(self, s):return s[:-ord(s[len(s)-1:])]@classmethoddef get_info(cls,sessionKey,encryptedData,iv):return cls(settings.AppId, sessionKey).decrypt(encryptedData, iv) models.pyfrom django.db import models# Create your models here.class Wxuser(models.Model):id = models.AutoField(primary_key=True)openid=models.CharField(max_length=255)name = models.CharField(max_length=50)avatar = models.CharField(max_length=200)language = models.CharField(max_length=50)province = models.CharField(max_length=50)city = models.CharField(max_length=50)country = models.CharField(max_length=50)#gender = models.CharField(max_length=50)creat_time = models.DateTimeField(auto_now_add=True)update_time = models.DateTimeField(auto_now=True)def__str__(self):return self.openidmy_ser.pyfrom rest_framework import serializersfrom app01 import modelsclass wx_user_ser(serializers.ModelSerializer):class Meta:model = models.Wxuserfields = "__all__"⼩程序⽀付流程1 ⽤户发起请求下单⽀付2 我们要保证⽤是登⼊状态。
微信小程序开发小程序框架及文件目录介绍
微信⼩程序开发⼩程序框架及⽂件⽬录介绍2019-12-1810:35:27逻辑层初步介绍除了视图层（即我们所看到的页⾯），⼩程序逻辑层各部分的功能如下：index.js 逻辑代码index.json 页⾯配置⽂件index.wxml 页⾯结构index.wxss 表⽰index.wxml结构的样式app.js app.json app wxss的作⽤与index是类似的，但它们作⽤于全局在后续的课程中我们将对逻辑层进⾏更深⼊的讲解。
⼩程序框架及⽂件⽬录介绍⼩程序框架介绍⼩程序框架的核⼼是⼀个响应的数据绑定系统。
整个系统分为两块，视图层和逻辑层。
视图层（view）内容展⽰⽂本样式视图层由WXML与WXSS编写。
将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
WXML(WeiXin Markup language)⽤于描述页⾯的结构。
WXSS(WeiXin Style Sheet)⽤于描述页⾯的样式。
组件(Component)是视图的基本组成单元。
逻辑层（app service）业务逻辑数据处理⼩程序开发框架的逻辑层是由JavaScript编写。
逻辑层将数据进⾏处理后发送给视图层，同时接受视图层的事件反馈。
每个页⾯有独⽴的作⽤域，并提供模块化能⼒。
⼩程序⽂件介绍⼩程序⽂件包含⼀个描述整体程序的app和多个描述各⾃页⾯的page.页⾯⼀个页⾯由四个⽂件组成，如下所⽰：index(默认)⼩程序注册及配置⼊⼝⽂件配置⽂件全局样式app.js⽂件，⽤来定义⼩程序的全局数据和函数，控制、监听⼩程序的全⽣命周期。
在这⾥可以见到的全局函数有onlaunch(监听⼩程序初始化)，onshow(监听⼩程序显⽰),onhide(监听⼩程序隐藏)等。
app.js中还可以定义⼀些全局变量，其他页⾯引⽤app.js⽂件后就可以直接使⽤这个⽂件中的函数和变量。
app.json是配置⽂件，可以配置以下信息：页⾯路径，窗⼝信息，标签导航，⽹络超时等。
微擎的原理
微擎的原理
微擎是一款用于开发微信小程序的开发框架。
其原理可以概括为以下几个方面：
1. 前端框架：微擎使用了类似于MVVM（Model-View-ViewModel）的前端架构模式，将视图（View）和数据（Model）分离，通过ViewModel来进行交互和数据绑定。
开
发者可以使用微擎提供的组件和API来构建小程序的前端界面。
2. 后端支持：微擎提供了一套后台管理系统，用于管理小程序的数据和业务逻辑。
开发者可以通过后台系统进行数据管理、发布小程序版本、配置权限等操作。
后台系统还提供了一些常用的功能模块，如会员管理、商品管理、订单管理等，方便开发者进行业务开发。
3. 数据库支持：微擎使用了关系型数据库来存储小程序的数据。
开发者可以使用微擎提供的数据库操作API来进行数据的增
删改查操作。
微擎支持MySQL、PostgreSQL、SQLite等多种
数据库类型。
4. API接口：微擎提供了一系列的API接口，用于小程序与后台系统进行数据交互。
开发者可以通过调用API接口来获取
数据、进行登录验证、上传文件等操作。
总之，微擎的原理是基于前后端分离的架构模式，通过前端框
架、后端支持、数据库和API接口的配合，实现了微信小程序的开发与管理。
微信小程序基本目录结构学习
微信⼩程序基本⽬录结构学习今天我们就以firstdemo为例，介绍⼀下⼩程序的基本⽬录结构。
当我们打开⼀个项⽬后，点击进⼊“编辑”菜单，我们可以看到有以下5个⽂件/⽂件夹）：pages⽂件夹，utils⽂件夹，全局⽂件app.js⽂件，全局⽂件app.json⽂件，图⽚编辑⽂件⼯具app.wxss⽂件。
<ignore_js_op>⼩程序⽬录结构的整体结构如下：<ignore_js_op><ignore_js_op>我们详细介绍下⼩程序⽬录中每个⽂件和⽂件夹的功能，以及注意事项。
1.pages⽬录介绍pages:主要存放⼩程序的页⾯⽂件，其中每个⽂件夹为⼀个页⾯，每个页⾯包含四个⽂件：index.js.js是⼩程序的逻辑⽂件，也称事件交互⽂件和脚本⽂件，⽤于处理界⾯的点击事件等功能，像设置初始数据，定义事件，数据的交互，逻辑的运算，变量的声明，数组，对象，函数，注释的⽅式等，其语法与javascript相同。
我们可以打开仔细查看index.js⾥⾯的代码。
⾸先，我们可以在data⾥⾯，motto是显⽰hello word,改变成hello微信⼩程序。
如下图所⽰：其次，我们看⼀下bindViewTap: function()的功能，是点击跳转到⽇志页⾯。
我们可以点击头像看⼀下演⽰效果，如下图所⽰：<ignore_js_op>最后，我们看⼀下onLoad函数，是设置页⾯启动时的动作。
我们可以修改页⾯启动时显⽰页⾯，也可以新增函数，如下图所⽰：<ignore_js_op>常⽤的⽤.js函数如下所⽰：1. Page({2. data:{3. // text:"这是⼀个页⾯"4. },5. onLoad:function(options){6. // 页⾯初始化 options为页⾯跳转所带来的参数7. console.log('App onLoad')8. },9. onReady:function(){10. // 页⾯渲染完成11. console.log('App onReady')12. },13. onShow:function(){14. // 页⾯显⽰15. console.log('App onShow')16. },17. onHide:function(){18. // 页⾯隐藏19. console.log('App onHide')20. },21. onUnload:function(){22. // 页⾯关闭23. console.log('App onUnload')24. }25. })复制代码index.json.json后缀的⽂件是配置⽂件，主要是json数据格式存放，⽤于设置程序的配置效果。
微信小程序之WebSocket
微信⼩程序之WebSocket本⽂版权归 OSChina jsongo0 所有，转载请标明出处，以⽰尊重！为什么需要websocket？传统的实时交互的游戏，或服务器主动发送消息的⾏为（如推送服务），如果想做在微信上，可能你会使⽤轮询的⽅式进⾏，不过这太消耗资源，⼤量的请求也加重了服务器的负担，⽽且延迟问题⽐较严重。
如果是⾃⼰开发的app，为了解决这些问题，很多团队会⾃建socket，使⽤tcp长链接、⾃定协议的⽅式与服务器进⾏相对实时的数据交互。
有能⼒的团队，采⽤这种⽅式⾃然没什么⼤问题。
不过⼩团队可能就要花费很多时间去调试，要解决很多难题，这个在成本上就划不来。
H5引⼊了webSocket来解决⽹页端的长链接问题，⽽微信⼩程序也⽀持websocket。
这是⼀个⾮常重要的特性，所以本系列的⽂章会专门拿出⼀篇来讨论websocket。
webSocket本质上也是TCP连接，它提供全双⼯的数据传输。
⼀⽅⾯可以避免轮询带来的连接频繁建⽴与断开的性能损耗，另⼀⽅⾯数据可以是⽐较实时的进⾏双向传输（因为是长链接），⽽且WebSocket允许跨域通信（这⾥有个潜在的跨域安全的问题，得靠服务端来解决）。
⽬前除IE外的浏览器已经对webSocket⽀持得很好了，微信⼩程序再推⼀把之后，它会变得更加流⾏。
游戏规则是这样的：把雷换成⾦⼦，挖到⾦⼦加⼀分，每⼈轮流⼀次（A挖完轮到B，B挖完A才能再点击），点中⾦⼦就算你的，也不会炸，游戏继续，直到把场上所有的⾦⼦都挖完游戏才结束。
跟扫雷⼀样，数字也是表⽰周边有⼏个⾦⼦，然后⽤户根据场上已经翻出来的数字来猜哪⼀格可能有⾦⼦。
这种交互的游戏难点在于，⽤户的点击操作都要传到服务器上，⽽且服务器要实时的推送到其它玩家的应⽤上。
另外⽤户⾃⼰也要接收对⽅操作时实时传过来的数据，这样才不⾄于重复点中同⼀个格⼦。
简单讲，就是你要上报操作给服务器，⽽服务器也要实时给你推消息。
为了简化整个模型，我们规定玩家必须轮流来点击，玩家A点完后，才能轮到玩家B，玩家B操作完，玩家A才能点。
微信小程序的实现原理
微信小程序的实现原理微信小程序的实现原理主要包括以下几个方面：1. 前端框架和语言：微信小程序采用了类似于Web前端开发的技术栈，使用HTML、CSS和JavaScript来构建页面和实现交互。
但与Web开发不同的是，微信小程序使用了一种叫做WXML（WeiXin Markup Language）的标记语言来描述页面结构，使用了一种叫做WXSS（WeiXin Style Sheet）的样式语言来描述页面样式，并且使用了特定的JavaScript框架来处理页面逻辑。
2. 界面渲染和显示：微信小程序内置了一个渲染层，用于将开发者编写的WXML文件渲染成可视化的页面。
渲染层利用类似浏览器的渲染引擎，将WXML转换成页面的DOM树，再根据WXSS进行样式的处理，最终将渲染结果显示在用户的手机屏幕上。
3. 逻辑处理和数据交互：微信小程序利用JavaScript框架实现了逻辑处理和数据交互的功能。
开发者可以在JavaScript文件中定义小程序的逻辑，包括事件的处理、页面跳转、数据的获取和更新等。
在逻辑层与渲染层之间，微信小程序还提供了一个叫做WXS（WeiXin Script）的模板引擎，用于进行数据绑定和动态更新。
4. 运行环境和基础能力：微信小程序在运行时需要依赖微信客户端提供的运行环境和基础能力。
微信客户端会向小程序提供一些系统级的API，例如获取用户信息、调用设备功能（如摄像头、地理位置等）、访问网络数据等。
这些基础能力的支持，让小程序能够更好地与用户进行交互，并且具备更多的功能和体验。
总的来说，微信小程序的实现原理是基于前端技术栈和微信客户端的运行环境，通过渲染层、逻辑层和基础能力之间的协作，实现了小程序页面的展示、交互和功能实现。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
为什么那么快
common lib user common js
Page Frame
Native预先加载一个WebView
当打开指定页面时，无需加载额外资源直接渲染 返回显示历史View
退出小程序，View状态不销毁
小程序入口
扫码进入小程序
搜索小程序 发现->小程序
小程序发送到桌面（android）
现资源离线缓存和更 新
PWA - App Shell 提升显示效率
App Shell（应用外壳）是 应用的用户界面所需的最 基本的 HTML、CSS 和 JavaScript，首次加载后 立刻被缓存下来，不需要 每次使用时都被下载，而 是只异步加载需要的数据， 以达到UI保持本地化。
THANK YOU
小程序存在的问题
1、小程序仍然使用WebView渲染，并非原生渲染
2、需要独立开发，不能在非微信环境运行。
3、开发者不可以扩展新组件。 4、服务端接口返回的头无法执行，比如：Set-Cookie。 5、依赖浏览器环境的js库不能使用，因为是JSCore执行的，没有window、document对 象。 6、WXSS中无法使用本地（图片、字体等）。 7、WXSS转化成js 而不是css，为了兼容rpx。 8、WXSS不支持级联选择器。 9、小程序无法打开页面，无法拉起APP。
element, element
view, checkbox
::after
view::after
在 view 组件后边插入内容
::before
view::before
在 view 组件前边插入内容
View - Component
大类 细分 普通视图容器 视图容器 滚动视图 滑块视图 文本 基础内容 链接、导航 图标 进度条 链接、导航 按钮 单选 多选 表单 表单 输入框 改进表单可用性 滚动选择器 view scroll-view swiper text icon progress navigator button radio checkbox form input label picker span、em、p…… span、em、i…… div…… a button、input input input form input label select div、ul、li、article、section…… WXML HTML
Notify
Event
New View Send Data
App Service onLaunc h
Page
onLoad onShow
onReady
Handler
onHide
New Page
onShow
Launch Native
Route
Route
App Service - API
API通过JSBridge和Native 进行通信
支持添加事件（bindtap）
WXML
Compiler
JS
Data
Virtual DOM
Virtual DOM
DOM Tree
View - WXSS
WXSS(WeiXin Style Sheets)
支持大部分CSS特性
添加尺寸单位rpx，可根据屏幕宽度自适应 使用@import语句可以导入外联样式表
PWA - Web App Manifest使Web更像Native
Web App Manifest以 JSON的格式定义Web 应用的相关配置（应 用名称、图标或图像 连接、启动URL、自定 义特性、启动默认配 置、全屏设置等）。
PWA - Service Workers增强Web能力
通过Service Works实
小程序开发经验
小程序可以借鉴的优点
1、提前新建WebView，准备新页面渲染。 2、View层和逻辑层分离，通过数据驱动，不直接操作DOM。 3、使用Virtual DOM，进行局部更新。 4、全部使用https，确保传输中安全。 5、前端组件化开发。 6、加入rpx单位，隔离设备尺寸，方便开发。
运行环境 IOS - JSCore Android - X5 JS解析器 DevTool - nwjs Chrome 内核
App Service - Binding
App Service - Life Cylce
User Event View init init Render
Re-Render
Send init Data
audio
video map canvas
View - Component
小程序的组件基于Web Component标准 使用Polymer框架实现Web Component
View - Native Component
Native组件层在WebView层之上
<canvas / ><video / ><map / ><textarea / >
脱离微信的“小程序”：PWA 渐进式应用 PWA - Progressive Web App
PWA 特点
• 渐进增强 - 支持的新特性的浏览器获得更好的体验，不支持的保持原来的体验。 • 离线访问 - 通过 Service Workers 可以在离线或者网速差的环境下工作。 • 类原生应用 - 使用app shell model做到原生应用般的体验。 • 可安装 - 允许用户保留对他们有用的应用在主屏幕上，不需要通过应用商店。 • 容易分享 - 通过 URL 可以轻松分享应用。 • 持续更新 - 受益于 service worker 的更新进程，应用能够始终保持更新。 • 安全 - 通过 HTTPS 来提供服务来防止网络窥探，保证内容不被篡改。 • 可搜索 - 得益于 W3C manifests 元数据和 service worker 的登记，让搜索引擎能够找到 web 应用。 • 再次访问 - 通过消息推送等特性让用户再次访问变得容易。
微信小程序框架解析
hongweiqu(渠宏伟)
01 小程序介绍和演示
CONTENTS
02 小程序架构 03 小程序视图层 04 小程序点
类WEB 不是HTML5 即用即走，随手可得 拥有离线能力 基于微信跨平台 媲美原生操作体验
小程序演示
企鹅电竞小程序体验
小程序架构
小程序架构
View（视图层）
Page Page
App Service （逻辑层）
Page
Manager
API
WXML WXSS
Event
Data
Data
Event
JSBridge 微信能力 离线存储 Native（系统层） 网络请求 …
小程序架构
In WeChat
Network
Data Event
App Service(逻辑层)
App Service
逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈
1、App( ) 小程序的入口；Page( ) 页面的入口
3、提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
4、每个页面有独立的作用域，并提供模块化能力。 5、数据绑定、事件分发、生命周期管理、路由管理
Init request Package
CDN
View
Event Data
App Service
Ajax request JSON Data
Web Server
Storge
View (页面视图)
View - WXML
WXML（WeiXin Markup Language）
支持数据绑定
支持逻辑算术、运算 支持模板、引用
App Service - Router
navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面，使用navigateBack可以返回到原页面。页面路
径只能是五层
redirectTo(OBJECT) 关闭当前页面，跳转到应用内的某个页面。
navigateBack(OBJECT)
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈， 决定需要返回几层。
不支持多层选择器-避免被组件内结构破坏
WXSS
Compiler
JS
Width，DPR
CSS
View – WXSS Selectors
选择器 .class
样例 .intro
样例描述 选择所有拥有 class="intro" 的组件
#id element
#firstname view
选择拥有 id="firstname" 的组件 选择所有 view 组件 选择所有文档的 view 组件和所有的 checkbox 组件
开关选择器
底部菜单 操作反馈 弹窗 toast 加载 图片
switch
action-sheet modal toast loading image
input、div……
div、ul…… div…… div…… img、span、div…… img
媒体
地图 画布
音频
视频 地图 画布
audio
video map canvas
分类 发起请求 网络 上传下载 WebSocket 图片 视频 媒体 音频 录音 文件 数据 位置 数据缓存 获取位置 查看位置 网络状态 系统信息 设备 重力感应 罗盘 拨打电话 Canvas 界面 动画 导航、设置导航条 交互反馈 登录 开放接口 用户信息 微信支付 模板消息 名称 request uploadFile / downloadFile connectSocket / onSocketOpen / onSocketError / sendSocketMessage / onSocketMessage / closeSocket / onSocketClose chooseImage / previewImage / getImageInfo chooseVideo playVoice / pauseVoice / stopVoice startRecord / stopRecord saveFile / getSavedFileList / getSavedFileInfo / removeSavedFile setStorage / getStorage / removeStorage / clearStorage getLocation openLocation getNetworkType getSystemInfo onAccelerometerChange onCompassChange makePhoneCall drawCanvas / drawCanvas / canvasToTempFilePath createAnimation navigateTo / redirectTo / navigateBack showToast / showModal / showActionSheet login getUserInfo requestPayment API