E企盈营销工具技术服务商 热线:4006-838-530

微信小程序运行流程看这篇就够了

E企盈直播平台营销卖货系统

一.微信小程序是啥本质其实就是(混合)的app 介于web app与native 原生app之间,具备丰富的调用手机各种功能的接口,同时又具备灵活性,跨平台1. 运行环境差异微信小程序运行在三端:iOS、Android 和 用于调试的开发者工具。三端的脚本执行环境以及用于渲染非原生组件的环境是各不相同的:在 iOS 上,小程序的 javascript 代码是运行在 JavaScriptCore 中,是由 WKWebView 来渲染的,环境有 iOS8、iOS9、iOS10 在 Android 上,小程序的 javascript 代码是通过 X5 JSCore来解析,是由 X5 基于 Mobile Chrome 53/57 内核来渲染的 在 开发工具上, 小程序的 javascript 代码是运行在 nwjs 中,是由 Chrome Webview 来渲染的来自官方文档说明2.小程序目录结project├── pages|   ├── index|   |   ├── index.json  index 页面配置|   |   ├── index.js    index 页面逻辑|   |   ├── index.wxml  index 页面结构|   |   └── index.wxss  index 页面样式表|   └── log|       ├── log.json    log 页面配置|       ├── log.wxml    log 页面逻辑|       ├── log.js      log 页面结构|       └── log.wxss    log 页面样式表├── app.js              小程序逻辑├── app.json            小程序公共设置└── app.wxss            小程序公共样式表3.为什么小程序比较快二、小程序架构微信小程序的框架包含两部分View视图层(可能存在多个)、App Service逻辑层(一个),View层用来渲染页面结构,AppService层用来逻辑处理、数据请求、接口调用,它们在两个线程里运行。视图层使用WebView渲染,逻辑层使用JSCore运行。视图层和逻辑层通过系统层的WeixinJsBridage进行通信,逻辑层把数据变化通知到视图层,触发视图层页面更新,视图层把触发的事件通知到逻辑层进行业务处理。重点讲一下wxs :由于view 与  App Service是不同线程,之前是传递数据,当遇到一些数据需要在view中处理时,就可以用wxs来处理,如下所示定义 wxs module=”tools”,使用说明index.js//获取应用实例const app = getApp()Page({  data: {    motto: ‘Hello World’,    userInfo: {},    hasUserInfo: false  },  //事件处理函数  bindViewTap: function() {  },  onLoad: function() {  }})!–index.wxml–view class=”container”  view class=”usermotto”    text class=”user-motto”{{tools.bar(motto)}}/text    text class=”user-motto”{{tools.foo}}/text  /view  wxs module=”tools”  var foo = “‘hello world’ from comm.wxs”;  var bar = function(d) {    return ‘啥子玩意’+d;  }  module.exports = {    foo: foo,    bar: bar  };  /wxs/view三、小程序启动加载运行机制小程序启动会有两种情况,一种是「冷启动」,一种是「热启动」。 假如用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时无需重新启动,只需将后台态的小程序切换到前台,这个过程就是热启动;冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况,此时小程序需要重新加载启动。更新机制小程序冷启动时如果发现有新版本,将会异步下载新版本的代码包,并同时用客户端本地的包进行启动,即新版本的小程序需要等下一次冷启动才会应用上。 如果需要马上应用最新版本,可以使用wx.getUpdateManager API 进行处理。运行机制小程序没有重启的概念当小程序进入后台,客户端会维持一段时间的运行状态,超过一定时间后(目前是5分钟)会被微信主动销毁当短时间内(5s)连续收到两次以上收到系统内存告警,会进行小程序的销毁四、View (页面视图)视图层由 WXML 与 WXSS 编写,由组件来进行展示。将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。1、View – WXMLwxml编译器:wcc 把wxml文件 转为 js 执行方式:wcc index.wxml2、View – WXSSWXSS(WeiXin Style Sheets)wxss编译器:wcsc 把wxss文件转化为 js 执行方式: wcsc index.wxss3、View – Component小程序的组件基于Web Component标准使用Polymer框架实现Web Component4、View – Native Component目前Native实现的组件有 canvas/ video/ map/ textarea/Native组件层在WebView层之上五、WebView预加载每次小程序进入除了当前页面,Native预先额外加载一个WebView当打开指定页面时,用默认数据直接渲染,请求数据回来时局部更新返回显示历史View退出小程序,View状态不销毁六、App Service(逻辑层)逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈1、App( ) 小程序的入口;Page( ) 页面的入口3、提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。4、每个页面有独立的作用域,并提供模块化能力。5、数据绑定、事件分发、生命周期管理、路由管理运行环境IOS – JSCoreAndroid – X5 JS解析器DevTool – nwjs Chrome 内核1、App Service – Binding数据绑定使用 Mustache 语法(双大括号)将变量包起来,动态数据均来自对应 Page 的 data,可以通过setData方法修改数据。事件绑定的写法同组件的属性,以 key、value 的形式,key 以bind或catch开头,然后跟上事件的类型,如bindtap, catchtouchstart,value 是一个字符串,需要在对应的 Page 中定义同名的函数。2、App Service – Life Cylce3、App Service – APIAPI通过WeixinJSBridge和Native 进行通信4、App Service – RouternavigateTo(OBJECT)保留当前页面,跳转到应用内的某个页面,使用navigateBack可以返回到原页面。页面路径只能是五层redirectTo(OBJECT)关闭当前页面,跳转到应用内的某个页面。navigateBack(OBJECT)关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。五、小程序开发经验1、小程序存在的问题小程序仍然使用WebView渲染,并非原生渲染需要独立开发,不能在非微信环境运行 。开发者不可以扩展新组件。依赖浏览器环境的js库不能使用,因为是JSCore执行的,没有window、document对象。WXSS中无法使用本地(图片、字体等)。WXSS转化成js 而不是css。WXSS不支持级联选择器。小程序无法打开页面,无法拉起APP。2、小程序的优点提前新建WebView,准备新页面渲染。View层和逻辑层分离,通过数据驱动,不直接操作DOM。使用Virtual DOM,进行局部更新。全部使用https,确保传输中安全。加入rpx单位,隔离设备尺寸,方便开发。rpx(responsive pixel):可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。设备          rpx换算px (屏幕宽度/750)  px换算rpx (750/屏幕宽度)iPhone5      1rpx = 0.42px           1px = 2.34rpxiPhone6      1rpx = 0.5px            1px = 2rpxiPhone6Plus  1rpx = 0.552px          1px = 1.81rpx七、代码运行运行时,外面包裹define,代码作为回到,当调用回调时,只传入前面三个值,由于后面的变量都是局部定义的变量,就屏蔽了(window,document等这些变量.AD:【E企盈直播系统开发公司】E企盈系统专业开发:万商直播系统开发,直播系统,直播平台系统源码,小程序直播,商城版小程序,分销小程序,小程序定制,微分销,微商,微信分销,微信分销商城,微信分销系统,微信分销管理,微信分销平台,微商代理系统,E企盈是专业的直播小,E企盈是专业的直播小程序,公众号分销系统,营销系统,社群私域流量卖货系统技术开发商,热线:4006-838-530

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序运行流程看这篇就够了
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏