Vue中Weex怎么用

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

員工經(jīng)過(guò)長(zhǎng)期磨合與沉淀，具備了協(xié)作精神，得以通過(guò)團(tuán)隊(duì)的力量開(kāi)發(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)站所以易用所以簡(jiǎn)單”。公司專注于為企業(yè)提供網(wǎng)站制作、成都做網(wǎng)站、微信公眾號(hào)開(kāi)發(fā)、電商網(wǎng)站開(kāi)發(fā)，小程序開(kāi)發(fā)，軟件按需求定制制作等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。

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

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

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

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

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

我們可以通過(guò)以下步驟創(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）啟動(dòng)項(xiàng)目

npm start

項(xiàng)目啟動(dòng)完畢，瀏覽器窗口會(huì)自動(dòng)打開(kāi)項(xiàng)目首頁(yè)，如下圖所示：

（5）添加 原生Android 平臺(tái)

weex platform add android

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

weex run android

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

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

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

$ npm install

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

$ npm run start

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

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

$ npm install -g weex-toolkit

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

$ npm install

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

$ npm run start

三、Weex 常用的 VSCode 插件

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

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

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

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

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

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

3.1、weex-run

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

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

啟動(dòng)成功控制臺(tái)會(huì)輸出一堆日志，如下圖。

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

3.2、weex-debugger

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

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

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

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

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

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

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

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

4.3、功能界面展示

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

4.4、重要功能介紹

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

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

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

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

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

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

• 支持移動(dòng)設(shè)備

• 跨程序調(diào)用

• 安全

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

• 用戶通過(guò)用戶名和密碼發(fā)送請(qǐng)求。

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

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

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

• 服務(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)部對(duì) jsonwebtoken 進(jìn)行封裝使用。express-jwt 會(huì)驗(yàn)證指定 http 請(qǐng)求的 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
 }),
}

對(duì)應(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 的每次請(qǐng)求，頭部都帶上 token
initOptions.headers['Authorization'] = global.token;

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

4.4.2、圖片選擇/上傳功能

（1）存在問(wèn)題

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

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

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

例如，下面是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)會(huì)返回圖片的信息，此時(shí)就可以進(jìn)行上傳操作，如下所示：

@Override
// 用戶選擇好相冊(cè)中的圖片后，會(huì)相應(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)行模塊的注冊(cè)，代碼邏輯如下：

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

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

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）存在問(wèn)題

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

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

（2）手動(dòng)實(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 對(duì)象的工廠類：

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

接下來(lái)，在 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ī)物理鍵返回上一級(jí)功能

（1）存在問(wèn)題

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

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

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

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

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

在 Weex 的 vue 入口文件中，監(jiān)聽(tīng) 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）存在問(wèn)題

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

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

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

Weex 沒(méi)有在將 vue 編譯成 Android 組件時(shí)，對(duì)應(yīng)將圖片放置到 Android 對(duì)應(yīng)的目錄下，所以我們只好自己將圖片手動(dòng)再放置一份，其中 Android 端需要額外將圖片放在 /platforms/android/app/src/main/res/drawable-xxhdpi ，IOS 放入xcode 底下的 /Source/images/下 ，然后我們?cè)诖a邏輯中，根據(jù)環(huán)境判斷現(xiàn)在是 Web 環(huán)境、Android 環(huán)境或者 IOS 環(huán)境，再對(duì)應(yīng)的獲取對(duì)應(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 版，通常所說(shuō)的打包指生成 release 版的 apk，release 版的 apk 會(huì)比debug 版的小，release 版的還會(huì)進(jìn)行混淆和用自己的 keystore 簽名，以防止別人反編譯后重新打包替換你的應(yīng)用。 下面我們主要介紹如何在 Android Studio 中對(duì) weex 項(xiàng)目進(jìn)行打包。

5.1、Android 平臺(tái)目錄

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

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

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

5.3、沒(méi)有 “ .jks ” 文件的打包

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

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

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

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

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

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

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

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

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

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

6.3、生態(tài)貧瘠

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

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

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

6.5、三端兼容性不好

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

6.6、Vue 支持度不夠

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

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

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

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

廣告

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