安微微享商盟小程序开发底层框架实现原理解析

小程序就是基于当前的WEB规范实现的一种程序，运行在微信里面，既然是基于WEB规范，那天然离不开HTML,CSS和JS，虽然微信官方给出了不同的名称：WXML,WXSS，但本质上仍是在整个WEB体系之下构建的。WXML vs HTML，你们想到了什么？XML有没有，HTML和WXML都是XML的一套子集，只是HTML有完整和通用的文档类型定义（DTD），WXML相对简单，仅仅是微信自定义的少许标签。WXSS vs CSS，你们能够理解为就是CSS，只是自动作了缩减和兼容处理，好比长度单位使用rpx，支持import导入。实现逻辑部分的JS仍是通用的ES规范，并无什么不一样，而且runtime仍是Webview（IOS WKWEBVIEW, ANDROID X5）

 

开发工具

微信web开发者工具（集成编辑，调试，预览和发布）

 

编辑功能比较弱，你们能够自行使用熟练的编辑器，我我的不太习惯，我仍是使用webstorm开发，可是调试必须在微信的编辑器，这个编辑器自动监听了文件的修改，每次修改后保存会自动刷新，进入指定的首页。

 

“微享商盟”依托于微信小程序，涵盖场景包括电商、零售、教育、医疗、金融等，.微享商盟解决实体店痛点：解决实体店现有的营销方案难以刺激消费者、被电商打压致使实体店生意愈来愈难作外卖成本愈来愈高的痛点微享商盟消费让利：基于区块链技术理念而开发，以消费让利的方式，让消费者重复消费，主动分享，持续关注。达到提高商家销量的目的。

安微微享商盟小程序开发底层框架实现原理解析，微享商盟小程序开发，微享商盟系统框架搭建，欢迎QQ交流：3505821819，134微信2220电话2839，java，.net，PHP,Web，Wap。

建议你们使用双显示器模式开发，通常是编辑，通常用于调试，效率会提升很多。

你们猜下这个编辑器是用什么实现的？

 

项目结构

 

官方demo目录结构和实际道聚城小程序的目录结构以下：

 

规定项目结构

一个入口文件：app.js

一个全局样式：app.wxss

一个全局配置：app.json

页面：pages下，每一个页面再按文件夹划分，每一个页面4个文件

视图：wxml，wxss 

逻辑：js，json（页面配置，不是必须）

 

注：pages里面还能够再根据模块划分子目录，孙子目录，只须要在app.json里注册时填写路径就行

 

以上是必须的文件和目录，而实际中咱们会增长别的目录，如lib，comm和utils等等目录，如道聚城小程序的目录结构

 

打包发布

 

开发完成后，咱们就能够经过这里可视化的按钮，点击直接打包上传发布，审核经过后用户就能够搜索到了。

咱们看到下面有几个关于打包的选项，怎么实现的呢？

 

这就涉及到这个编辑器的实现原理和方式了，它自己也是基于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包

 安微微享商盟小程序开发底层框架实现原理解析，微享商盟小程序开发，微享商盟系统框架搭建，欢迎QQ交流：3505821819，134微信2220电话2839，java，.net，PHP,Web，Wap。

坑：前期写的时候，使用了大量ES6的语法，在开发工具和IOS里都没发现问题，提交审核，提示有bug，特地提示是android机器，结果拿android机测试，果真有问题，最后定位问题，就是ES6语法致使的，在android上使用的x5内核，对ES6的支持很差，要兼容的话，要么使用ES5的语法或者引入babel-polyfill兼容库。

 

打包后的结构

 

小程序打包后的结构以下，开发模式下的不少文件都被打包了，具体怎么拿到上线后的正式包和怎么解压。

 

一、WAService.js  框架JS库，提供逻辑层基础的API能力

二、WAWebview.js 框架JS库，提供视图层基础的API能力

三、WAConsole.js 框架JS库，控制台

四、app-config.js 小程序完整的配置，包含咱们经过app.json里的全部配置，综合了默认配置型

五、app-service.js 咱们本身的JS代码，所有打包到这个文件

六、page-frame.html 小程序视图的模板文件，全部的页面都使用此加载渲染，且全部的WXML都拆解为JS实现打包到这里

七、pages 全部的页面，这个不是咱们以前的wxml文件了，主要是处理WXSS转换，使用js插入到header区域