安微微享商盟小程序開發底層框架實現原理解析

小程序就是基於當前的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區域