微信小程序框架解析
微信小程序详细介绍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. 实现功能界面：确定小程序页面、UI设计、页面实现。
在进行应用程序开发时，前端设计是整个开发过程中的一个重要组成部分。
前端开发包括UI设计和编码实现。
UI设计应该符合用户的使用需求，布局要清晰，排版要合理，页面要美观。
编码实现的目的是实现UI界面的功能和交互效果。
3. 开发逻辑功能：确定数据模型、制定接口文档、接口实现。
逻辑功能是指程序内部的操作和实现，包括数据模型和接口实现。
数据模型包括实体类、DAO、DB等逻辑层。
接口实现包括API定义和业务逻辑实现等。
4. 测试和发布：测试功能、进行测试用例、发布发布版本。
测试和发布阶段是整个开发流程的最后一个重要环节。
在测试过程中，需要测试功能的正确性和性能。
测试还包括对安全性、可靠性以及用户体验等方面的测试。
在测试过程中还需要编写测试用例，以便在后期测试合格后通过发布版本来进行最终的上线和用户体验。
二、技术点微信小程序开发需要掌握的技术点很多，下面列举几个主要的技术点：1. HTML和CSS：HTML和CSS是前端开发的基础，也是微信小程序开发不可缺少的两个技术。
2. JavaScript：JavaScript是前端开发的核心技术，通过JavaScript可以实现小程序的交互逻辑和实现功能。
3. 微信小程序框架：微信小程序框架是微信开发团队所开发的一套小程序开发框架，为微信小程序提供了开箱即用的能力，节省了开发者的时间和精力。
找茬小程序(微信小程序使用小程序框架开发)
找茬小程序（微信小程序使用小程序框架开发）随着智能手机的普及和人们对娱乐方式的不断追求，小程序成为了一种极富创新和开发潜力的媒介。
在这种背景下，找茬小程序应运而生，成为众多用户喜爱的一种游戏形式。
本文将介绍微信小程序框架开发的找茬小程序的实现方式和特点。
一、小程序框架简介微信小程序提供了丰富的框架支持，使得开发者可以方便地创建、调试和发布小程序。
小程序框架结合了HTML、CSS和JavaScript的优势，可以快速构建小程序的UI界面和页面逻辑，同时兼顾了性能和用户体验。
二、找茬小程序的设计与实现1. 游戏界面设计找茬小程序的游戏界面通常由两幅图片组成，分别为原图和相似图。
开发者需要使用微信小程序框架提供的组件进行布局设计，确保两幅图片可以在小程序界面上呈现出来，并且尽量做到美观大方。
2. 点击事件处理找茬小程序的核心功能是用户通过点击找出原图和相似图之间的差异之处。
为了实现这一功能，开发者需要使用微信小程序框架提供的事件绑定功能，将点击事件与差异判断逻辑绑定在一起。
当用户点击差异之处时，程序会给出相应的提示，增加了用户体验的互动性。
3. 分数计算与排行榜为了增加游戏的可玩性和挑战性，找茬小程序通常会设置计时和分数系统。
开发者可以利用微信小程序框架提供的计时器功能和数据存储功能，实现计时和分数的自动计算和累积。
同时，为了激发玩家的竞争欲望，开发者还可以将分数上传至服务器，实现全球排行榜的展示，增加用户之间的互动。
三、小程序的优势和市场前景1. 无需下载和安装微信小程序作为一种轻量级的应用，可以直接在微信中使用，无需下载和安装，节省了用户的手机存储空间，并提高了应用的访问便捷性。
2. 低成本开发与维护微信小程序的开发成本相对较低，开发者可以使用熟悉的前端技术进行开发，同时微信小程序框架提供了丰富的组件和工具，减少了开发与维护的工作量。
3. 广阔的市场前景随着用户对娱乐方式的需求多样化，小程序作为一种新兴的娱乐形式，具有广阔的市场前景。
微信小程序基础ppt课件
合理利用微信小程序的缓存机制， 对常用图片进行缓存，减少重复加 载。
数据缓存机制应用实践分享
数据结构优化
采用合适的数据结构，减少数据 存储和读取的时间。
缓存策略选择
根据数据特点选择合适的缓存策 略，如本地缓存、网络缓存等。
缓存清理
定期清理过期或不再使用的缓存 数据，保证缓存空间的有效利用
。
点击“立即注册”按钮 选择“小程序”注册
下载并安装微信开发者工具
访问微信开发者工具 官网
安装并运行微信开发 者工具
下载适合自己操作系 统的版本
创建并运行第一个小程序
填写项目名称和目录
在微信开发者工具中点击“ 新建项目”
01
02
03
选择小程序的模板
点击“确定”按钮创建项目
04
05
在微信开发者工具中预览和 调试小程序
03
微信小程序基本框架 与组件
小程序基本框架结构
01
02
03
04
小程序由页面、路由、配置文 件等组成
页面由多个组件组成，用于展 示数据和交互
件用于配置小程序的基 本信息和页面路径等
小程序页面结构及组件介绍
视图容器包括view、scroll-view 、swiper等，用于布局和滚动内 容
一致性
设计风格和元素应保持一 致，避免给用户带来混乱 和困惑。
用户体验
设计应注重用户体验，提 供良好的交互和反馈，使 用户能够轻松完成任务。
界面布局与排版技巧分享
布局合理
界面布局应合理，使用户 能够快速找到所需信息。
排版清晰
文字、图片等元素应排版 清晰，避免拥挤和重叠。
图标与文字
图标与文字应清晰易懂， 避免使用过于复杂或难以 理解的图标。
微信小程序登录流程解析
微信⼩程序登录流程解析⼩程序可以通过微信官⽅提供的登录能⼒⽅便地获取微信提供的⽤户⾝份标识openid，快速建⽴⼩程序内的⽤户体系。
登录流程时序：1、⾸先，调⽤ wx.login获取code，判断⽤户是否授权读取⽤户信息，调⽤wx.getUserInfo读取⽤户数据。
2、然后，由于⼩程序后台授权域名⽆法授权微信的域名，所以我们只能通过我们⾃⼰的服务器去调⽤微信服务器去获取⽤户信息。
3、然后，故我们将wx.login获取code 和 wx.getUserInfo 获取的encryptedData与iv 通过wx.request 请求传⼊后台。
4、然后，调⽤接⼝获取登录凭证（code）进⽽换取⽤户登录态信息，包括⽤户的唯⼀标识（openid）及本次登录的会话密钥（session_key）。
5、然后，⽤户数据的加解密通讯需要依赖会话密钥完成，code 换取 session_key，这是⼀个 HTTPS 接⼝，开发者服务器使⽤登录凭证code 获取 session_key 和 openid。
6、最后，其中 session_key 是对⽤户数据进⾏加密签名的密钥。
为了⾃⾝应⽤安全，session_key 不应该在⽹络上传输。
该图中，“⼩程序”指的就是我们使⽤⼩程序框架写的代码部分，“第三⽅服务器”⼀般就是我们⾃⼰的后台服务程序，“微信服务器”是微信官⽅的API服务器。
下⾯我们来逐步分解⼀下这个流程图。
步骤⼀：在客户端获取当前登录微信⽤户的登录凭证(code)在⼩程序中登录的第⼀步，就是先获取登录凭证。
我们可以使⽤wx.login()⽅法并得到⼀个登录凭证。
我们可以在⼩程序的App代码中发起登录凭证请求，也可以在其他任何Page页⾯代码中发起登录凭证请求，主要根据你⼩程序的实际需要。
步骤⼆：将登录凭证发往你的服务端，并在你的服务端使⽤该凭证向微信服务器换取该微信⽤户的唯⼀标识(openid)和会话密钥(session_key)⾸先，我们使⽤wx.request()⽅法，请求我们⾃⼰实现的⼀个后台API，并将登录凭证（code）携带过去，例如在我们前⾯代码的基础上增加：你的后台服务接着需要使⽤这个传递过来的登录凭证（code），去调⽤微信接⼝换取openid和session_key我们先来介绍下openid，⽤过公众号的童鞋应该对这个标识都不陌⽣了，在公众平台⾥，⽤来标识每个⽤户在订阅号、服务号、⼩程序这三种不同应⽤的唯⼀标识，也就是说每个⽤户在每个应⽤的openid都是不⼀致的，所以在⼩程序⾥，我们可以⽤openid来标识⽤户的唯⼀性。
微信小程序-结构目录配置介绍
微信⼩程序-结构⽬录配置介绍结构⽬录⼩程序框架提供了⾃⼰的视图层描述语⾔WXML和WXSS，以及JavaScript，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。
⼀.⼩程序⽂件结构和传统web对⽐结构传统web微信⼩程序结构HTML WXML样式CSS WXSS逻辑Javascript Javascript配置⽆JSON通过以上对⽐得出，传统web 是三层结构。
⽽微信⼩程序是四层结构，多了⼀层配置.json⼆.基本的项⽬⽬录配置介绍⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。
⼀种是全局的app.json和页⾯⾃⼰的page.json⼀.全局配置app.jsonapp.json是当前⼩程序的全局配置，包括了⼩程序的所有页⾯路径、界⾯表现、⽹络超时时间、底部 tab 等。
普通快速启动项⽬⾥边的app.json配置app.json{"pages": ["pages/test/test", # 新增页⾯,第⼀位代表⾸页"pages/index/index","pages/logs/logs"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "⼩程序","navigationBarTextStyle": "white"},"sitemapLocation": "sitemap.json"}字段的含义1. pages字段 —— ⽤于描述当前⼩程序所有页⾯路径，这是为了让微信客户端知道当前你的⼩程序页⾯定义在哪个⽬录。
微信小程序的技术架构设计
微信小程序的技术架构设计一、概述微信小程序作为一种新兴的移动应用开发模式，受到了广大开发者和用户的热衷。
而任何一个成功的应用，都少不了一个优秀的技术架构设计。
本文将通过对微信小程序的技术架构设计进行探讨，希望能够为开发者们提供一些参考和指导。
二、前端架构设计1. 前端框架选择微信小程序采用的是一种轻量级的MVVM框架，开发者可以选择使用官方提供的框架，也可以使用其他流行的框架来进行开发。
使用框架可以提高开发效率和代码的可维护性。
2. 组件化开发在微信小程序中，可以将页面拆分成多个组件，每个组件有独立的逻辑和样式。
组件化开发可以提高代码的重用性和开发效率，并且便于团队合作开发。
3. 虚拟DOM微信小程序使用虚拟DOM的方式进行渲染，这样可以提高渲染性能和用户体验。
开发者可以减少对真实DOM的操作，通过对虚拟DOM进行操作来达到渲染效果。
4. 数据状态管理微信小程序中的数据状态管理可以使用官方提供的双向绑定机制，也可以使用其他状态管理库。
良好的数据状态管理可以提高代码的可维护性和可测试性。
三、后端架构设计1. 服务器选择微信小程序的后端可以选择使用传统的云服务器，也可以选择使用云函数来进行开发。
云服务器可以提供更高的自由度和可扩展性，而云函数可以更加专注于业务逻辑的开发。
2. RESTful API设计后端接口的设计应该遵循RESTful API的原则，合理划分资源和URI，使用规范的HTTP方法进行操作。
此外，还可以采用GraphQL作为接口查询语言来提高开发效率和灵活性。
3. 数据库设计微信官方提供了云数据库的服务，可以在后端使用云数据库来存储和查询数据。
在数据库设计上，需要根据业务需求合理划分数据库表和字段，并建立适当的索引来提高查询性能。
四、安全性设计1. 用户登录鉴权微信小程序用户的登录鉴权可以使用微信开放平台提供的登录接口进行验证，获取用户唯一标识和会话密钥。
后续请求可以携带会话密钥进行用户身份验证。
微信小程序之小程序框架MINA简介
微信⼩程序之⼩程序框架MINA简介微信⼩程序,前端⼤梦想(⼀)⼩程序框架MINA简介众多开发者翘⾸期待的微信公众平台“⼩程序”它具有不是APP胜似APP 的效果，微信公众平台2016年12⽉21⽇发布消息称，微信公众平台对⼩程序进⾏了公测，为了让商户开发出功能更加丰富的⼩程序，现新增相关能⼒，具体如下：1、分享可以分享⼩程序的任何⼀个页⾯给好友或群聊。
2、模板消息商户可以将模板消息发送给接受过服务的⽤户，⽤户接受⼀次服务，七天内可收到⼀条模板消息。
3、客服消息⽤户可以在⼩程序内联系客服，⽀持⽂字和图⽚。
商户可以在48⼩时内回复⽤户。
4、扫⼀扫⽤户可以在⼩程序中使⽤扫⼀扫。
5、带参数⼆维码⽀持在开发者⼯具中⽣成带参数⼆维码，⽤户扫码后，可以打开⼩程序的不同页⾯。
(当前仅限开发者和体验者使⽤)此外，还优化和修复了100多个功能点，如⼤幅增强的地图能⼒。
根据腾讯⽅⾯的介绍，“⼩程序”是⼀种不需要下载安装即可使⽤的应⽤，它实现了应⽤“触⼿可及”的梦想，⽤户扫⼀扫或者搜⼀下即可打开应⽤。
也体现了“⽤完即⾛”的理念，⽤户不⽤关⼼是否安装太多应⽤的问题。
应⽤将⽆处不在，随时可⽤，但⼜⽆需安装卸载。
2016年9⽉22⽇，微信公众平台向外发出200个“⼩程序”内测邀请函。
该“⼩程序”即今年年初腾讯曾对外介绍的微信“应⽤号”。
2016年11⽉4⽇，微信⼩程序开放公测，开放注册范围包括企业、政府、媒体、开发者以及其他组织。
如果这是⼀轮新的潮流，我们实在不应错过这个机会。
那么我们都应该准备些什么呢？微信⼩程序，不是学习JavaScript也不是学习CSS，⽽是学习⼩程序的“MINA”框架。
这个框架为⼩程序的运⾏提供了丰富的组件和API。
当然已经掌握JS和CSS的前端开发⼈员能够更快的上⼿。
MINA框架(MINA IS NOT APP)：●MINA的⽬标是通过尽可能简单，⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服务。
2024版(完整版)微信小程序详细介绍ppt模板
微信公众号关联推广
通过微信公众号与小程序关联，实现内容互通、粉丝共享，提高小 程序曝光率。
微信广告投放
利用微信广告平台进行小程序广告投放，精准触达目标用户群体。
17
数据分析与优化调整方法
2024/1/29
数据监控与统计
建立数据监控机制，定期统计小程序访问量、用户留存率、转化 率等关键指标。
创建小程序项目
使用开发者工具创建新的 小程序项目，填写相关信 息如小程序名称、AppID 等。
8
编程语言及框架介绍
编程语言
微信小程序主要使用JavaScript 作为编程语言，用于实现小程序
的逻辑和交互功能。
框架介绍
微信小程序采用MINA框架，包 括视图层（WXML和WXSS）和 逻辑层（JavaScript），通过数 据绑定和事件处理实现界面与逻
20
创新应用场景探讨
智能家居控制
通过微信小程序，实现 远程控制智能家居设备，
提高生活便利性。
2024/1/29
健康管理
结合智能穿戴设备，通 过小程序实时监测用户 健康状况，提供个性化
健康建议。
社交互动
基于微信小程序的社交 功能，开发具有特色的 社交应用，满足用户社
交需求。
21
企业内部管理
针对企业内部管理需求， 开发相应的小程序，提 高管理效率和员工协作
跨界合作与创新
未来，微信小程序将积极寻求与其他领域的跨界合作，探索更多创新 应用场景，为用户带来更多便利和惊喜。
22
06
微信小程序开发技巧与注意事项
2024/1/29
23
提高用户体验的设计原则
wechatopendevtools原理_理论说明
wechatopendevtools原理理论说明1. 引言1.1 概述引言部分将对文章的主题进行介绍和概述。
本文将深入探讨Wechat Open Dev Tools的原理并进行理论说明。
Wechat Open Dev Tools是一种开发工具，可用于开发和调试微信小程序。
通过本文，我们将了解到它背后的原理以及如何使用它来提高开发效率和优化小程序性能。
1.2 文章结构该部分将简要介绍文章各个章节的内容和结构安排，使读者能够预先了解全文的组织结构。
本文共包含五个章节。
首先，在“2. Wechat Open Dev Tools简介”中，我们将对Wechat Open Dev Tools进行简要介绍，包括其背景、功能特点以及适用场景。
接下来，在“3. Wechat Open Dev Tools原理解析”中，我们将深入研究Wechat Open Dev Tools与小程序运行之间的关系，并详细描述小程序代码编译过程以及调试和性能优化功能的原理。
然后，在“4. Wechat Open Dev Tools的使用及注意事项”中，我们将向读者展示如何安装和配置开发环境，并演示和说明Wechat Open Dev Teams的基本调试功能。
此外，也会讨论常见问题并提供解决方法。
最后，在“5. 结论和展望”中，我们将对Wechat Open Dev Tools的理论应用前景进行展望，并总结回顾全文的主要内容和观点。
1.3 目的引言的最后一部分将说明本文的目的。
本文旨在全面介绍Wechat Open Dev Tools的原理，并提供使用指导和注意事项。
通过阅读本文，读者将获得对Wechat Open Dev Tools的深入理解，能够更加高效地进行微信小程序的开发和调试工作，同时也能了解到其未来发展的潜力。
2. Wechat Open Dev Tools简介2.1 背景：Wechat Open Dev Tools是一款由微信团队开发的集成开发环境（IDE），旨在方便开发者进行小程序开发及调试。
小程序安全性浅析
⼩程序安全性浅析引⾔近期微信⼩程序重磅发布，在互联⽹界掀起不⼩的波澜，已有许多公司发布了⾃⼰的⼩程序，涉及不同的⾏业领域。
⼤家在体验⼩程序⽤完即⾛便利的同时，是否对⼩程序的安全性还存有疑虑。
⽩泽⽇前对微信⼩程序进⾏初步的安全技术分析，在此整理出来抛砖引⽟，如有描述不当的地⽅，欢迎纠正，轻拍。
本⽂中，⼤⽩将从⼩程序的框架、功能模块安全、账户使⽤安全⽅⾯进⾏剖析，希望能为各位泽友带来不⼀样的认知。
⼀、⼩程序框架概述在第⼀部分⼩程序框架概述中，将介绍⼩程序抽象框架、⼩程序调⽤框架和⼩程序初始化流程。
下⾯让⼤⽩来逐⼀介绍。
1、⼩程序抽象框架1.1视图层包含WXML、WXSS和页⾯视图组件。
WXML是⼀种类似XML格式的语⾔，⽀持数据绑定、条件渲染、列表渲染、⾃定义模板、事件回调和外部引⽤；WXSS是⼀种类似CSS格式的语⾔，⽤于描述WXML的组件样式，决定WXML中的组件如何显⽰；组件是框架提供的⼀系列基础模块，是视图层的基本组成单元，包含表单组件、导航、地图、媒体组件等常⽤元素，如图1说明当前⼩程序⽀持的的视图组件；图1 ⼩程序视图组件1.2逻辑接⼝包含⼩程序注册、页⾯注册和功能API。
程序注册代码位于app.js，页⾯框架注册位于app.json，如图2所⽰为官⽅⽰例⼩程序的app.js和app.json。
功能API当前包含⽹络请求功能、⽂件处理功能、数据存储功能、微信的开放接⼝功能等，详见微信官⽅说明，如图3所⽰。
图2 ⼩程序注册代码⽰例图3 ⼩程序功能API⽰例1.3 原⽣实现层承载⼩程序依赖的具体操作，由微信APP⽀撑实现，包括tbs内核、JSAPI框架、初始化⼩程序配置、功能接⼝实现等，实现代码主要位于com.tencent.mm.plugin.appbrand包，关联功能有微信平台原有的数据存储能⼒、⼆维码能⼒、⽹络请求能⼒、⽀付能⼒等。
2、⼩程序调⽤框架图4 微信⼩程序调⽤框架简图上图主要说明⼩程序功能逻辑框架流程，由顶层的⼩程序实现代码（类似js），到微信底层⽀撑实现模块的调⽤流程，通过微信JSAPI框架⽀撑页⾯到本地实现的桥接调⽤。
微信小程序原生框架-目录结构
微信⼩程序原⽣框架-⽬录结构
1. 开发微信⼩程序：
1. 注册微信⼩程序
2. 下载‘微信开发者⼯具’
2. 微信⼩程序⽬录结构：
1. pages：⽤于指定⼩程序由哪些页⾯组成。
2. app.js：创建App对象，设置App的⽣命周期
3. app.json： App的全局配置⽂件
4. app.wxss： App的全局样式⽂件
5. project.config.json：项⽬配置⽂件,也可以在微信开发者⼯具--详情中查看和设置
6. sitemap.json：⽤于配置⼩程序及其页⾯是否允许被微信索引
...
3. ⼩程序全局配置⽂件：app.json，给所有页⾯配置
1. pages：路由条⽬
2. widow：⽤于设置⼩程序的状态栏、导航条、标题、窗⼝背景⾊
3. tabBar：指定 tab 栏的表现，以及 tab 切换时显⽰的对应页⾯
4. networkTimeout：各类⽹络请求的超时时间，单位均为毫秒，默认是60s，最⼤值也为60s
...
4. ⼩程序页⾯配置⽂件：page.json，单独给某个页⾯进⾏配置
微信⼩程序使⽤四层结构（js / json / wxml / wxss），⽐传统的web的三层结构(html / js / css)多⼀个JSON配置⽂件。
通过JSON配置⽂件，使得微信⼩程序只需要关注逻辑和数据处理即可。
- 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