weex SDK 集成到工程 (integrate to ios) #18

Open
acton393 opened this Issue Jun 16, 2016 · 56 comments

Projects

None yet
@acton393
acton393 commented Jun 16, 2016 edited

en

通过cocoaPods 集成 Weex iOS SDK到你的项目

  1. 假设你已经完成了安装iOS 开发环境CocoaPods

  2. 导入Weex iOS SDK 到你已有的项目, 如果没有,可以参考新建项目
    在继续下面内容之前,确保你已有的项目目录有名称为Podfile文件,如果没有,创建一个,用文本编辑器打开

    • 集成framework
      WeexSDK 在cocoaPods 上最新版本 可以在获取
      Podfile文件中添加如下内容

      ```
        source 'git@github.com:CocoaPods/Specs.git' 
        #或者使用 source 'https://github.com/CocoaPods/Specs.git'
           target 'YourTarget' do
               platform :ios, '7.0' 
               pod 'WeexSDK', '0.9.5'   ## 建议使用WeexSDK新版本 
           end
        ```
      
    • 源码集成

      • 首先 拷贝ios/sdk目录到你已有项目目录(此处以拷贝到你已有项目的根目录为例子)
      • Podfile文件中添加
       source 'git@github.com:CocoaPods/Specs.git' 
       # 或者使用 source 'https://github.com/CocoaPods/Specs.git'
         target 'YourTarget' do
             platform :ios, '7.0' 
             pod 'WeexSDK', :path=>'./sdk/' 
         end
      
  3. 打开命令行,切换到你已有项目Podfile这个文件存在的目录,执行 pod install,没有出现任何错误就已经完成环境配置

  4. 初始化 Weex 环境
    在AppDelegate.m 文件中做初始化操作,一般会在 didFinishLaunchingWithOptions方法中如下添加

    //business configuration
    [WXAppConfiguration setAppGroup:@"AliApp"];
    [WXAppConfiguration setAppName:@"WeexDemo"];
    [WXAppConfiguration setAppVersion:@"1.0.0"];
    
    //init sdk enviroment   
    [WXSDKEngine initSDKEnviroment];
    
    //register custom module and component,optional
    [WXSDKEngine registerComponent:@"MyView" withClass:[MyViewComponent class]];
    [WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];
    
    //register the implementation of protocol, optional
    [WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationProtocol)];
    
    //set the log level    
    [WXLog setLogLevel: WXLogLevelAll];
    
  5. 渲染 weex Instance
    Weex 支持整体页面渲染和部分渲染两种模式,你需要做的事情是用指定的URL渲染weex的view,然后添加到它的父容器上,父容器一般都是viewController

#import <WeexSDK/WXSDKInstance.h>
- (void)viewDidLoad 
{
    [super viewDidLoad];

    _instance = [[WXSDKInstance alloc] init];
    _instance.viewController = self;
    _instance.frame = self.view.frame; 

    __weak typeof(self) weakSelf = self;
    _instance.onCreate = ^(UIView *view) {
        [weakSelf.weexView removeFromSuperview];
        [weakSelf.view addSubview:weakSelf.weexView];
    };

    _instance.onFailed = ^(NSError *error) {
        //process failure
    };

    _instance.renderFinish = ^ (UIView *view) {
        //process renderFinish
    };
    [_instance renderWithURL:self.url options:@{@"bundleUrl":[self.url absoluteString]} data:nil];
}

WXSDKInstance 是很重要的一个类,提供了基础的方法和一些回调,如 renderWithURL,onCreate,onFailed等,可以参见 WXSDKInstance.h的声明
3. 销毁Weex Instance
在 viewController的 dealloc 阶段 销毁掉weex instance, 释放内存,避免造成内存泄露

- (void)dealloc
{
    [_instance destroyInstance];
}

导入 Weex SDK framework到工程

可以通过源码编译出Weex SDK,可以在新的feature 或者bugfix 分支,尝试最新的feature

参考此处直接导入weexSDK

@acton393 acton393 changed the title from weex SDK 集成到工程 to weex SDK 集成到工程 (integrate to ios) Jun 17, 2016
@SeptemberMaples

'git clone https://github.com/alibaba/weex.git' 仓库不存在呀。

@acton393

有啥提示么

@SeptemberMaples

remote: Repository not found.
直接提示找不到啊。 你可以?

@mrzzcn
mrzzcn commented Jun 19, 2016

@SeptemberMaples 你申请内测了吗?没有申请内测暂时是没有私有仓库访问权限的 可以先去这里 https://github.com/alibaba/weex 看有没有权限
详细: #1

@acton393

@SeptemberMaples , 如 @mrzzcn 所提到的, 你先看下你有没有权限(直接访问 https://github.com/alibaba/weex 验证), https 的git 一般都可以clone 到的,

@SeptemberMaples

@acton393 我错了, 没有权限。

@acton393

嗯, 因为暂时还是内测阶段,所以只针对受邀请的开发者,需要权限的话,可以在这: http://alibaba.github.io/weex/ 提一下申请, 建议可以加一下qq群: 455207162

@SeptemberMaples

@acton393 谢谢。 已申请,已加。

@nicefe
nicefe commented Jun 20, 2016

Podfile那块好像直接那么写会报错,要添加

target 'project-name' do
  pod 'WeexSDK', :path=>'./sdk/'
end

但是好像pod install成功之后,接着在didFinishLaunchingWithOptions里面添加方法还是找不到。不知道是不是我哪里出问题了。/sdk是放在项目根目录下的。

@acton393
acton393 commented Jun 20, 2016 edited

@nicefe 嗯,是的, 在cocoaPods 比较新的版本需要添加

target 'your target-name' do    
        platform :ios, '7.0'    
        pod 'WeexSDK', :path=>'./sdk/'
end

pod install成功之后,打开*.xcworkspace
didFinishLaunchingWithOptions 是在appDelegate 里面的,xcode新建工程时候会创建,

@acton393

@nicefe pull request 文档已经更新~

@nicefe
nicefe commented Jun 21, 2016

@acton393 是不是要在AppDelegate.m文件头上添加

#import <WeexSDK/WXSDKEngine.h>
#import <WeexSDK/WXLog.h>
#import <WeexSDK/WXDebugTool.h>
#import <WeexSDK/WXAppConfiguration.h>

导入相关的库。才能用吧

@acton393

@nicefe 是的,你通过源码,参见当前ios集成文档 或者.framework 的方式引入 WeexSDK ,可以

framework可以自己打包也可以直接下载,参考此处readme

就可以用了

@duqian291902259

直接打开weex官方ios项目,Xcode编译报错,找不到各种库。泪喷。我觉得有必要把pod的事情说清楚,pod install总提示错误:[!] No podspec found for WeexSDK in ./sdk/,不知道为什么weex项目中ios目录下的sdk不放入playground目录,我复制一份sdk到项目/playgournd根目录,然后Podfile改为如下,点开WeexDemo.xcworkspace,编译的时候又提示缺少两张图片,我加了同名的png图片,然后可以顺利编译通过:
source 'https://github.com/CocoaPods/Specs.git'
target 'WeexDemo' do
platform :ios, '7.0'
pod 'SDWebImage', '3.7.5'
pod 'SocketRocket', '0.4.2'
pod 'ATSDK-Weex', '0.0.1'
pod 'WeexSDK', :path=>'./sdk/'
end

@laznrbfe

@duqian291902259

  • 关于pod管理第三方库,README.md中的iOS操作步骤有说明。

https://github.com/alibaba/weex#ios

  • 关于Podfile文件中WeexSDK路径
pod 'WeexSDK', :path=>'./sdk/'

其中的'./sdk/'指的是相对于Podfile文件的路径。

@acton393
acton393 commented Jun 24, 2016 edited

hi,@duqian291902259 是这样的,其实这是两件事情的

  • Weex 官方给出了一个demo(playground),它的使用方法见readme , 只需要在weex/ios/playground目录执行pod install 就可以了

  • Weex 还给出了如何自己集成一个使用Weex SDK的工程, 也就是这个issue,en

    在这个集成文档中需要做的就是需要把 sdk 拷贝到你自己项目目录下的, 然后添加相应的podfile内容的,都在这个issue 里面

我估计你是在跑playground的时候却看了这个doc了, 这个doc 是给集成weex SDK到自己的项目的同学的

直接打开weex官方ios项目,Xcode编译报错,找不到各种库 这个是需要在 playground 目录下面执行pod install 的, 详见readme

@duqian291902259

嗯。没开发过ios的同学,捣鼓起来可能需要学习下旁枝末节的东西。。要不然一脸懵逼。

@shuideya

[info]WXBridgeContext.m:200, CreateInstance Finish...0.004585 �[;
2016-07-19 18:56:49.835 Weexforios[11598:375381] �[fg255,0,0; [error]WXSDKError.m:39, [undefined:2:26382] SyntaxError: Unexpected token '<'
Function@[native code]

init
createInstance
createInstance
�[;

这个是什么问题?求大神指导

@acton393

hi @shuideya 看这个日志是你的.we 文件里面多字符不大对,
你是否直接把.we 后缀的文件给你的工程(集成了WeexSDK)渲染

@shuideya

@acton393 是直接把.we 后缀的文件给工程渲染了

@acton393

@shuideya 不要直接渲染 .we 后缀文件, .we 后缀文件是需要transform成为bundlejs之后才可以供 sdk 渲染的
可以使用weex 的toolkit 做transform,
具体的方式参考一下这个 issue

@kfitfk
kfitfk commented Aug 3, 2016

#import <WeexSDK/WXLog.h> 这个现在已经不包含 WXLogLevelVerbose 了?
根据现在的文档,初始化的那个步骤在 import 所有必要的内容之后由于 WXLogLevelVerbose 找不到报错

@acton393
acton393 commented Aug 4, 2016

hi @kfitfk 现在的 WXLogLevelAll 应该对应之前的 WXLogLevelVerbose

@Davidleeeeee
Davidleeeeee commented Aug 11, 2016 edited

请问Swift的工程如何在AppDelegate.swift里面添加初始化代码?
只有OC创建的工程才可以么?因为目前的项目是swift创建的。
import WeexSDK 提示 “No such module'WeexSDK'”

@acton393

hi @Davidleeeeee swift 的集成参考 这里

@dengjunwen

@duqian291902259
原文中有很多东西没有提到。导致要走很多弯路。看这里https://github.com/dengjunwen/weexPageDemo,有demo详细说明

@Davidleeeeee

hi @acton393 我在照着您提供的链接做了,但是依然无法work,提示“Could not build Objective-C module 'WeexSDK'”。issue已提。

@acton393
acton393 commented Aug 15, 2016 edited

已提 pr 修复
===== update ====
hi, @Davidleeeeee 嗯我已经看到, 会尽快想解决方法,主要是因为Weex SDK 中使用了 C的方法,
这个部分主要是用在 WXStorageModule md5 部分

@wang111588

@dengjunwen 已经404

@dengjunwen

https://github.com/dengjunwen/weexPageDemo https://github.com/dengjunwen/weexPageDemo

在 2016年10月12日,下午5:13,wang111588 notifications@github.com 写道:

@dengjunwen https://github.com/dengjunwen 已经404


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub #18 (comment), or mute the thread https://github.com/notifications/unsubscribe-auth/ANdca_euVXzbSXNT_at769LXfIbvhpRTks5qzKTVgaJpZM4I3hrY.

@wzj583585700

CaimatoiMac:Weexios caiye0607$ pod install
Analyzing dependencies
Fetching podspec for WeexSDK from ./sdk/
[!] No podspec found for WeexSDK in ./sdk/ 这什么意思

@wzj583585700

CaimatoiMac:Weexios caiye0607$ pod install
Analyzing dependencies
Fetching podspec for WeexSDK from ./sdk/
[!] No podspec found for WeexSDK in ./sdk/ 报这个错,什么意思

@acton393
acton393 commented Oct 20, 2016 edited

@wzj583585700 两种使用方法

  1. copy weex 项目中的 ios/sdk 文件夹到你的项目目录下,跟Podfile 同目录,
    在podfile 中添加 pod 'WeexSDK', :path=>'./sdk/'
    然后执行 pod install
  2. 直接使用0.8.0 SDK
    pod 'WeexSDK', '0.8.0' 或者不用指定版本号也可以,应该可以默认拉取最新版本SDK集成
@dengjunwen

@wzj583585700 No podspec found for WeexSDK in ./sdk/ 表示没有找到sdk的路径。。假设你在/user/weexSdk/目录下执行pod install指令。然后./表示当前目录 ./sdk/表示当前目录下的sdk目录。即你在/user/weexSdk/目录下没有找打 sdk目录。

@wzj583585700

xcode8上运行有错呀

@wzj583585700

platform:ios, '7.0'
这必须是7.0吗,我是xcode8,不支持7.0

@acton393

@wzj583585700

platform:ios, '7.0', xcode8 已经放弃iOS 7 了
你写成 platform:ios, '8.0' 可以的,没有强制要求 7.0 的, 考虑自己的项目情况

@wzj583585700

我把那个sdk集成进去了,- (UIEdgeInsets)contentInset;

  • (void)setContentInset:(UIEdgeInsets)contentInset; 这两个方法报错,错误是expected a type ,报错的地方是UIEdgeInsets这个

@property(nonatomic, readonly, strong) UIView *view; 这个也报错,sdk里面的东西我没动过呀

@wzj583585700

'XCTest/XCTest.h' file not found 这个文件找不到,用cocopods下载还会找不到吗 ,这个文件有用吗

@wzj583585700

各种报错,全是sdk里面的错误,sdk现在不能用还是需要我们程序员要改那些错误啊

@wzj583585700

duplicate symbol OBJC_IVAR$_WXWebViewModule.weexInstance in:
/Users/caiye0607/Library/Developer/Xcode/DerivedData/weexios-bubpuzhkqnolxvhboteqjjbtbtrv/Build/Intermediates/weexios.build/Debug-iphoneos/weexios.build/Objects-normal/arm64/WXWebViewModule.o
/Users/caiye0607/Library/Developer/Xcode/DerivedData/weexios-bubpuzhkqnolxvhboteqjjbtbtrv/Build/Products/Debug-iphoneos/WeexSDK/libWeexSDK.a(WXWebViewModule.o)
ld: 682 duplicate symbols for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation) 就这一个错误了,也不知道sdk什么情况

@wzj583585700

weex组件怎么布局啊,和react Native一样吗,

@wzj583585700

ModuleNotFoundError: Module not found: Error: Cannot resolve module 'weex-components' in /Users/caiye0607/Desktop/webstrom
info Please try to enter directory where your we file saved, and run command 'npm install weex-components'谁见过

@ghostcode
ghostcode commented Nov 3, 2016 edited
//
//  ViewController.m
//  WeexDemo
//
//  Created by  on 2016/11/2.
//  Copyright © 2016年 . All rights reserved.
//

#import "ViewController.h"
#import <WeexSDK/WXSDKInstance.h>



@interface ViewController ()
@property (nonatomic, strong) WXSDKInstance *instance;
@property (nonatomic, strong) UIView *weexView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    _instance = [[WXSDKInstance alloc] init];
    _instance.viewController = self;
    _instance.frame = self.view.frame; //必需


//    [_instance renderWithURL:self.url options:@{@"bundleUrl":[self.url absoluteString]} data:nil];

//    NSString *url = [NSString stringWithFormat:@"http://192.168.1.8:8081/tech_list.js"];
//    [_instance renderWithURL:[NSURL URLWithString:url]];

    NSURL *url = [NSURL URLWithString:@"http://192.168.1.8:8081/tech_list.js"];
    [_instance renderWithURL:url options:@{@"bundleUrl":url.absoluteString} data:nil];




//    [_instance renderWithURL:[NSURL URLWithString:url]];
    __weak typeof(self) weakSelf = self;

    _instance.onCreate = ^(UIView *view) {
        NSLog(@"Create=================");
        [weakSelf.weexView removeFromSuperview];

        [weakSelf.view addSubview:weakSelf.weexView];
    };

    _instance.onFailed = ^(NSError *error) {
        //处理失败回调的逻辑。
        NSLog(@"Error=================");
    };

    _instance.renderFinish = ^ (UIView *view) {
        //处理页面渲染完成的逻辑。
        NSLog(@"Finish=================");
    };


    // Do any additional setup after loading the view, typically from a nib.
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end

运行结果:

2016-11-03 22:51:17.820050 WeexDemo[47491:1519932] [] tcp_connection_get_statistics DNS: 0ms/0ms since start, TCP: 4ms/15ms since start, TLS: 0ms/0ms since start
2016-11-03 22:51:17.823 WeexDemo[47491:1519829] �[fg128,128,128; <Weex>[log]WXSDKInstance.m:175, Start rendering page:http://192.168.1.8:8081/tech_list.js �[;
2016-11-03 22:51:17.824 WeexDemo[47491:1519829] Create=================
2016-11-03 22:51:17.948 WeexDemo[47491:1519829] Finish=================
2016-11-03 22:51:17.949 WeexDemo[47491:1519829] �[fg128,128,128; <Weex>[log]WXMonitor.m:172, Performance:
    SDKInitInvokeTime: 6,
    componentCount: 4,
    totalTime: 125,
    JSLibVersion: 0.15.8,
    screenRenderTime: 125,
    WXSDKVersion: 0.8.0,
    JSLibInitTime: 49,
    bizType: ,
    communicateTime: 9,
    JSTemplateSize: 2820,
    SDKInitTime: 58,
    networkTime: 65,
    pageName: http://192.168.1.8:8081/tech_list.js, �[;
2016-11-03 22:51:48.139465 WeexDemo[47491:1519962] [] tcp_connection_cancel 1
2016-11-03 22:51:48.140737 WeexDemo[47491:1519932] [] nw_socket_handle_socket_event Event mask: 0x4
2016-11-03 22:51:48.141267 WeexDemo[47491:1519932] [] nw_socket_handle_socket_event Socket received WRITE_CLOSE event
2016-11-03 22:51:48.141964 WeexDemo[47491:1519932] [] nw_endpoint_handler_cancel [1 192.168.1.8:8081 ready socket-flow (satisfied)]
2016-11-03 22:51:48.142392 WeexDemo[47491:1519932] [] nw_endpoint_flow_protocol_disconnected [1 192.168.1.8:8081 cancelled socket-flow (null)] Output protocol disconnected
2016-11-03 22:51:48.142758 WeexDemo[47491:1519932] [] -[NWConcrete_tcp_connection dealloc] 1

结果啥也没有显示,这是为啥?也没报错!!!

@wzj583585700

导航条高度也设置了,怎么显示不出来呢

@acton393
acton393 commented Nov 9, 2016 edited

@wzj583585700 参考一下demo case

@wzj583585700

list 划出屏幕的cell ,划回来时,数据不显示,有谁遇到过

@SuperHaiFeng

我iOS端已经集成SDK,但是有的时候能够渲染上,有的时候渲染不上,我使用的本地的js文件,渲染不上的时候出现以下错误信息:[fg255,0,0; [error]WXMonitor.m:190, [main.js:47:18] ReferenceError: Can't find variable:__ weex_define__
main.js:47:18
webpack_require@main.js:20:34
main.js:40:37
global code@main.js:41:12 �[;

@JiongXing

这个教程是加载本地js文件的,请问要做热更新的话,服务器如何下发js,客户端如何处理呢?

@DoranYun
DoranYun commented Dec 9, 2016

@wzj583585700
Weex 支持 盒模型和 Flex 布局,示例可参考新文档:

http://alibaba.github.io/weex/cn/doc/references/common-style.html

@Jinjiang
Contributor
Jinjiang commented Dec 9, 2016

@JiongXing 服务端就像部署一个静态浏览器页面或静态资源一样把 js 部署到服务器就好了,js 文件可以在本地开发的时候通过 we 文件 build 好,然后部署到服务器

@HashYang

现在文档那些有些看不了,是在更新网站么?

@DoranYun

@HashYang 你好,可以在页面右下角选择中文,目前中文是有的,英文正在翻译中

@MeishanGuo

讲真,这文档真的太难懂了。比如:

把WeexSDK 导入到你已有的项目,如果没有,可以参考新建项目
拷贝 ios/sdk下面目录到你的项目目录,在添加依赖之前,确保项目目录有Podfile,如果没有,创建一个,用文本编辑器打开,添加如下依赖

如果使用正式版本如 0.6.1 的,就不需要做 拷贝ios/sdk 这个操作,直接引用cocoaPods的master repo 上就可以,这个需要在Podfile 最前面添加

项目目录很多,拷贝到哪里?
‘如果是正式版本如0.6.1‘。是谁的版本,WeexSDK的版本? CocoaPods的版本?

虽然可以通过思考来确定,但毕竟乍一看,这文档还是会让人懵逼的。

在文档中多加几个字,把问题写清楚了,会节省开发者多少的时间啊。

当然写好一个文档不是你们的义务,你当然有权利写一个大家都不懂的文档。
写好文档,仅仅是一个建议而已。
望莫喷。

@acton393
acton393 commented Jan 17, 2017 edited

hi @MeishanGuo ok, 谢谢反馈~, 已经更新, 有不明白的地方,欢迎继续指出~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment