如何给APP开发属于自己的小程序

前言

  工欲善其事，必先利其器。

  首先，我们需要知道微信小程序是什么？微信小程序内核是什么？微信小程序的开发语言什么？这样才能更好的开发微信小程序，以及解决遇到的问题。

一、微信小程序是什么

微信小程序是一个依托于微信，微信提供一个接口运行浏览器内核上的一个程序。

  微信小程序是一个小程序可以有很多页面，每个页面承载不同的功能，页面之间可以互相跳转。小程序分为渲染层和逻辑层，渲染层中包含了多个 WebView，每个 WebView 对应到我们的小程序里就是一个页面 Page，每一个页面都独立运行在一个页面层级上。它也可以做得很丰富，就像native app一样，可以调用原生的各种接口，像网络状态、罗盘，重力，拨打电话等

二、微信小程序内核是什么

微信小程序的编译内核环境根据不同平台而不同。

• 在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore 中
• 在 Android 上，小程序的 javascript 代码是通过 X5 内核来解析
• 在 开发工具上， 小程序的 javascript 代码是运行在 nwjs（chrome内核） 中

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?language=objc)

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所示。

表1-1 小程序的运行环境

运行环境	逻辑层	渲染层
iOS	JavaScriptCore	WKWebView
安卓	X5 JSCore	X5浏览器
小程序开发者工具	NWJS	Chrome 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的体验。

任何程序错误，以及技术疑问或需要解答的，请添加