Weex iOS接入指南

2023-12-27 16:47 更新

添加依賴

建議在DEBUG模式下依賴

方法1: cocoapods 依賴

在工程目錄的 podfile 添加如下代碼

source https://github.com/CocoaPods/Specs.git
pod  'WXDevtool', '0.24.0', :configurations => ['Debug']

可以通過更新本地 podspec repo,pod search 來查詢最新版本,在 podfile 文件添加依賴。

方法二:github 源碼依賴

  1. ?git clone git@github.com:weexteam/weex-devtool-iOS.git?
  2. 如下圖示:拖動(dòng)source目錄源文件到目標(biāo)工程中

drag

  1. 按照紅框中配置勾選

_

在相對(duì)較大的互聯(lián)網(wǎng) App 研發(fā)中, framework 靜態(tài)庫被廣泛應(yīng)用,所以推薦使用方法一接入。

集成功能

參考?PlayGround?中的實(shí)現(xiàn)

//方法1 pod依賴方式
#import <WXDevtool/WXDevtool.h>

//方法2 源碼依賴方式
#import "WXDevtool.h"

查看 WXDevtool 頭文件如下:

@interface WXDevTool : NSObject

+ (void)setDebug:(BOOL)isDebug;

+ (BOOL)isDebug;

+ (void)launchDevToolDebugWithUrl:(NSString *)url;

@end

?setDebug?:參數(shù)為 ?YES? 時(shí),直接開啟調(diào)試模式,反之關(guān)閉,使用場景如下所述

掃碼調(diào)試

如果你的應(yīng)用中存在掃碼功能或即將集成掃碼功能,推薦使用該方式進(jìn)行集成,Demo 地址見: Playground App

核心代碼為獲取掃碼鏈接中的?_wx_devtoo?l參數(shù),并將調(diào)試工具與調(diào)試服務(wù)器鏈接:

[WXDevTool launchDevToolDebugWithUrl:@"ws://{ip}:{port}/debugProxy/native/{channelid}"];

直接鏈接

如果你需要直接讓你的應(yīng)用鏈接上Weex調(diào)試工具,你需要通過如下方式進(jìn)行集成:

  1. 命令行運(yùn)行?weex debug --port 8888 --channelid 1? 去指定端口號(hào)及調(diào)試進(jìn)程ID.
  2. 添加如下代碼到你的應(yīng)用中,注意替換對(duì)應(yīng)的?{ip}?,?{port}?,?{channelid}?為你本地的值。
[WXDevTool setDebug:NO];
[WXDevTool launchDevToolDebugWithUrl:@"ws://{ip}:{port}/debugProxy/native/{channelid}"];

如果程序一啟動(dòng)就開啟 Weex 調(diào)試,需要在 WeexSDK 引擎初始化之前添加代碼,同時(shí)需要將Debug開關(guān)設(shè)置為?NO?,進(jìn)入調(diào)試界面后再打開?JS Debug?開關(guān)(服務(wù)鏈接時(shí)對(duì)于純weex項(xiàng)目會(huì)丟失首屏Weex頁面的消息導(dǎo)致白屏)。

附加頁面刷新功能

  • 什么場景下需要添加頁面刷新功能?切換 JSDebug 開關(guān)時(shí)刷新頁面刷新 Chrome 頁面(command+R)如下圖所示,在快速導(dǎo)航功能中需要能夠刷新當(dāng)前weex實(shí)例,同時(shí),在切換JSDebug按鈕狀態(tài)時(shí)也需要將運(yùn)行環(huán)境會(huì)從手機(jī)端(JavaScriptCore)切換到 Chrome(V8),這時(shí)需要重新初始化 Weex 環(huán)境,重新渲染頁面。頁面渲染是需要接入方在自己的頁面添加。_debug
  • 如何添加刷新:具體實(shí)現(xiàn)可參考 Playground App?WXDemoViewController.m? 例子在 Weex 頁面初始化或 ?viewDidLoad? 方法時(shí)添加注冊通知,舉例如下
[[NSNotificationCenter defaultCenter] addObserver:self selector:notificationRefreshInstance: name:@"RefreshInstance" object:nil];

最后千萬記得在 ?dealloc? 方法中取消通知,如下所示

- (void)dealloc
{
    [[NSNotificationCenter defaultCenter] removeObserver:self];
}

頁面刷新實(shí)現(xiàn),先銷毀當(dāng)前 instance,然后重新創(chuàng)建 instance,舉例如下:

 - (void)render
  {
    CGFloat width = self.view.frame.size.width;
    [_instance destroyInstance];
    _instance = [[WXSDKInstance alloc] init];
    _instance.viewController = self;
    _instance.frame = CGRectMake(self.view.frame.size.width-width, 0, width, _weexHeight);

    __weak typeof(self) weakSelf = self;
    _instance.onCreate = ^(UIView *view) {
        [weakSelf.weexView removeFromSuperview];
        weakSelf.weexView = view;
        [weakSelf.view addSubview:weakSelf.weexView];
        UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification,  weakSelf.weexView);
    };
    _instance.onFailed = ^(NSError *error) {

    };
    _instance.renderFinish = ^(UIView *view) {
        [weakSelf updateInstanceState:WeexInstanceAppear];
    };

    _instance.updateFinish = ^(UIView *view) {
    };
    if (!self.url) {
        return;
    }
    NSURL *URL = [self testURL: [self.url absoluteString]];
    NSString *randomURL = [NSString stringWithFormat:@"%@?random=%d",URL.absoluteString,arc4random()];
    [_instance renderWithURL:[NSURL URLWithString:randomURL] options:@{@"bundleUrl":URL.absoluteString} data:nil];
}

說明:目前版本需要注冊的通知名稱為固定的 “RefreshInstance”,下個(gè)版本會(huì)添加用戶自定義 name 。


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)