主要內(nèi)容

主要介紹了Weex項目中與native的交互問題，包含了native端與web端的交互說明以及代碼寫法，其中native端以iOS為例。

• 全局消息的交互
• module組件的交互

1.全局消息的交互

Native發(fā)送消息至Weex 應(yīng)用場景 比如上傳數(shù)據(jù) 選擇原生的圖片等上傳給Weex 推送的通知消息傳遞給Weex進行跳轉(zhuǎn)等，全局的推送方法不需要注冊module也不需要再前端進行require引入單獨的module只需要用全局事件去接收

native.png

甚至也可以接收原生的通知方法發(fā)送的消息

native.png

前端的接收方法

const globalEvent = weex.requireModule('globalEvent’);

web.png

2.通過module組件的交互

前端調(diào)用Native方法分為4種 1.不傳參數(shù)無回調(diào) 2.不傳參數(shù)有回調(diào) 3.傳參數(shù)無回調(diào) 4.傳參數(shù)有會調(diào)
我們以手勢密碼頁面包含創(chuàng)建手勢密碼，驗證密碼，等一系列交互事件。

首先Native端要注冊前端調(diào)用方法的module，代碼如下：

首先Native注冊需要處理手勢密碼的module

native.png

然后暴露的方法如下

native.png

1.不傳參數(shù)無回調(diào)：

前端引用module組件然后直接執(zhí)行方法

web.png

web.png

native在被調(diào)用時執(zhí)行該方法

native.png

2.不傳參數(shù)有回調(diào)

2圖中 callback中回調(diào)的字典內(nèi)容 在前端中 由function(e) 中的 e取到，并對其他需要的字段進行賦值使用

web.png

native端回調(diào)的內(nèi)容可以是字典形式也可以是一個字符串，要與前端約定好。

native.png

3.傳參數(shù)無回調(diào)

在調(diào)用方法的括號以逗號為分隔符一次寫入需要傳遞的參數(shù)，native端通過與前端約定的參數(shù)形式進行取值

web.png

native端可以拿到web端給到的參數(shù)信息去執(zhí)行相關(guān)的本地判斷與操作，但是不用給到回調(diào)信息。

native.png

4.傳參數(shù)有會調(diào)

可以看到在前端中 與方法3相同依然是在調(diào)用方法的括號內(nèi)對函數(shù)內(nèi)需要傳遞的參數(shù)和回調(diào)進行賦值，然后native可以拿到前端傳遞的參數(shù)進行判斷操作并同時做回調(diào)處理。

web.png

可以看到我們拿到web給到的type值去判斷，要進行的是新創(chuàng)建手勢密碼還是關(guān)閉手勢密碼，然后再把是否操作成功回調(diào)

native.png

注意事項

• native端：在進行回調(diào)時，一定要與前端小伙伴進行溝通確保調(diào)用方法內(nèi)部寫入了回調(diào)函數(shù)，不然會造成運行出錯。
• 對native端來說決定前端調(diào)用的方法僅僅只是 WX_EXPORT_METHOD 方法中書寫的方法與自己命名的用來接收前端傳遞過來的參數(shù)內(nèi)容的參數(shù)名無關(guān)
  總的來說坑是有的，但是也不像說的那么差。??

后記

有時間后續(xù)會總結(jié)一下Weex項目中遇到的一些問題和Vue中的使用問題。