這篇文章主要介紹了Vue中Weex怎么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

員工經(jīng)過長期磨合與沉淀，具備了協(xié)作精神，得以通過團(tuán)隊(duì)的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。成都創(chuàng)新互聯(lián)堅(jiān)持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因?yàn)椤皩Ｗ⑺詫I(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡單”。公司專注于為企業(yè)提供網(wǎng)站制作、成都做網(wǎng)站、微信公眾號開發(fā)、電商網(wǎng)站開發(fā)，小程序開發(fā)，軟件按需求定制制作等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。

一、開發(fā)環(huán)境

在這個(gè) Weex app 開發(fā)中，我的開發(fā)環(huán)境相關(guān)配置如下：

工具名稱	版本號
Node.js	8.2.1
Npm	5.3.0
Android Studio	3.2
Weex	2.0.0-beta.17
JDK	1.8
Weex-ui	0.6.14

2.1、Weex 理念二、Weex 介紹

“Write once, run everywhere”, Weex 的定義就像是：寫個(gè) vue 前端，順便幫你編譯成性能還不錯的 apk 和 ipa（當(dāng)然，現(xiàn)實(shí)有時(shí)很骨感）。基于 Vue 設(shè)計(jì)模式，支持 web、android、ios 三端，原生端同樣通過中間層轉(zhuǎn)化，將控件和操作轉(zhuǎn)化為原生邏輯來提高用戶體驗(yàn)。 在 weex 中，主要包括三大部分：JS Bridge、Render、Dom，分別對應(yīng)WXBridgeManager、WXRenderManager、WXDomManager，三部分通過 WXSDKManager 統(tǒng)一管理。其中 JS Bridge 和 Dom 都運(yùn)行在獨(dú)立的 HandlerThread 中，而 Render 運(yùn)行在 UI 線程。 JS Bridge 主要用來和 JS 端實(shí)現(xiàn)進(jìn)行雙向通信，比如把 JS 端的 dom 結(jié)構(gòu)傳遞給 Dom 線程。Dom 主要是用于負(fù)責(zé) dom 的解析、映射、添加等等的操作，最后通知 UI 線程更新，而 Render 負(fù)責(zé)在 UI 線程中對 dom 實(shí)現(xiàn)渲染。
Weex 所有的標(biāo)簽也不是真實(shí)控件，JS 代碼中所生成存的 dom，最后都是由 Native 端解析，再得到對應(yīng)的 Native控件渲染，如 Android 中標(biāo)簽對應(yīng) WXTextView 控件。 Weex 中文件默認(rèn)為 .vue ，而 vue 文件是被無法直接運(yùn)行的，所以 vue 會被編譯成 .js 格式的文件，Weex SDK會負(fù)責(zé)加載渲染這個(gè) js 文件。Weex 可以做到跨三端的原理在于：在開發(fā)過程中，代碼模式、編譯過程、模板組件、數(shù)據(jù)綁定、生命周期等上層語法是一致的。不同的是在 JS Framework 層的最后，web 平臺和 Native 平臺，對 Virtual DOM 執(zhí)行的解析方法是有區(qū)別的。

2.2 創(chuàng)建 Weex 項(xiàng)目

Weex 提供了一個(gè)命令行工具 weex-toolkit 來幫助開發(fā)者使用 Weex，它可以用來快速創(chuàng)建一個(gè)空項(xiàng)目、初始化 iOS 和 Android 開發(fā)環(huán)境、調(diào)試、安裝插件等操作。

我們可以通過以下步驟創(chuàng)建一個(gè)基礎(chǔ)的 Weex 項(xiàng)目：

（1）安裝 weex-toolkit 工具

npm install weex-toolkit -g

（2）創(chuàng)建新項(xiàng)目

weex create weex_project

（3）安裝項(xiàng)目依賴

cd weex_project
npm install

（4）啟動項(xiàng)目

npm start

項(xiàng)目啟動完畢，瀏覽器窗口會自動打開項(xiàng)目首頁，如下圖所示：

（5）添加 原生Android 平臺

weex platform add android

（6）運(yùn)行下面的命令，可以在模擬器或真實(shí)設(shè)備上啟動 Android 應(yīng)用：

weex run android

2.3、運(yùn)行Weex項(xiàng)目

2.3.1、啟動服務(wù)端應(yīng)用

（1）進(jìn)入目錄 weex_project/backend/，安裝服務(wù)端應(yīng)用所需要的插件包：

$ npm install

（2）啟動服務(wù)端應(yīng)用

$ npm run start

2.3.2、啟動 Weex 應(yīng)用

（1）如果你還沒安裝 weex 工具，可以運(yùn)行以下命令進(jìn)行安裝：

$ npm install -g weex-toolkit

（2）安裝項(xiàng)目需要的插件包：

$ npm install

（3）啟動項(xiàng)目：

$ npm run start

三、Weex 常用的 VSCode 插件

Weex為VSCode提供了一些常用的插件，可以提高開發(fā)效率：

• weex-new-project - 用于在 VSCode 中創(chuàng)建Weex項(xiàng)目；

• weex-lang - 用于在 VSCode 中對最新的 Weex 語法進(jìn)行支持；

• weex-doctor - 用于檢查 iOS 和 Android 本地開發(fā)環(huán)境；

• weex-debugger - 用于在 VSCode 中啟動Weex調(diào)試工具；

• weex-run - 用于在熱更新模式下啟動 Android 及 iOS 工程；

3.1、weex-run

可以使用截圖的步驟來安裝 weex-run插件，可以自行搜索如何安裝VSCode插件。

（2）啟動 Android 項(xiàng)目

啟動成功控制臺會輸出一堆日志，如下圖。

Weex自帶熱更新功能，接下來，我們查看 Android 項(xiàng)目的熱更新。

3.2、weex-debugger

（1）安裝 weex-debugger 插件，安裝過程和安裝weex-run插件類似。
（2）ctrl + shift + p 彈出命令輸入框，如下圖所示輸入：weex debug，然后網(wǎng)頁會出現(xiàn)第 2 張截圖的二維碼：

（3）用手機(jī)的 Weex Playground App 的二維碼進(jìn)行掃描，出現(xiàn)以下調(diào)試頁面（一定一定要注意，手機(jī)連的 WiFi 和 你開發(fā)本地網(wǎng)絡(luò)在同一局域網(wǎng)）。

（4）再用手機(jī)的 Weex Playground App 的二維碼掃描 Weex 應(yīng)用的二維碼，調(diào)試頁面就會變成對應(yīng)的 Weex 應(yīng)用的調(diào)試頁面，如下圖所示。

四、Weex 項(xiàng)目實(shí)戰(zhàn)

4.1、項(xiàng)目目錄路徑

下面通過一個(gè)Weex 項(xiàng)目來說明Weex的一些基礎(chǔ)，項(xiàng)目目錄結(jié)構(gòu)如下：

4.2、功能模塊設(shè)計(jì)

考慮到更好的體驗(yàn) Weex 和 H5 在開發(fā)效率、功能性能、用戶體驗(yàn)等方面的差異性，我們對功能模塊進(jìn)行精心設(shè)計(jì)，主要基于我們現(xiàn)有的實(shí)際項(xiàng)目的業(yè)務(wù)進(jìn)行開發(fā)，并結(jié)合移動端特有的特性。
相關(guān)的模塊功能設(shè)計(jì)如下圖所示，其中紅色標(biāo)注部分表示，受限于開發(fā)資源、Weex 生態(tài)方面原因，我們暫時(shí)還沒完成全部功能的開發(fā)。

4.3、功能界面展示

下面是Weex示例項(xiàng)目截取一些功能界面展示，如下圖：

4.4、重要功能介紹

除了一些常規(guī)的功能開發(fā)外，以下介紹的幾個(gè)功能在 Weex 官網(wǎng)中并沒有詳細(xì)介紹或者根本沒有介紹，我們在開發(fā)過程中踩了不少坑，因此將踩坑經(jīng)驗(yàn)進(jìn)行匯總，幫助大家避免踩坑：

（1）登錄 token 認(rèn)證
（2）圖片選擇/上傳功能
（3）websocket 功能實(shí)現(xiàn)
（4）手機(jī)物理鍵返回上一級功能
（5）Android 如何顯示本地圖片

4.4.1、token 認(rèn)證功能

（1）token 認(rèn)證介紹

在 Web 領(lǐng)域基于 token 的身份驗(yàn)證隨處可見。在大多數(shù)使用 Web API 的互聯(lián)網(wǎng)公司中，tokens 是多用戶下處理認(rèn)證的最佳方式。token 具有以下特性：

• 無狀態(tài)、可擴(kuò)展

• 支持移動設(shè)備

• 跨程序調(diào)用

• 安全

基于 token 的身份驗(yàn)證的過程如下：

• 用戶通過用戶名和密碼發(fā)送請求。

• 服務(wù)端程序驗(yàn)證。

• 程序返回一個(gè)簽名的 token 給客戶端。

• 客戶端儲存 token，并且每次用于每次發(fā)送請求。

• 服務(wù)端驗(yàn)證 token 并返回?cái)?shù)據(jù)。

（2）weex 和 express 之間實(shí)現(xiàn) token 認(rèn)證

express 服務(wù)端主要使用 express-jwt 插件，express-jwt 是 nodejs 的一個(gè)中間件，內(nèi)部對 jsonwebtoken 進(jìn)行封裝使用。express-jwt 會驗(yàn)證指定 http 請求的 jsonwebtoken 的有效性，如果有效就將 jsonwebtoken 的值設(shè)置到 req.user 里面，然后跳轉(zhuǎn)到相應(yīng)的 router。

以下是服務(wù)端 express 的代碼邏輯，代碼如下：

var expressJWT = require('express-jwt');
// token 設(shè)置
app.use(expressJWT({
 secret: CONSTANT.SECRET_KEY
}).unless({
 // 除了以下配置的地址，其他的URL都需要驗(yàn)證
 path: ['/getToken', /^\/public\/.*/, /^\/user_disk\/.*/]
}));

// 登錄時(shí)，需要進(jìn)行用戶密碼認(rèn)證，相應(yīng)路由跳轉(zhuǎn)到下面一步
app.use('/getToken', tokenRouter);

// 當(dāng)用戶密碼正確時(shí)，我們進(jìn)行 token 設(shè)置
data: {
 token: jsonWebToken.sign({
 uid: obj.uid
 }, CONSTANT.SECRET_KEY, {
 expiresIn: 60 * 60 * 1
 }),
}

對應(yīng)的Weex的代碼如下：

// Weex 登錄邏輯
login () {
 let param = {
 uid: this.uid,
 password: this.password
 };
 let options = {
 url: '/getToken',
 method: 'POST',
 body: JSON.stringify(param)
 };
 let vm = this;
 api.fetch(options, function (ret) {
 if (ret.ok && ret.data.code === 0) {
 // 前端可以獲取到服務(wù)端返回的 token ，并將其作為全局變量 
 global.token = 'Bearer ' + ret.data.data.token;
 vm.$router.push('/tabIndex');
 } else {
 modal.toast({
 message: '用戶認(rèn)證失敗!',
 duration: 1
 });
 }
 });
}

// Weex 的每次請求，頭部都帶上 token
initOptions.headers['Authorization'] = global.token;

經(jīng)過以上代碼邏輯處理后，我們查看 Weex 向服務(wù)端發(fā)送的請求頭部，都攜帶了 token，如下圖所示。這樣服務(wù)端 express 處理這個(gè)請求時(shí)，就可以通過解析 token 獲取到對應(yīng)的用戶 id ，從而允許其對服務(wù)端的數(shù)據(jù)訪問。

4.4.2、圖片選擇/上傳功能

（1）存在問題

很遺憾，Weex 竟然沒有提供文件選擇/上傳的模塊，對于前端開發(fā)者來說無疑晴天霹靂，那我不是要手動去寫 Android 的 java 代碼，經(jīng)過反復(fù)查找，真的沒有文件選擇/上傳模塊，于是我們只能自己去寫 Java 代碼去實(shí)現(xiàn) Android 端圖片選擇以及上傳功能。當(dāng)然，也可以使用一些第三方的插件。

（2）實(shí)現(xiàn) Android 原生的圖片選擇/上傳功能

在 weex_projectplatformsandroidappsrcmainjavacomweexappextend 目錄下新建 圖片上傳 模塊的類 WXAlbumModule ，其繼承 WXModule ，其主要兩個(gè)方法為 choosePhoto 和 onActivityResult ，其中 choosePhoto 用于給 Weex 前端來調(diào)用，當(dāng) Weex 前端需要選擇相冊中的圖片時(shí)，Weex 前端就調(diào)用 choosePhoto 方法；onActivityResult 是用戶選擇好相冊中的圖片后，會相應(yīng)觸發(fā)該事件，并將用戶選擇的相片以參數(shù)形式傳入 onActivityResult ，從而我們可以在 onActivityResult 中進(jìn)行圖片的上傳邏輯，圖片上傳完成后，Android 端會在回調(diào)事件中通知前端，圖片放置在服務(wù)端的目錄路徑，前端可以對應(yīng)進(jìn)行圖片顯示等操作。關(guān)鍵代碼邏輯如下，如果如果對 Java 完全一無所知的同學(xué)可以先不看，懂 java 代碼的建議結(jié)合項(xiàng)目代碼來看，會更清晰。

例如，下面是Android端封裝的

@JSMethod(uiThread = true)
// 給 Weex 前端調(diào)用，當(dāng)用戶點(diǎn)擊時(shí)，調(diào)用該函數(shù)
public void choosePhoto(String param, JSCallback callback) {
 if (ContextCompat.checkSelfPermission(mWXSDKInstance.getContext(),
 Manifest.permission.WRITE_EXTERNAL_STORAGE)
 != PackageManager.PERMISSION_GRANTED) {
 ActivityCompat.requestPermissions((WXPageActivity) mWXSDKInstance.getContext(),
 new String[]{Manifest.permission.WRITE_EXTERNAL_STORAGE},
 CAMERA_REQUEST_CODE);
 } else {
 choosePhoto();
 }
 try{
 JSONObject jsonObject = new JSONObject(param);
 this.type = (String)jsonObject.get("type");
 this.path = (String)jsonObject.get("path");
 this.url = (String)jsonObject.get("url");
 this.token = (String)jsonObject.get("token");
 }catch (JSONException e){
 e.printStackTrace();
 }
 this.callback = callback;
}

選擇完成后，系統(tǒng)會返回圖片的信息，此時(shí)就可以進(jìn)行上傳操作，如下所示：

@Override
// 用戶選擇好相冊中的圖片后，會相應(yīng)觸發(fā)該事件，并將用戶選擇的相片以參數(shù)形式傳入
public void onActivityResult(int requestCode, int resultCode, Intent data) {
 if (resultCode == WXPageActivity.RESULT_OK) {
 switch (requestCode) {
 case CAMERA_REQUEST_CODE: {
 try {
 Uri selectedImage = data.getData();
 String[] filePathColumns = {MediaStore.Images.Media.DATA};
 Cursor c = mWXSDKInstance.getContext().getContentResolver().query(selectedImage, filePathColumns, null, null, null);
 c.moveToFirst();
 int columnIndex = c.getColumnIndex(filePathColumns[0]);
 String picturePath = c.getString(columnIndex);
 c.close();

 //上傳的文件
 File file = new File(picturePath);
 // 普通參數(shù)
 HashMap<String , String> params = new HashMap<>();
 params.put("path", this.path);
 uploadForm(params, "file", file, "", this.url);

 } catch (Exception e) {
 e.printStackTrace();
 }
 break;
 }
 }
 }
 super.onActivityResult(requestCode, resultCode, data);
}

實(shí)現(xiàn)好以上選擇圖片和上傳圖片的代碼邏輯后，我們需要在 weex_projectplatformsandroidappsrcmainjavaWXApplication.java 中進(jìn)行模塊的注冊，代碼邏輯如下：

WXSDKEngine.registerModule("wxalbum", WXAlbumModule.class);

然后，Weex 前端調(diào)用注冊的原生模塊即可，如下所示：

const WXAlbum = weex.requireModule('wxalbum');

upload () {
 let path = 'public/upload/';
 let vm = this;
 storage.getItem('token', event => {
 let param = {
 type: 'image/jpeg', // 選擇的數(shù)據(jù)類型
 path: path,
 url: CONSTANT.SERVER_URL + '/users/upload',
 token: event.data
 };
 WXAlbum.choosePhoto(JSON.stringify(param), ret => {
 let obj = JSON.parse(ret);
 vm.imgPath = '/' + path + obj.file[0].originalFilename;
 modal.alert({
 message: vm.imgPath,
 okTitle: '確認(rèn)'
 }, function () {
 console.log('alert callback')
 })
 });
 })
},

4.4.3、WebSocket 功能實(shí)現(xiàn)

（1）存在問題

Weex 官網(wǎng)的 webSocket 章節(jié)特意標(biāo)注以下警告字眼：
h6 提供 WebSockets 的 protocol 默認(rèn)實(shí)現(xiàn)，iOS 和 Android 需要自定義實(shí)現(xiàn)，Android 可參考:

• DefaultWebSocketAdapter.java

• DefaultWebSocketAdapterFactory.java

好吧，根本沒有封裝 WebSocket 功能，那我就按官網(wǎng)給的參考來實(shí)現(xiàn)吧，于是，我點(diǎn)擊前面兩個(gè)參考鏈接，鏈接打開的頁面根本不存在，報(bào) 404（官網(wǎng)出現(xiàn)這種問題，實(shí)在不應(yīng)該啊）。網(wǎng)上谷歌搜索一圈，沒有發(fā)現(xiàn)類似的問題，還是主要查看了這個(gè)給的 url 以及結(jié)合阿里將 weex 貢獻(xiàn)給 Apache 維護(hù)這個(gè)事情，猜測是不是 Weex 捐給 Apache 維護(hù)，github 的庫目錄更改，但是官網(wǎng)對應(yīng)的 url 地址沒有做修改。經(jīng)過查找，確實(shí)是這個(gè)問題，在舊庫中以下目錄找到官網(wǎng)提的：DefaultWebSocketAdapter.java 和 DefaultWebSocketAdapterFactor.java :
https://github.com/alibaba/weex/tree/master/android/commons/src/main/java/com/alibaba/weex/commons/adapter

（2）手動實(shí)現(xiàn) WebSocket 功能

我們 在 weex_projectplatformsandroidappsrcmainjavacomweexappadapter 目錄底下創(chuàng)建 Websocket 的實(shí)現(xiàn)類 DefaultWebSocketAdapter.java 和工廠創(chuàng)建類 DefaultWebSocketAdapterFactory.java ，關(guān)鍵邏輯代碼如下：

// 該類主要實(shí)現(xiàn) Websocket 的連接、發(fā)送消息、接收消息、關(guān)閉等函數(shù)或事件
public class DefaultWebSocketAdapter implements IWebSocketAdapter {
 @Override
 public void connect(){...}
 @Override
 public void send(String data) {...}
 @Override
 public void close(int code, String reason) {...}
 @Override
 public void destroy() {...}
 ... 
}

然后，為該類主要為創(chuàng)建 Websocket 對象的工廠類：

// 該類主要為創(chuàng)建 Websocket 對象的工廠類
public class DefaultWebSocketAdapterFactory implements IWebSocketAdapterFactory {
 @Override
 public IWebSocketAdapter createWebSocketAdapter() {
 return new DefaultWebSocketAdapter();
 }
}

接下來，在 weex_projectplatformsandroidappsrcmainjavacomweexappWXApplication.java 中初始化 Websocket ，如下所示：

WXSDKEngine.initialize(this,
 new InitConfig.Builder().setImgAdapter(new ImageAdapter()). setWebSocketAdapterFactory(new DefaultWebSocketAdapterFactory()).build()
);

然后，在 Weex 的前端中導(dǎo)入Websocket模塊，就可以使用 Websocket，相關(guān)代碼如下：

const ws = weex.requireModule('webSocket');

ws.WebSocket(CONSTANT.SOCKET_WS, '');
// 需要注意 web 端的寫法和 android 端的寫法不一樣
// android 的 onxx 事件是一個(gè)方法，需要傳入一個(gè)JSCallback的值，
if (weex.config.env.platform === 'Web') {
 ws.onmessage = this.socketMessage;
} else {
 ws.onmessage(this.socketMessage);
}

4.4.4、點(diǎn)擊手機(jī)物理鍵返回上一級功能

（1）存在問題

我們開發(fā)的 Weex app，如果在 app 的哪個(gè)界面，點(diǎn)擊手機(jī)的返回上一級物理鍵，都會導(dǎo)致 app 退出，好吧，Weex 也沒有提供對應(yīng)的事件處理，我們不得不自己再去寫安卓的 java 代碼去向 Weex 的 Web 端拋出這個(gè)事件。

（2）重寫手機(jī)物理鍵返回上一級的處理邏輯

正常交互邏輯：當(dāng)處于主界面時(shí)，返回上一級物理鍵會進(jìn)行提示“再點(diǎn)擊一次退出”，如果不是處于主界面時(shí)，會返回上一級頁面。

首先，我們在 weex_projectplatformsandroidappsrcmainjavacomweexappWXPageActivity.java 中添加監(jiān)聽點(diǎn)擊手機(jī)物理鍵的事件，如下所示：

 public void onBackPressed(){
 Map<String,Object> params=new HashMap<>();
 params.put("name","msg");
 mInstance.fireGlobalEventCallback("androidback",params);
 }

在 Weex 的 vue 入口文件中，監(jiān)聽 androidback 事件，當(dāng)接收到該事件時(shí)，進(jìn)行相應(yīng)的邏輯處理，代碼如下所示：

listenAndroidBack () {
 let vm = this;
 globalEvent.addEventListener('androidback', function (e) {
 if (vm.$route.name === 'tabIndex' || vm.$route.name === 'loginPage') {
 if (vm.exitFlag) {
 weex.requireModule('wxclose').closeApp();
 } else {
 modal.toast({
 message: '再點(diǎn)一次退出',
 duration: 1
 });
 vm.exitFlag = true;
 vm.clearExitFlag();
 }
 } else {
 vm.$router.go(-1);
 }
 });
},

4.4.5、Android 顯示本地圖片

（1）存在問題

Weex 官網(wǎng)中 image 圖片組件顯示項(xiàng)目目錄下圖片，src 地址直接寫成相對路徑，如下所示；但是這種寫法存在問題，它只支持 web 端的顯示，在 Android 端是無法顯示的，找不到對應(yīng)圖片。

<image ref="poster" src="path/to/image.png"></image>

（2）Android/IOS 端顯示本地圖片

Weex 沒有在將 vue 編譯成 Android 組件時(shí)，對應(yīng)將圖片放置到 Android 對應(yīng)的目錄下，所以我們只好自己將圖片手動再放置一份，其中 Android 端需要額外將圖片放在 /platforms/android/app/src/main/res/drawable-xxhdpi ，IOS 放入xcode 底下的 /Source/images/下 ，然后我們在代碼邏輯中，根據(jù)環(huán)境判斷現(xiàn)在是 Web 環(huán)境、Android 環(huán)境或者 IOS 環(huán)境，再對應(yīng)的獲取對應(yīng)目錄下的圖片（暫時(shí)只能做到這種程度了...），如下代碼所示:

const ICON_URL = {
 Web: `${WEB_IMAGE_URL}`,
 android: `local:///${pureName}`,
 iOS: `local:///filePng/${pureName}${suffixName}`
}
return ICON_URL[CUR_RUN_PLATFORM];

五、編譯 Android apk

Android apk 打包分 debug 版和 release 版，通常所說的打包指生成 release 版的 apk，release 版的 apk 會比debug 版的小，release 版的還會進(jìn)行混淆和用自己的 keystore 簽名，以防止別人反編譯后重新打包替換你的應(yīng)用。 下面我們主要介紹如何在 Android Studio 中對 weex 項(xiàng)目進(jìn)行打包。

5.1、Android 平臺目錄

Android Studio 打開 Android 工程，目錄為：weex 項(xiàng)目 /platforms/android 。

5.2、常規(guī)的 AS 打包分為兩種

一種是沒有 “.jks” 文件的打包
一種是有 “.jks” 文件的打包
注：.jks” 文件 類似 apk 身份證；

5.3、沒有 “ .jks ” 文件的打包

（1）打包步驟如下截圖：

（2）我們點(diǎn)擊選擇 【Create new】創(chuàng)建jks

（3）填寫 key 的相關(guān)信息

（4）點(diǎn)擊 OK 之后，可以看到如下信息已被自動填充，并點(diǎn)擊打包即可。

（5）等待打包完成后，就可以查看打包好的 apk 文件

六、Weex 開發(fā)總結(jié)

6.1、官網(wǎng)經(jīng)常無法訪問

Weex 官網(wǎng)經(jīng)常出現(xiàn)無法訪問的情況，頻率大概一周至少一次；這就很影響開發(fā)效率了，因?yàn)樵陂_發(fā)過程中需要經(jīng)常查看官網(wǎng)的寫法、說明等，如果訪問不了，則會造成一定程度的開發(fā) block。

6.2、官網(wǎng)文檔粗糙

Weex 官網(wǎng)的文檔比較粗糙，如果沒有比較好的前端和移動端原生開發(fā)知識儲備的話，看官網(wǎng)的文檔就很吃力了，官網(wǎng)很多講解寫的非常簡單，都默認(rèn)你同時(shí)熟練前端和移動端原生開發(fā)，而且同時(shí)有較好前端和移動端原生開發(fā)人員應(yīng)該在業(yè)界還比較少吧。

6.3、生態(tài)貧瘠

Weex 生態(tài)是真的貧瘠，除了阿里自己出產(chǎn)的組件庫 weex-ui 外，其它的相關(guān)插件幾乎找不到，有也是少于100個(gè) star 的，例如我在項(xiàng)目開始前設(shè)計(jì)的一些功能：拍照、圖片選擇上傳、語音錄入、通訊、定位、文件預(yù)覽等等移動端的特有功能，都沒有插件，都需要自己去寫 Android 的原生代碼，那這時(shí)就失去了利用框架提高開發(fā)效率的意義；生態(tài)跟 react-native 差的真不是一丁半點(diǎn)，而是根本不是一個(gè)量級。

6.4、是否兩個(gè) Weex 版本

結(jié)合上一點(diǎn)，坊間傳聞：Weex 存在兩個(gè)版本，一個(gè)版本是阿里內(nèi)部使用的，一個(gè)是非阿里內(nèi)部使用；這個(gè)傳言無從驗(yàn)證，但是結(jié)合第2點(diǎn)說的 Weex 生態(tài)貧瘠，我卻無意在瀏覽器搜索中，發(fā)現(xiàn)了一系列常見功能的插件封裝：weex.apache.org/zh/biz-comp… ，截圖如下，但是這些插件并沒有提供出來使用，存在 Weex 官網(wǎng)中，但是卻沒有訪問入口。如果這些插件功能能提供使用，無疑將很大程度豐富 Weex 的生態(tài)。

6.5、三端兼容性不好

Weex 號稱 “一次撰寫，多端運(yùn)行”，但是存在很多兼容性問題，比如我們在 Web 端調(diào)試開完后一個(gè)功能模塊，但是在 Android 端一運(yùn)行，就各種跑不通，各種兼容性問題；這種問題導(dǎo)致，我們后期根本不敢在 Web 環(huán)境開發(fā)，例如：我們這個(gè)項(xiàng)目是想開發(fā)個(gè) Android 的 app，我們最終都直接在 Android 環(huán)境下開發(fā)，這種效率肯定就沒有在 Web 環(huán)境開發(fā)效率高。

6.6、Vue 支持度不夠

Weex 默認(rèn)集成 Vue 框架，而且主打 Vue 受眾，但是 Weex 對 Vue 的支持度還不夠，除了官網(wǎng)上提到的那些 vue 特性不支持外，還有很多特性沒有被列出，例如：vuex 等。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vue中Weex怎么用”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

文章題目：Vue中Weex怎么用
文章轉(zhuǎn)載：http://www.chinadenli.net/article24/piehje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、Google、品牌網(wǎng)站建設(shè)、ChatGPT、小程序開發(fā)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)