基於釘釘平臺採用Weex解決方案的Vue微應用專案搭建步驟
名詞解釋：
Weex：Weex 是一套構建高效能，動態化高擴充套件的，原生應用跨平臺解決方案，一份程式碼可在Android IOS Web端同時執行的解決方案。其中方案（容器）包含native sdk、dingtalk sdk、weex專案、構建工具webpack、除錯工具、文件等；同等解決方案就是React Native原生開發；
侷限性：1、只能用webpack打包；2、構建器不同，weex用weex-loader，而vue用vue-loader；
好處：
1、快，原因Weex上層業務框架使用了現今非常流行的Vue2.0，可以理解為這是一套構建使用者介面的框架，而Weex做了一層Runtime通過Native DOM API，將需要渲染的描述資訊提交給Native，由Native來渲染最終的介面，這正是因為Weex比普通Web頁面在體驗，效能，穩定性方面要強上很多的原因；
Vue：這個就很火了，尤雨溪大神搭建的一套構建使用者介面的MVVM框架（開源渲染引擎）；
特點： 1.輕量級的框架 2.雙向資料繫結 3.指令 4.外掛化
優點：
1. 簡單：官方文件很清晰，比 Angular 簡單易學。
2. 快速：非同步批處理方式更新 DOM。
3. 組合：用解耦的、可複用的元件組合你的應用程式。
4. 緊湊：~18kb min+gzip，且無依賴。
5. 強大：表示式 & 無需宣告依賴的可推導屬性 (computed properties)。
6. 對模組友好：可以通過 NPM、Bower 或 Duo 安裝，不強迫你所有的程式碼都遵循 Angular 的各種規定，使用場景更加靈活。
缺點：
1. 市面上算是新生兒（14年2月釋出1.0，16年釋出的2.0，同年9月加入了Weex團隊，釘釘Weex的Vue接入應該就是他搞的）：Vue.js是一個新的專案，沒有angular那麼成熟。
2. 影響度不是很大但是很火，元件較少：。
3. 不支援IE8：
Weex+Vue接入：使用Vue2.0框架來編寫weex的上層業務（其他框架有Rax，we）
坑：
1、除錯toolkit 以及 devtool不友好，除錯困難；
2、釘釘環境調式需聯絡釘釘團隊；
好處：
1、受眾偏前端開發；
Weex+Rax接入：使用類react的Rax框架來編寫weex上層業務。Rax與React僅僅只是引入模組的不同的區別。可以使用redux驅動介面的渲染；
坑：
1、調式只支援IOS（可裝模擬器）
2、技術支援缺乏，社群較少；
好處：
1、提供NuKe豐富的元件生態；
2、dingtalk sdk 3、體驗度較HTML5 好 棒；
Weex Devtools：為weex前端和native開發工程師服務的一款除錯工具，可同時檢查weex裡DOM屬性和Javascript 程式碼斷點除錯，支援IOS和Android兩個平臺。
安裝：npm install -g weex-toolkit
使用：weex debug [options] [we_file|bundles_dir]
注：在裝置上或者模擬器除錯需安裝playbackground，具體debug流程見文件。
微應用：這是我們搭建在釘釘平臺上的一個應用，可製作我們需要的功能，同時可以呼叫一些釘釘提供的開放介面以及js呼叫原生的SDK；
其他：
Rax：是一個基於 React 寫法的跨容器的 js 框架（開源渲染引擎），偏向於解決多端問題，抹平各個端的差異，壓縮大小約8K，語法和react近似，react開發者上手迅速，口號：Write once, run everywhere，是對react這套標準的實現；
特點：
1、設計上支援不同容器，web、weex以及node容器（即微應用，web端，安卓，ios端都可）；
2、體積足夠小；
3、支援返回多個同級節點（react只能返回一個）減少crash；
4、標準化，遵循W3C，如可呼叫原生的API，alert、location、navigator、document等；
5、元件書寫JSX，它是JavaScript語法的一個語法對映，需Babel Babel-loader編譯，特點速度快；
6、使用webpack或者babel編譯器可以使基於React和Rax協同工作，完美相容。
React：是js的MVVM框架，偏向解決效能問題，大小約43K；
特點：1.宣告式設計：React採用聲明範式，可以輕鬆描述應用。2.高效：React通過對DOM的模擬，最大限度地減少與DOM的互動。3.靈活：React可以與已知的庫或框架很好地配合。
優點：
1. 速度快：在UI渲染過程中，React通過在虛擬DOM中的微操作來實現對實際DOM的區域性更新。
2. 跨瀏覽器相容：虛擬DOM幫助我們解決了跨瀏覽器問題，它為我們提供了標準化的API，甚至在IE8中都是沒問題的。
3. 模組化：為你程式編寫獨立的模組化UI元件，這樣當某個或某些元件出現問題是，可以方便地進行隔離。
4. 單向資料流：Flux是一個用於在JavaScript應用中建立單向資料層的架構，它隨著React檢視庫的開發而被Facebook概念化。
5. 同構、純粹的javascript：因為搜尋引擎的爬蟲程式依賴的是服務端響應而不是JavaScript的執行，預渲染你的應用有助於搜尋引擎優化。
6. 相容性好：比如使用RequireJS來載入和打包，而Browserify和Webpack適用於構建大型應用。它們使得那些艱難的任務不再讓人望而生畏。
缺點：並不是一個完整的生態框架，需搭配其他元件才能使得專案完整（如：ReactRouter等）
Salt：其中一種整體解決方案，使用Nowa作為工具層面支援，Nowa又是基於webpack的前端開發解決方案的集合，Nowa包含了前端開發生命週期中可能用到的所有工具。
SaltFetch：微應用資料層解決方案，提供了資料獲取（ajax/jsonp/tunnel）以及資料本地快取的能力。SaltFetch提供了語義化api，使用者可以無需關注底層資料獲取及快取的細節（資料來自網路還是本地快取？資料通過ajax、jsonp還是tunnel方式獲取？），所有底層繁瑣的操作實現均可交給SaltFetch解決。
SaltUI ：釘釘官方微應用基於React的UI元件庫，提供了微應用開發中常用設計元素的實現，旨在帶給開發者極速、便捷、一致的體驗，推薦使用Nowa作為專案開發工具。
salt-router：釘釘微應用提供路由及轉場解決方案，基於頁面預載入及轉場效果等原生能力，提供了一套簡明的路由api（當然也有可以使用Vue路由外掛以及釘釘的openLinkSDK來實現轉場）。
Nowa：在 Salt 的整體解決方案中，使用 Nowa 作為工具層面的支援；Nowa 是基於 webpack 的前端開發解決方案集合。包含一系列前端開發生命週期中可能使用到的工具。
mock：資料mock測試方案，全部由前端人員寫測試資料，可以避免資料庫汙染以及提高前後端工作效率，只需確定介面文件即可同步開發。
Angular：前端JS引擎框架；
特點：
1.良好的應用程式結構
2.雙向資料繫結
3.指令
4.HTML模板
5.可嵌入、注入和測試
優點：
1. 模板功能強大豐富，自帶了極其豐富的angular指令。
2. 是一個比較完善的前端框架，包含服務，模板，資料雙向繫結，模組化，路由，過濾器，依賴注入等所有功能；
3. 自定義指令，自定義指令後可以在專案中多次使用。
4. ng模組化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可複用的程式碼，對於敏捷開發的團隊來說非常有幫助。
5. angularjs是網際網路巨人谷歌開發，這也意味著他有一個堅實的基礎和社群支援。缺點：
1. angular 入門很容易 但深入後概念很多, 學習中較難理解.
2. 文件例子非常少, 官方的文件基本只寫了api, 一個例子都沒有, 很多時候具體怎麼用都是google來的, 或直接問misko,angular的作者.
3. 對IE6/7 相容不算特別好, 就是可以用jQuery自己手寫程式碼解決一些.
4. 指令的應用的最佳實踐教程少, angular其實很靈活, 如果不看一些作者的使用原則,很容易寫出 四不像的程式碼, 例如js中還是像jQuery的思想有很多dom操作.
5. DI 依賴注入 如果程式碼壓縮需要顯示宣告.
釘釘推薦weex解決方案跑在釘釘客戶端，同時也有一個web端，是構建三端一致很好的方案之一。
開始我們配置步驟：
- 在本地新建一個專案工程，如DingDemo；
- 開啟CMD，安裝node（6.9.4版本以上） npm管理器；
- 進入新建的專案工程地址，下載安裝腳手架，npm install -g weex-dingtalk-cli
dingtalk init webpack-simple dingding建立專案，並安裝一些必要的依賴，時間稍長；
- 接下來可能你會使用到一些釘釘原生API，同樣使用之前需要先引用，步驟，退出執行狀態，ctrl+c 選擇Y即可；鍵入npm install dingtalk-javascript-sdk --save下載；
報警告了，因為 fsevent是mac osx系統的，在win或者Linux下使用了 所以會有警告，解決方法就是刪除node_modules依賴檔案，重灌依賴即可，還不行，到package.json中刪除fsevents相關依賴；
- 接下來再執行專案，npm run dev:weex ,開啟home中index.vue 即可使用SDK了；
- 熱載入，修改起來很爽，快試試吧，希望對您有一點點幫助！
<template>
<div class="wrapper">
<text class="title" v-on:click="getClick">Hello Dingtalk Micro App {{ link }}，點我</text>
<text class="subtitle">這裡測試釘釘SDK</text>
</div>
</template>
<script>
import dingtalk from 'dingtalk-javascript-sdk';
var modal = weex.requireModule('modal');
export default {
name: 'home',
data: function(){
return {
link: ', author: Ime'
}
},
mounted: function(){
dingtalk.ready(function(){
const dd = dingtalk.apis;
// 設定導航
dd.biz.navigation.setTitle({
title: '微應用DEMO標題Ime'
});
});
dingtalk.error(function(err){
console.log(err);
});
},
methods: {
getClick: function(){
modal.toast({
message: 'Hello World ICEPY ! by Ime',
duration: 2
});
}
}
}
</script>
<style scoped>
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
width: 750px;
align-items: center;
}
.title {
font-size: 40px;
color: #505050;
text-align: center;
}
.subtitle {
display: block;
font-size: 30px;
color: #AAAAAA;
text-align: center;
margin-top: 20px;
}
.bind-vue-container {
width: 702px;
height: 88px;
justify-content: center;
align-items: center;
border-radius: 6px;
background-color: #4fc08d;
}
.bind-vue{
font-size: 34px;
color: #ffffff;
text-align: center;
}
</style>效果：
安裝weex-toolkit除錯：
最後就可以愉快的玩耍了！謝謝