本文來自尚妝前端團隊南洋

發表於尚妝github博客，歡迎訂閱！

前言

我司在weex上的應用是保證三端統一，為了延續web開發體驗，統一在三端的跳轉都採用url的形式，即採用<a>組件，或者自定義的openUrl方法進行跳轉。

假如現在點擊B按鈕跳轉到/b.html頁面，在vue文件中統一書寫openUrl(/b.html)。H5中就是簡單的調用window.location.href = /b.html，在native中會打開一個視圖，然後去下載跟/b.html對應的b.min.jsjs文件，進行原生視圖渲染。頁面與js文件的映射關係以及如何維護可以翻閱之前的文章查看App的跳轉規則的weex支持方案設計。

統一採用url跳轉的方式進行頁面跳轉，為了傳參方便，我們也統一採用在url後拼接參數的形式進行頁面間傳參。

正向傳參

不管是weex（native）還是weex（H5）都是通過頁面的url進行跳轉。

假設案例：

x.com/a.html跳轉到x.com/b.html?。

1）weex（native） > weex（native） 實例化時從url中取得參數並傳入到實例中

weex文檔中寫到

每個 Weex 頁面都有被創建、被銷毀兩個必經階段，同時在 Weex 頁面運行過程中，native 有機會主動向 Weex 頁面發送消息。

Native 有機會在創建一個 Weex 頁面的時候，傳入一份外部數據，JS 框架也有機會藉此機會為相同的 JS bundle 配合不同的 data 生成不同的頁面內容。

由上可知native在渲染一個weex頁面的時候有機會往這個weex頁面傳入一個Object類型的數據，數據能通過weex.config取得。

在我司的設計中，native首先會截取跳轉的url，然後截取下參數，再把參數傳入到weex實例中去。這樣我們就能通過weex.config.age進行數據的獲取，從而渲染不同的頁面內容。

[_instance renderWithURL:[NSURL URLWithString:mstrURL] options:[self SHWeexOptionsWithH5URL:mstrH5URL withURL:mstrURL] data:nil];

2）weex（web）> weex（web）在weex-vue-render層面從url讀取參數，寫入weex.config

native實現這上述講到的方式進行數據傳遞，那麼web端也要以相同的方式weex.config.age這種方式去取得頁面中的參數age。

本司web端的weex依賴文件是通過webpack打包的方式，所以在requireweex-vue-render依賴後，獲取當前url的參數，再存進weex.config對象就好了。

require(weex-vue-render)

// hack 將頁面url的參數寫入到weex.config中
// app已經有這樣的方法，h5自己實現
let urlParamObj = {};
try {
urlParamObj = utils.parseUrl(window.location.search.slice(1), &, "=", {maxKeys: 0});
} catch (error) {
console.log(--------------weex.js parseUrl---------------------);
console.log(error);
console.log(------------------------------------);
}

for (let key in urlParamObj) {
window.weex.config[key] = encodeURIComponent(urlParamObj[key]);
}

3）native > weex（native） 同理

4）native > weex（web） 同理

對於3、4兩種情況，native跳轉weex，不管是跳到weex（native）還是跳轉到weex（web），都是使用url的形式進行跳轉。例：x.com/b.html?。上面也講到了在weex頁面native和web如如何將參數寫入weex.config對象中去的。要取得參數，統一在vue中編寫weex.config.age便能取得傳遞進來的age參數。

至此我們統一了三端（ios、android、H5）從A頁面到B頁面正向的傳參方式。

反向傳參

1）weexA（native） > weexB（native），weexB頁面選擇完畢返回weexA頁面， weexB（native） > weexA（native）

在提交訂單頁面我們可以選擇優惠券，進入到優惠券使用頁面，首先會進行正向傳參，因為選擇優惠券頁面會使用提交訂單頁的訂單數據。

然後在選擇優惠券頁面選擇任意優惠券會回到提交訂單頁，這時需要攜帶優惠券數據回去，我們稱這個為反向傳參。

查看官網我們本可以使用BroadcastChannel這個api去做實例間的數據傳遞，但是在vue的JS Framework中還不支持這個特性，所以我們暫時使用的是globalEvent這個實例級別的api去代替應用級別的數據傳遞。

我們首先在公司內部集成的module中增加了fireGlobalEvent方法，在選擇優惠券頁面調用這個方法。

fireGlobalEvent(getConpon, {
id: 3323,
}, function () {
if (web) {

} else {
navigator.pop()
}
})

這個方法首先註冊了getCoupon事件，然後傳遞了數據對象

{
id: 3323
}

最後註冊了一個回調，當前頁面會執行這個回調，回退上一頁。

而在上一頁（提交訂單頁），註冊了一個事件監聽，當這個事件名被觸發了，就接收來自這個事件的數據。

const globalEvent = weex.requireModule(globalEvent);
globalEvent.addEventListener(getCoupon, function (e) {
console.log("get getCoupon")
});

這是業務邏輯中的實現，我們再來看看native為了達到返回上一頁並傳參效果做了什麼處理（android為例）。

public void fireGlobalEvent(String name, String data, final JSCallback callback) {
SHStorageManager.putToCache(SHWeexConstants.WEEX, SHWeexConstants.NAME, name);
SHStorageManager.putToCache(SHWeexConstants.WEEX, SHWeexConstants.DATA, data);

if (null != callback) {
callback.invoke(new JSONObject());
}
}

當在業務中調用fireGlobalEvent方法時，native會把傳入的事件名和data存入緩存。然後執行業務中定義的回調函數，而回調中會有navigator.pop()方法，意味著退出當前weex實例進入到上一個頁面。

public void onResume() {
if (wxInstance != null) {
wxInstance.onActivityResume();

String data = SHStorageManager.get(SHWeexConstants.WEEX, SHWeexConstants.DATA, "");

if (!TextUtils.isEmpty(data)) {
String name = SHStorageManager.get(SHWeexConstants.WEEX, SHWeexConstants.NAME, "");

try {
JSONObject jsonObj = JSONObject.parseObject(data);
Map<String, Object> params = new HashMap<>();
for (Map.Entry<String, Object> entry : jsonObj.entrySet()) {
params.put(entry.getKey(), entry.getValue());
}
wxInstance.fireGlobalEventCallback(name, params);
} catch (Exception e) {
SHWeexLog.e(e);
} finally {
SHStorageManager.removeFromCache(SHWeexConstants.WEEX, SHWeexConstants.DATA);
SHStorageManager.removeFromCache(SHWeexConstants.WEEX, SHWeexConstants.NAME);
}
}
}
}

然後native會在上一個頁面出現時，去緩存中取得之前存入的數據和事件名，再調用官方提供的實例apifireGlobalEventCallback，調用對應的事件，並傳數據。

當native中執行了fireGlobalEventCallback這個方法，上一頁的事件監聽函數就會取得數據。

至此就完成了native中數據的反向傳遞。

2）weexA（web） > weexB（web）， weexB（web） > weexA（web）

反向傳遞參數在weex的web端就更加好處理了，AB頁面都是通過連接後面拼接參數的形式進行傳遞參數，那麼反向傳參跟正向傳參還是可以按照之前的邏輯進行。

在設計api時特意在回調中會對是否web環境做了判斷，因為H5和native在反向傳參的行為完全不同，所以判斷邏輯會在業務中進行，更方便大家在寫業務時進行不同情況不同處理。

fireGlobalEvent(getConpon, {
id: 3323,
}, function () {
if (web) {
openUrl(/a.html?id= + 3323);
} else {
navigator.pop();
}
})

推薦閱讀：

查看原文 >>
相关文章