来自 电脑系统 2019-09-11 14:01 的文章
当前位置: 金沙澳门官网网址 > 电脑系统 > 正文

金沙澳门官网网址:零基础学习weex,简易集成

Weex 项目退换##

Weex是Ali研究开发的贰个框架,消除iOS原生WebView不灵活的特点。前日就讲讲Weex集成到iOS项目中。首先得保障安装了Weex框架。

$ npm install -g weex-toolkit@beta

cd 到花色的文件夹下,成立项目

$ weex init projectName

cd到花色下,为品种导入重视

$ npm install

翻开服务

$ npm run dev

展开观望者

$ npm run serve
本文讲述iOS项目集成WeexSDK、WXDevtool、GCanvas等;也将介绍native如何与Weex通讯

Weex集成至iOS项目##

修改CoCoapods

target 'WeexIOS' do pod 'WeexSDK','~> 0.9.5'end

cocoapods Update好之后,可以设置条件在AppDegelate里安装

#import "AppDelegate.h"#import "ViewController.h"#import <WeexSDK/WXSDKEngine.h>#import <WeexSDK/WXAppConfiguration.h>@interface AppDelegate ()@end@implementation AppDelegate- application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { //business configuration [WXAppConfiguration setAppGroup:@"AliApp"]; [WXAppConfiguration setAppName:@"WeexDemo"]; [WXAppConfiguration setAppVersion:@"1.0.0"]; //init sdk enviroment [WXSDKEngine initSDKEnviroment]; ViewController *vc=[[ViewController alloc] init]; self.window.rootViewController=vc; return YES;}

然后开首化ViewController,将转移的js文件导入项目中

#import "ViewController.h"#import <WeexSDK/WXSDKInstance.h>@interface ViewController ()@property (nonatomic, strong) WXSDKInstance *instance;@property (nonatomic, strong) UIView *weexView;@end@implementation ViewController{ NSURL *jsUrl;}- viewDidLoad { [super viewDidLoad]; _instance = [[WXSDKInstance alloc] init]; _instance.viewController = self; _instance.frame=self.view.frame; __weak typeof weakSelf = self; NSString *path=[NSString stringWithFormat:@"file://%@/JS/app.weex.js",[NSBundle mainBundle].bundlePath]; NSLog(@"-----path:%@",path); jsUrl=[NSURL URLWithString:path]; if  { return; } [_instance renderWithURL: jsUrl]; _instance.onCreate = ^(UIView *view) { [weakSelf.weexView removeFromSuperview]; weakSelf.weexView = view; [weakSelf.view addSubview:weakSelf.weexView]; }; _instance.onFailed = ^(NSError *error) { NSLog; }; _instance.renderFinish = ^ (UIView *view) { NSLog; };}- dealloc{ [_instance destroyInstance];}

这里供给留神的是renderWithURAV4L这几个办法最佳只怕写在前头,官方的文书档案里把那一个点子写在终极,不过运维起来分界面未有其他反应,何况调控台报出“no data return”。可是将renderWithU途观L这么些措施提到前边全数都好了。

iOS项目集成WeexSDK

在iOS工程中集成FrameWork无外乎三种,第一,项目协助cocoaPods,选拔cocoaPods 集成 Weex iOS SDK到你的项目;第二,源码集成,优势在于能够修改WeexSDK,打包生成你协和定制的Weex SDK。
二种方法官方网站都提供了参照,即便有一点点杂乱无章。

  • cocoaPods集成
  • 源码集成

后期只是为了求学,未有深切学习Weex SDK源码,接纳cocoaPods集成,首先保险您的cocoaPods版本为较新本子。

结语##

给个彩蛋,其实还会有更简约的方法配置到iOS项目,直接用Weepack就能够。详细请参照他事他说加以考察

查看WeexSDK版本,目前为0.12.0

pod search WeexSDK

创建、编辑Podfile

开拓命令行,切换成你已有品种 Podfile 这几个文件存在的目录,实施pod init;用文件编辑器展开Podfile文件,增多如下内容

source 'git@github.com:CocoaPods/Specs.git' 
target 'YourTarget' do
    platform :ios, '7.0' 
    pod 'WeexSDK', '0.12.0'   ## 建议使用WeexSDK新版本 
end

增加WXDevtool,假使项目用到SDWebImage,也一并增添,增多达成后如图(提出增多的库都search下,使用最新版本):

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

source 'git@github.com:CocoaPods/Specs.git' 

target 'WeexStudyDemo' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

  # Pods for WeexStudyDemo

    platform :ios, '7.0' 
    pod 'WeexSDK', '0.12.0'   ## 建议使用WeexSDK新版本 
    pod 'SDWebImage', '4.0.0'
    pod 'SocketRocket', '0.5.1'
    pod 'WXDevtool', '0.9.5'
end

4、安装依赖
进行 pod install,未有出现别的错误表示早就成功情况陈设。

SDK导入达成。

iOS工程运用WeexSDK

为了方便扩张,作者创制了一个PFWeexDefine寄放Weex的宏;创立了PFWeexManager文件管理Weex;PFWeexViewController作为Weex页面容器。
1、在PFWeexDefine中程导弹入框架头文件

#ifdef EnableWeexSDK
#import <WeexSDK/WeexSDK.h>
#import <WeexSDK/WXSDKInstance.h>
#import <WeexSDK/WXSDKEngine.h>
#import <WeexSDK/WXUtility.h>
#import <WeexSDK/WXDebugTool.h>
#import <WeexSDK/WXSDKManager.h>
#import <WeexSDK/WXEventModuleProtocol.h>
#import <WeexSDK/WXModuleProtocol.h>
#import <TBWXDevTool/WXDevTool.h>
#endif

2、在PFWeexManager创设单例,处理WeexSDK,初叶化Weex情形
在 AppDelegate.m 文件中采纳PFWeexManager,一般会在 didFinishLaunchingWithOptions 方法中增加。

- (void)initWeexSDK {
#ifdef EnableWeexSDK

    //1.1 设置组织
    [WXAppConfiguration setAppGroup:@"PFWeex"];
    //1.2 设置App的名称
    [WXAppConfiguration setAppName:@"WeexStudyDemo"];
    //1.3 设置App的版本号
    [WXAppConfiguration setAppVersion:AppVersion];

    //2. 初始化`WeexSDK`环境
    [WXSDKEngine initSDKEnvironment];

    //3. 注册自定义的组件和模型(可选)  [如果有就注册如果没有就不注册]
    //register custom module and component,optional
    //[WXSDKEngine registerComponent:@"YourView" withClass:[MyViewComponent class]];
    //[WXSDKEngine registerModule:@"YourModule" withClass:[YourModule class]];

    //4. 注册协议的实现,可选
    //[WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationProtocol)];

    //5. 设置日志的级别(默认的日志级别是Info)
    [WXLog setLogLevel:WXLogLevelDebug];
#endif

}

专心,在前头SDK中最初化WeexSDK条件,方法名字为initSDKEnviroment,那是Weex团队拼写错误,后来扬弃,替换来initSDKEnvironment。学好葡萄牙语真的很关键

3、渲染 weex Instance
weex补助三种渲染格局,一种是任何分界面,一种是分界面某一有个别。你要求给急需渲染的weex视图钦定特定的UWranglerL,然后把它增添到父控件中。在其实开采中全页面渲染更有意义,前面创造的PFWeexViewController就是承袭于UIViewController。PFWeexViewController作为基础页面,要求思考各个互动:比如手势重回等,在此不做深远延伸。

4、销毁 Weex Instance
在 viewController 的 dealloc 阶段 销毁掉 Weex instance,释放内存,幸免变成内部存款和储蓄器败露。

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

WeexSDK iOS APIs

开头切磋WeexSDK for iOS,当然官方文档先读书一下。对于Weex的运用,正是针对实际的事情场景完成Handler、Module、Component。

1、概念

  • Handler:
    小编们能够把Weex看做是二个提供了根基套件的UI渲染库。大旨职能依然供给开荒者自身来贯彻,比方:图片下载逻辑、网络必要、导航跳转等等。
    诸如图片下载:
    [WXSDKEngine registerHandler:[CNCWeexImageLoaderImplement new] withProtocol:@protocol(WXImgLoaderProtocol)];

  • Module:
    Module可以清楚为JS端供给调用native技艺管理的逻辑,而且在JS<->native举办交互。这么说有些抽象,举个有血有肉的例证:比方在JS端想拜候native端的数据库(coredata、realm等),就必要达成三个module来满意JS调用native写好的module以贯彻native的逻辑。
    譬如说网络央浼与导航跳转:
    [WXSDKEngine registerModule:@"urlRoute" withClass:[CNCWeexURLRouteModule class]];
    [WXSDKEngine registerModule:@"networkRequest" withClass:[CNCWeexURLRouteModule class]];

  • Component:
    在JS满足不了可能达成资金极高的时候,则能够在native端实现Component供JS调用。
    比方:自定义公告事件,用于 native 自定义部分和 js 进行施行公告,譬如传递下拉风浪到 js,那些是在 component 基类的诀要,能够一贯行使
    再如:要落实一个跑马灯UI的职能,在native端达成,况且注册到JS。JS端调用,就能够显示出跑马灯。

本文由金沙澳门官网网址发布于电脑系统,转载请注明出处:金沙澳门官网网址:零基础学习weex,简易集成

关键词: