看企业网站怎么做到百度秒收,企业logo标志设计公司,百度竞价在哪里开户,开发公司质量管理制度模板前言 工欲善其事#xff0c;必先利其器。 首先#xff0c;我们需要知道微信小程序是什么#xff1f;微信小程序内核是什么#xff1f;微信小程序的开发语言什么#xff1f;这样才能更好的开发微信小程序#xff0c;以及解决遇到的问题。
一、微信小程序是什么
微信小程…前言 工欲善其事必先利其器。 首先我们需要知道微信小程序是什么微信小程序内核是什么微信小程序的开发语言什么这样才能更好的开发微信小程序以及解决遇到的问题。
一、微信小程序是什么
微信小程序是一个依托于微信微信提供一个接口运行浏览器内核上的一个程序。 微信小程序是一个小程序可以有很多页面每个页面承载不同的功能页面之间可以互相跳转。小程序分为渲染层和逻辑层渲染层中包含了多个 WebView每个 WebView 对应到我们的小程序里就是一个页面 Page每一个页面都独立运行在一个页面层级上。它也可以做得很丰富就像native app一样可以调用原生的各种接口像网络状态、罗盘重力拨打电话等
二、微信小程序内核是什么
微信小程序的编译内核环境根据不同平台而不同。
在 iOS 上小程序的 javascript 代码是运行在 JavaScriptCore 中在 Android 上小程序的 javascript 代码是通过 X5 内核来解析在 开发工具上 小程序的 javascript 代码是运行在 nwjschrome内核 中
JavaScriptCore
JavaScriptCores是开源的下载地址:https://github.com/phoboslab/JavaScriptCore-iOS
OS X Mavericks 和 iOS 7 引入了 JavaScriptCore 库它把 WebKit 的 JavaScript 引擎用 Objective-C 封装提供了简单快速以及安全的方式接入世界上最流行的语言。不管你爱它还是恨它JavaScript 的普遍存在使得程序员、工具以及融合到 OS X 和 iOS 里这样超快的虚拟机中资源的使用都大幅增长。(参考iOS官方文档https://developer.apple.com/documentation/javascriptcore?languageobjc)
X5 内核
唯一一个属于国人开发大鹅厂自己的浏览器解析内核
nwjs
原名node-webkit 当然也是开源的:https://github.com/nwjs/nw.js/
nw.js 是基于 Chromium和 Node.js运行的 以前也叫nodeWebkit。这就给了你使用HTML和JavaScript来制作桌面应用的可能。在应用里你可以直接调用Node.js的各种api以及现有的第三方包。因为Chromium和 Node.js的跨平台那么你的应用也是可以跨平台的。现在已经有很多知名的应用是基于NW.js实现
三、微信小程序的开发语言是什么
1.微信小程序的开发 微信小程序使用了前端技术栈 JavaScript/WXML/WXSS
JavaScript: 微信小程序的 JavaScript 运行环境即不是 Browser 也不是 Node.js。它运行在微信 App 的上下文中不能操作 Browser context 下的 DOM也不能通过 Node.js 相关接口访问操作系统 API。所以严格意义来讲微信小程序并不是 Html5虽然开发过程和用到的技术栈和 Html5 是相通的。WXML: 作为微信小程序的展示层并不是使用 Html而是自己发明的基于 XML 语法的描述。WXSS: 用来修饰展示层的样式。官方的描述是 “ WXSS (WeiXin Style Sheets) 是一套样式语言用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。” “我们的 WXSS 具有 CSS 大部分特性...我们对 CSS 进行了扩充以及修改。”基于 CSS2 还是 CSS3大部分是哪些部分是否支持 CSS3 里的动画不得而知。
四、微信小程序
1.小程序与普通网页开发的区别
小程序的主要开发语言是 JavaScript 所以通常小程序的开发会被用来同普通的网页开发来做对比。两者有很大的相似性对于前端开发者而言从网页开发迁移到小程序的开发成本并不高但是二者还是有些许区别的。
网页开发渲染线程和脚本线程是互斥的这也是为什么长时间的脚本运行可能会导致页面失去响应而在小程序中二者是分开的分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API进行 DOM 选中和操作。而如上文所述小程序的逻辑层和渲染层是分开的逻辑层运行在 JSCore 中并没有一个完整浏览器对象因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库例如 jQuery、 Zepto 等在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同所以一些 NPM 的包在小程序中也是无法运行的
网页开发者需要面对的环境是各式各样的浏览器PC 端需要面对 IE、Chrome、QQ浏览器等在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端以及用于辅助开发的小程序开发者工具小程序中三大运行环境也是有所区别的.如表1-1所示。
center表1-1 小程序的运行环境/center
运行环境逻辑层渲染层iOSJavaScriptCoreWKWebView安卓X5 JSCoreX5浏览器小程序开发者工具NWJSChrome WebView
2.WebView
WebView的运行流程和一些弊端。
流程 打开一个 WebView 通常会经历以下几个阶段
交互无反馈到达新的页面页面白屏页面基本框架出现但是没有数据页面处于 loading 状态出现所需的数据
WebView 启动过程大概分为以下几个阶段 WebView启动过程
存在的问题 在加载WebView页面时时常出现白屏现象 加载WebView出现白屏
除了白屏影响 Web 体验的问题还有缺少操作的反馈主要表现在两个方面页面切换的生硬和点击的迟滞感。 3.微信小程序
1通信模型
小程序的渲染层和逻辑层分别由2个线程管理渲染层的界面使用了WebView 进行渲染逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面所以渲染层存在多个WebView线程这两个线程的通信会经由微信客户端下文中也会采用Native来代指微信客户端做中转逻辑层发送网络请求也经由Native转发,小程序的通信模型如下图所示。 渲染过程 这就是小程序双线程模型的由来
逻辑层创建一个单独的线程去执行 JavaScript在这个环境下执行的都是有关小程序业务逻辑的代码渲染层界面渲染相关的任务全都在 WebView 线程里执行通过逻辑层代码去控制渲染哪些界面。一个小程序存在多个界面所以渲染层存在多个 WebView 线程.
2双线程下的界面渲染
小程序的逻辑层和渲染层是分开的两个线程。在渲染层宿主环境会把WXML转化成对应的JS对象在逻辑层发生数据变更的时候我们需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层再经过对比前后差异把差异应用在原来的Dom树上渲染出正确的UI界面如下图所示。 界面渲染 小程序的渲染的整体流程
1.在渲染层把 WXML 转化成对应的 JS 对象。2.在逻辑层发生数据变更的时候通过宿主环境提供的 setData 方法把数据从逻辑层传递到 Native再转发到渲染层。3.经过对比前后差异把差异应用在原来的 DOM 树上更新界面。
总之小程序通过双线程的方式解决WebView存在的各种问题让小程序更加想Native的体验。
任何程序错误以及技术疑问或需要解答的请添加
