小程序开发原理是什么 _小程序

文章插图

小程序是基于WEB规范，采用html,
更多技巧请《转发 + 关注》哦！css和JS等搭建的一套框架，微信官方给它们取了一个非常牛逼的名字：WXML,WXSS，但本质上还是在整个WEB体系之下构建的。
WXML，个人推測在取这个名字的是微信的Xml，说究竟就是xml的一个子集。
WXML采用微信自己定义的少量标签WXSS，大家能够理解为就是自己定义的CSS 。实现逻辑部分的JS还是通用的ES规范。而且runtime还是Webview（IOS WKWEBVIEW, Android X5）。
小程序
小程序文件夹结构

文章插图

一个完整的小程序主要由下面几部分组成：
一个入口文件：App.js
一个全局样式：app.wxss
一个全局配置：app.json
页面：pages下。每一个页面再按文件夹划分。每一个页面4个文件
视图：wxml，wxss
逻辑：js 。json（页面配置，不是必须）
注：pages里面还能够再依据模块划分子文件夹，孙子文件夹。仅仅须要在app.json里注冊时填写路径即可。
小程序打包
开发完毕后。我们就能够通过这里可视化的button 。点击直接打包上传公布，审核通过后用户就能够搜索到了。

文章插图

相关推荐：《微信小程序》
那么打包怎么实现的呢？
这就涉及到这个编辑器的实现原理和方式了。它本身也是基于WEB技术体系实现的，nwjs+react，nwjs是什么：简单是说就是node+webkit，node提供给我们本地api能力，而webkit提供给我们web能力，两者结合就能让我们使用JS+HTML实现本地应用程序。
既然有nodejs，那上面的打包选项里的功能就好实现了。
ES6转ES5：引入babel-core的node包
CSS补全：引入postcss和autoprefixer的node包（postcss和autoprefixer的原理看这里）
代码压缩：引入uglifyjs的node包
注：在android上使用的x5内核。对ES6的支持不好。要兼容的话，要么使用ES5的语法或者引入babel-polyfill兼容库。
打包后的文件夹结构
小程序打包后的结构例如以下：

文章插图

全部的小程序基本都最后都被打成上面的结构
1、WAService.js 框架JS库。提供逻辑层基础的API能力
2、WAWebview.js 框架JS库，提供视图层基础的API能力
3、WAConsole.js 框架JS库。控制台
4、app-config.js 小程序完整的配置。包括我们通过app.json里的全部配置，综合了默认配置型
5、app-service.js 我们自己的JS代码，全部打包到这个文件
6、page-frame.html 小程序视图的模板文件，全部的页面都使用此载入渲染。且全部的WXML都拆解为JS实现打包到这里
7、pages 全部的页面。这个不是我们之前的wxml文件了，主要是处理WXSS转换，使用js插入到header区域。
小程序架构
微信小程序的框架包括两部分View视图层、App Service逻辑层。View层用来渲染页面结构，AppService层用来逻辑处理、数据请求、接口调用。它们在两个进程（两个Webview）里执行。
视图层和逻辑层通过系统层的JSBridage进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。
小程序架构图：

文章插图

小程序启动时会从CDN下载小程序的完整包。通常是数字命名的,如：_-2082693788_4.wxapkg
小程序技术实现
小程序的UI视图和逻辑处理是用多个webview实现的，逻辑处理的JS代码全部载入到一个Webview里面，称之为AppService，整个小程序仅仅有一个。而且整个生命周期常驻内存，而全部的视图（wxml和wxss）都是单独的Webview来承载，称之为AppView 。所以一个小程序打开至少就会有2个webview进程，正式由于每一个视图都是一个独立的webview进程，考虑到性能消耗，小程序不同意打开超过5个层级的页面，当然同是也是为了体验更好。
AppService
能够理解AppService即一个简单的页面，主要功能是负责逻辑处理部分的执行，底层提供一个WAService.js的文件来提供各种api接口，主要是下面几个部分：
消息通信封装为WeixinJSBridge（开发环境为window.postMessage, IOS下为WKWebview的window.webkit.messageHandlers.invokeHandler.postMessage 。android下用WeixinJSCore.invokeHandler）