簡介
TouchUI-WX是一套完全免費的微信小程式開發架構，包含豐富的UI控件用于官方元件的補充。與TouchUI開發方式很相似，也是通過VSCode編輯器+插件的方式開發，經過編譯後輸出小程式代碼。與其他小程式架構最主要的差別在于：TouchUI-WX完全是基于小程式官方的自定義元件機制實作，輸出的是小程式原始代碼，而不是輸出開發者完全無法閱讀的編譯代碼。這樣當遇到問題時，開發者可以很友善的定位問題所在，還可以基于輸出的原始代碼繼續開發。當你用TouchUI開發了H5應用，可以直接導入到TouchUI-WX進行轉換，稍作調整就能生成小程式。反之也同樣，當你TouchUI-WX開發了微信小程式，可以導出為TouchUI工程來生成H5應用。
位址：http://www.touchui.io/wx.html
GitHub : https://github.com/uileader/touchuiwx
特點
1、元件擴充：
增加了30多種常用的元件用于官方元件的補充。
2、功能擴充：
相容阿裡的iconfont圖示庫，海量矢量圖示随意使用；補充了常用樣式庫、支援less文法、支援全局配置主題色等
3、開發體驗改善：
四檔案方式改為單檔案方式，通過VSCode編輯器+插件的方式開發，擁有web開發體驗；
4、小程式轉為H5應用：
可以與H5開發架構TouchUI工程互相轉換，釋出成webApp。開發一套代碼，擁有兩套應用。
這套架構的原理是：
将TouchUI-WX工程中所寫的代碼進行編譯，直接輸出為微信小程式工程原始代碼。擴充的30多種元件，完全是基于小程式官方的自定義元件機制實作（row&col除外）。
是以它支援小程式的全部文法，怎麼開發小程式，就怎麼開發TouchUI-WX。
不過因為是單檔案的開發方式，在檔案的代碼結構上稍有不同。請注意這一點。
這樣好處在于：
1、開發者遷移成本很小。
可以輕松的将已有的小程式移植為TouchUI-WX工程，來使用它的擴充能力；
2、便于排查錯誤。
當遇到問題時，開發者也可以随時檢視輸出的小程式原始代碼來定位問題所在。不會搞不清楚到底是架構問題還是自己代碼的問題；
3、按需編譯
由于小程式對體積有限制，在使用架構開發時，隻有使用到的元件才會編譯輸出為小程式源碼。沒用到的不會輸出。
4、不會對架構産生依賴。
以後不想用了這套架構，可以直接對已經輸出的小程式工程進行維護。
注意事項：
在安裝環境導入工程後，由于此工程沒有包含項目依賴，需要先識别為TouchUI WX工程并使用右鍵菜單安裝項目依賴。
環境安裝
TouchUI WX支援在Windows上開發或者在Mac開發。
在使用TouchUI WX前，我們需要安裝node以及開發工具。
微信開發者工具安裝
下載下傳位址:
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.htmlnode安裝
我們推薦使用node 6.10.0，node下載下傳位址：
- https://npm.taobao.org/mirrors/node/v6.10.0/node-v6.10.0-x64.msi Windows64位下載下傳
- https://npm.taobao.org/mirrors/node/v6.10.0/node-v6.10.0-x86.msi Windows32位下載下傳
- https://npm.taobao.org/mirrors/node/v6.10.0/node-v6.10.0.pkg
macOS系統下載下傳
安裝成功後，windows電腦可以通過cmd，macOS可以通過終端 輸入 node -v 來驗證是否安裝成功。安裝成功會彈出如圖所示：
實作小程式與HTML5應用互轉架構之TouchUI-WX推薦
開發工具下載下傳
進入官網進行下載下傳。Visual Studio Code下載下傳位址：
https://code.visualstudio.comTouchUI WX構成
TouchUI WX插件，提供右鍵菜單，通過可視化的方式來執行指令
touchui-wx-cli 腳手架環境 ，需要手動全局安裝
touchui-wx-components元件庫， 在使用插件建立工程時會自動安裝項目依賴，其中包含了這部分。
安裝插件
1、下載下傳安裝完成後，打開Visual Studio Code。我們需要安裝一些插件來幫助我們更好的進行開發。
TouchUI WX架構提供的插件：TouchUI WX，提供啟動／停止開發服務、編譯、轉換等功能。
接下來，我們來學習如果在Visual Studio Code中如何安裝插件。
首先我們需要點選擴充，如下圖所示的紅框位置。
在這裡可以搜尋我們想要安裝的插件，找到TouchUI WX ，然後點選安裝。
2、安裝完成後，會顯示重新加載。我們點選重新加載，這個插件就可以使用了。
3、除了TouchUI WX之外，還需要安裝Vue相關的插件。比如Vetur E。Vetur E是我們基于vue文法插件Vetur進行了擴充，具有微信小程式API文法提示功能。
插件安裝的方法，和之前安裝TouchUI WX的方法一緻。
因為TouchUI WX是基于Vue來做的。在我們的架構中，使用
.wx
和
.wxa
為字尾，安裝Vue相關的插件後，我們會自動将
.wx
.wxa
檔案以Vue語言識别。
4、由于連接配接的是微軟伺服器下載下傳插件，國内網絡有可能會出現無法正常下載下傳的情況。如果長時間無法下載下傳插件可以嘗試使用手機熱點連接配接wifi下載下傳。
全局安裝touchui-wx-cli
windows電腦可以通過cmd，macOS可以通過終端。或者直接啟動Visual Studio Code在終端欄目裡輸入以下：
npm install -g touchui-wx-cli
如果沒有終端欄目，可通過以下方式打開。
檢視是否安裝成功
tui -v
如果windows系統無法成功安裝touchui-wx-cli，可能需要以管理者身份啟動指令行工具（如果是win10也可以直接打開PowerShell）
全局更新touchui-wx-cli
當開發過程中，如果插件提示需要更新touchui-wx-cli。
或者在更新說明的文檔中，有較高版本。
則需要使用以下指令進行更新。
全局更新。【如果該指令未成功更新到想要的版本，可以通過下面的指令。】
npm update touchui-wx-cli -g
全局安裝指定版本。例如安裝1.0.89
npm install [email protected] -g
安裝成功後可通過以下指令檢視版本
tui -v
更新touchui-wx-components
當開發過程中，如果插件提示需要更新touchui-wx-components。或者在更新說明的文檔中，有較高版本，則需要使用以下指令進行更新。
更新。【如果該指令未成功更新到想要的版本，可以通過下面的指令。】
npm update touchui-wx-components
安裝指定版本。例如安裝1.0.89
npm install [email protected] 安裝成功後可以通過以下指令檢視版本
npm list touchui-wx-components 第一個微信小程式
在安裝好需要的開發工具後，就可以使用工具開始建立我們的第一個應用啦！
使用TouchUI WX建立基礎工程
1、首先需要手動建立一個空檔案夾，作為示範，我們建立一個touchuiwx-test檔案夾
2、建立完成後，使用Visual Studio Code打開該檔案。在檔案夾箭頭展開的情況下，點選右鍵，選擇 TouchUI WX建立基礎工程。
3、這時候會要求輸入一個項目名稱。
4、 輸入名稱後回車進行下一步。
這時主要會做三件事情。
4.1、建立了基礎工程所需要的檔案。
4.2、自動安裝項目依賴。
可以看到輸出欄目輸出了一些資訊，這時候需要稍等片刻。
4.3、自動編譯輸出dist檔案目錄。當看到輸出下圖所示内容後，表示内容檔案建立完畢。可以看到我們建立的項目有一個dist目錄。
dist目錄中存放的是TouchUI WX工程編譯後的小程式項目工程。可直接通過微信開發者工具打開預覽。
預覽TouchUI WX工程
1、按照提示，打開微信開發者工具建立一個小程式項目。在如圖所示的項目目錄裡，指向建立的touchuiwx-test工程中的dist目錄，填入對應的資訊。
選擇dist目錄
2、填寫完成，點選确認後。就可以看到我們建立的基礎工程。如圖所示：
啟動TouchUI WX工程
建立基礎工程後，會在dist目錄中，生成小程式的初始工程檔案。當你在開發的時候，需要先啟動開發服務，這樣每次在新增或修改頁面時，會将檔案差量的輸出到dist目錄中。
1、右鍵，選擇TouchUI WX啟動開發服務。會自動跳至終端欄目執行
tui dev
指令。
2、當啟動開發服務後，假設我們修改了index.wx檔案。儲存後，會将修改後的該檔案編譯成index.html、index.js、index.json、index.wxss至對應dist目錄中。
3、如果是修改app.wxa檔案，會全部重新輸出到dist中
建立頁面
1、建立頁面時，希望建立在哪個目錄，就在目錄位置右鍵。
2、彈出以下視窗。要求輸入檔案名稱，以test為例。輸入檔案名稱後回車。
3、會繼續要求輸入檔案标題，以測試為例。輸入的檔案标題會作為“navigationBarTitleText”顯示。
4、回車确認後，建立test.wx檔案，并且會将該頁面的路徑自動加入到app.wxa中的路由配置清單中。
TouchUI WX識别為TouchUI WX工程
在多人開發中，可能會遇到我們的項目并不是自己建立的，而是通過他人傳輸，或者是git／svn來克隆下來的，在這種情況下，項目基礎目錄已經完整，但是可能會出現右鍵菜單并沒有 TouchUI WX 啟動開發服務 這一項。這是因為我們的項目并沒有識别為 TouchUI WX工程。 是以需要展開項目，右鍵并選擇 TouchUI WX 識别為TouchUI WX工程 。
另外，如果已經安裝了vetur E插件， 但代碼頁面沒有顔色，如下圖所示：
這同樣也是由于項目未識别為TouchUI WX導緻。識别為TouchUI WX工程後，會生成一個.vscode目錄。
在settings.json檔案中，寫入了以下配置。
{
"touchuiwx.enable": true,
"vetur.extensions": [
".wxa",
".wx"
],
"files.associations": {
"*.wxa": "vue",
"*.wx": "vue"
},
"git.ignoreLimitWarning": true
}
識别為TouchUI WX工程後，項目代碼會按照vue格式來進行識别，進行着色。
一般在git或者其他的代碼庫裡，我們會對node_modules檔案進行忽略。 是以在識别為TouchUI WX項目後，需要安裝依賴。
導入與導出
當你用TouchUI開發了H5應用，可以直接導入到TouchUI-WX進行轉換，稍作調整就能生成小程式。
反之也同樣，當你TouchUI-WX開發了微信小程式，可以導出為TouchUI工程來生成H5應用。
工程目錄結構
TouchUI WX項目目錄：
dist用于放TouchUI WX工程編譯後的檔案，可直接使用微信開發者工具打開。
node_modules用于放依賴。
pages用于放示例頁面。
static用于放常用庫和靜态資源等。
.vscode目錄裡寫入了一些設定。例如将wx,wxa識别為vue等。
package.json是描述安裝依賴資訊。
app.wxa是主架構檔案。
每個界面都是由.wx檔案構成。可以放在根目錄也可以放在子目錄。一般可以将第一個界面的.wx檔案放在根目錄，其他檔案放在子目錄。
主架構頁面
如果你開發過微信小程式，會知道微信小程式工程的根目錄有3個檔案：app.js app.wxss app.json。
在TouchUI-WX工程中，使用app.wxa來代替這3個檔案。該檔案是TouchUI-WX的主架構檔案，也隻能放在根目錄，并且不能改名。
微信小程式中，原來寫在app.json的配置現在都在app.wxa中進行配置，原來寫在app.js的代碼也都寫在app.wxa的scrpt标簽中。如下：
在使用開發工具建立頁面時，會自動在config的pages節點中插入路徑。
隻有在pages節點下添加了路徑，才會輸出小程式頁面到dist中，沒有添加路徑則不會輸出小程式頁面
内容頁面
在TouchUI-WX中采用單檔案的開發方式， 一個基本的page.wx檔案代碼如下：
<template> <view>
内容部分
</view> </template> <script> export default {
config: {
navigationBarTitleText: '頁面标題'
},
data: {
},
navigateBack () {
wx.navigateBack()
}
}
</script> <style lang="less"> </style> 原來微信小程式4個檔案都合并到了這一個檔案中。其中：
page.wxml的内容寫在template節點下方，最好用一個view作為根節點；
page.js 的内容寫在export default { }中。一個.wx頁面隻能有一個export default { }，所有JS邏輯都要寫在這裡；
page.json 的配置項内容寫在export default { }中的config節點下；
page.wxss的樣式寫在
<style lang="less">
裡面，支援Less文法。
原文釋出時間： 06/01
原文作者：五個半檸檬
本文來源
開源中國如需轉載請緊急聯系作