前言

該公司使用 weex 改造騎手項目已經(jīng)三個多月了。 隨著weex頁面在騎手項目中占比不斷增加，weex實現(xiàn)復(fù)雜UI的需求也越來越強烈。 插件市場的插件已經(jīng)很久沒有維護了。 開發(fā)者苦不堪言，所以我們對此進行了探索。 為了兼容iOS和Web，我們選擇了svg技術(shù)來對weex進行插件擴展研究。 希望對正在使用weex進行開發(fā)的朋友有所幫助。 少走一些彎路。

1.SVG簡介

1.1 什么是SVG？

1.2 SVG 工作流程？

1.3 為什么選擇SVG？

1.4 SVG的優(yōu)點

1.5 SVG 示例

"1.0" standalone="no"?>
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
 cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

1.6 SVG預(yù)定義形狀元素

2.Weex插件擴展（有相關(guān)經(jīng)驗的伙伴可以忽略）

2.1 weex-iOS插件擴展方法介紹

iOS組件擴展步驟

iOS端*1。 創(chuàng)建自定義組件繼承類*2。 重寫 - ():( *)ref type:( *)type :( *) :( *) :( *) :( *)*3 .真實的自定義 UI 風(fēng)格*4. 支持js方法調(diào)用重寫和特殊狀態(tài)下的方法，在需要的位置調(diào)用方法執(zhí)行對應(yīng)的js方法*5。 支持js調(diào)用模塊擴展的方法，可編寫擴展方法(@())擴展*6。 使用+::注冊js端 1.直接在需要該組件的組件中使用 2.如果組件需要傳遞參數(shù)，可以通過以下形式傳遞：key=value, @=,實現(xiàn)js方法3.調(diào)用擴展方法：this.$refs..

iOS模塊擴展步驟

iOS端*1。 創(chuàng)建自定義模塊來實現(xiàn)協(xié)議*2。 實現(xiàn)自定義函數(shù)并回調(diào)js*3。 使用 or 向 js*4 拋出方法。 使用+::注冊js端 1.在需要組件的模塊中直接使用weex.()獲取注冊的模塊 2.在需要的地方調(diào)用注冊的方法

2.2 weex-擴展方法介紹

組件擴展步驟

1號航站樓。 創(chuàng)建自定義組件繼承/類*2。 使用w()來初始化，()方法已經(jīng)過時*3。 實現(xiàn)自定義UI樣式，通過添加注解@4來設(shè)置屬性。 使用.()方法執(zhí)行對應(yīng)的js方法*5。 支持js調(diào)優(yōu)模塊擴展的方法，編寫擴展方法@( = false or true)擴展*6。 使用.()注冊js端 1、直接在需要的組件中使用 2、如果組件需要傳遞參數(shù)ai圖標導(dǎo)入sketch，可以采用：key=value、@=的形式傳遞，實現(xiàn)js方法3.調(diào)用擴展方法：this.$refs..

模塊擴展步驟

結(jié)束*1。 創(chuàng)建自定義模塊繼承*2。 實現(xiàn)自定義函數(shù)并回調(diào)js*3。 使用@(= false或true)將自定義方法拋給js*4。 使用.()注冊js端 1.在需要組件的組件中直接使用weex.()獲取注冊的模塊 2.在需要的地方調(diào)用注冊的方法

2.3 weex-web插件擴展方法介紹

Web組件擴展步驟

js 端 1. 使用 npm 加載 weex-vue- 2. 使用 Weex.('name', ); 注冊組件 3. 在 中使用 weex.() 。 加載所有組件 4. 調(diào)用擴展方法：

Web組件擴展步驟

js端

使用 npm 加載 weex-vue-

使用 Weex.('name', )

在 中使用 weex.() 加載所有組件 4. 調(diào)用擴展方法：const = weex.(''); 調(diào)用模塊方法.xx()

3.Weex互動（有相關(guān)經(jīng)驗的小伙伴可以忽略）

3.1 Weex-web及交互（iOS使用、使用）

Weex-Web 端

1、Weex-web調(diào)用提供的方法：iOS:...(data):..(data); 2、解決方法：使用調(diào)用方式實現(xiàn)參數(shù)： name：被調(diào)用方法的名稱，即約定的需要調(diào)用的具體方法，例如：(set title) b.：傳遞到末尾的參數(shù)，例如：{'title': 'This is商品詳情頁的標題'}c.：方法調(diào)用成功后的回調(diào)方法名。 d.：被調(diào)用的方法名稱，即約定的需要調(diào)用的具體方法，例如：(set title) 3.問題：打包生成的Weex-web的vuejs文件的方法無法調(diào)用除非下面列出的方法。 解決辦法：綁下面的方法

iOS版本

1、iOS調(diào)用Weex-web方法返回數(shù)據(jù)：[ :jsStr :^(id d, * error) {}];

結(jié)尾

1、調(diào)用Weex-web方法返回數(shù)據(jù)：通過()獲取，然后用()調(diào)用Js

3.2 Weex 與 iOS 交互

1.Weex如何調(diào)用iOS

方法一：通過iOS注冊拋出方法供weex調(diào)用

2. iOS 上如何調(diào)用 weex

方法一：獲取weex頁面的方法，調(diào)用weex方法，如：[[ ]:。 參考：類型：類型：：nil]； 方法二：使用組件中的方法調(diào)用weex方法。 方法三：用于通知weex方法的調(diào)用

注：該方法通過實施和通知的方式進行。

3.3 Weex 與交互

1.Weex調(diào)用的方法

方法一：通過注冊拋出方法供weex調(diào)用

2.調(diào)用weex方法

方法一：獲取pass((),,data,null); weex頁面的方法來調(diào)用weex方法。 方法二：使用廣播調(diào)用weex方法。

注：該方法是通過調(diào)用js并廣播來實現(xiàn)的。

4.Weex SVG練習(xí)

4.1 Weex-web SVG 擴展

SVG 可直接在 Weex-web 上獲?。?/p>

例如：使用

畫一個圓弧

代碼解釋：path>標簽用于定義路徑。 以下命令可與路徑數(shù)據(jù)一起使用： M = = = = = = = = = ArcZ = 注意：以上所有命令都允許小寫字母。 大寫表示絕對定位，小寫表示相對定位。

4.2 Weex-iOS SVG 擴展

思路：根據(jù)svg api規(guī)范，通過Core庫在iOS端實現(xiàn)一套iOS-svg標準組件庫，并通過weex將這套組件庫暴露給weex。

Core的使用介紹這是一個繪圖專用的API家族，通常被稱為或2D。 Core 是 iOS 上所有繪圖功能的基石，包括 UIKit。

基本概念：

1.繪圖需求

這就是圖形上下文。 可以理解為，我們的繪圖需要一個載體或者輸出目標ai圖標導(dǎo)入sketch，它用來顯示繪圖信息，并決定將繪制的東西輸出到哪里。

2.如何獲得？

第一種方法是利用 Cocoa 為您生成的圖形上下文。第二種方法是創(chuàng)建圖片類型上下文

核心使用步驟：

1、首先獲取方法中的上下文； 2、繪制圖形（線條、圖形、圖片等）； 3、設(shè)置一些修改屬性； 4. 渲染到上下文并完成繪圖。

代碼：

- (void)drawRect:(CGRect)rect
{
 ? ?// 1.獲取上下文
 ? ?CGContextRef ctx = UIGraphicsGetCurrentContext();
 ? ?// --------------------------實心圓
 ? ?// 2.畫圖
 ? ?CGContextAddEllipseInRect(ctx, CGRectMake(10, 10, 50, 50));
 ? ?[[UIColor greenColor] set];
 ? ?// 3.渲染
 ? ?CGContextFillPath(ctx);
}

例如：為 weex 擴展 api11 行。 使用Core定義一條線

@implementation WXSVGLine
....
- (CGPathRef)getPath:(CGContextRef)context
{
 ? ?[self setBoundingBox:CGContextGetClipBoundingBox(context)];
 ? ?CGMutablePathRef path = CGPathCreateMutable();
 ? ?CGFloat x1 = self.x1;
 ? ?CGFloat y1 = self.y1;
 ? ?CGFloat x2 = self.x2;
 ? ?CGFloat y2 = self.y2;
 ? ?CGPathMoveToPoint(path, nil, x1, y1);
 ? ?CGPathAddLineToPoint(path, nil, x2, y2);
 ? ?return (CGPathRef)CFAutorelease(path);
}
.....
@end

2. 通過將線路延伸至 weex

@implementation WXSVGLineComponent
.....
- (WXSVGRenderable *)node
{
 ? ?WXSVGLine *lineView = [WXSVGLine new];
 ? ?lineView.x1 = [WXConvert WXPixelType:_x1 scaleFactor:self.weexInstance.pixelScaleFactor];
 ? ?lineView.y1 = [WXConvert WXPixelType:_y1 scaleFactor:self.weexInstance.pixelScaleFactor];
 ? ?.....
 ? ?return lineView;
}
- (void)updateAttributes:(NSDictionary *)attributes
{
 ? ?WXSVGLine *lineView = (WXSVGLine *)self.view;
 ? ?if (attributes[@"x1"]) {
 ? ? ? ?_x1 = attributes[@"x1"];
 ? ? ? ?lineView.x1 = [WXConvert WXPixelType:_x1 scaleFactor:self.weexInstance.pixelScaleFactor];
 ? ?}
 ? ?.....
 ? ?[super updateAttributes:attributes];
}
@end

4.3 Weex-SVG 擴展

思路：根據(jù)svg api規(guī)范，通過年底的庫實現(xiàn)一套-svg標準組件庫，并通過weex將這個組件庫暴露給weex。

Paint - 還有三個基本對象：Color 和 Paint，它們位于 Paint 包下。 1.：對象，相當于現(xiàn)實生活中繪畫所用的畫紙或畫布。 2. Paint：畫筆對象，相當于現(xiàn)實生活中畫畫用的筆。 設(shè)置畫筆的一些參數(shù)非常重要。 3.Color：顏色對象，相當于現(xiàn)實生活中的調(diào)味料

例如：為 weex 擴展 api11 行。 使用 。 定義一條線

public class WXSvgLine extends WXSvgPath {
.....
 ?@Override
 ?public void draw(Canvas canvas, Paint paint, float opacity) {
 ? ?mPath = getPath(canvas, paint);
 ? ?super.draw(canvas, paint, opacity);
 ?}
 ?@Override
 ?protected Path getPath(Canvas canvas, Paint paint) {
 ? ?Path path = new Path();
 ? ?float x1 = ParserHelper.fromPercentageToFloat(mX1, mCanvasWidth, 0, mScale);
 ? ?float y1 = ParserHelper.fromPercentageToFloat(mY1, mCanvasHeight, 0, mScale);
 ? ?....
 ? ?path.moveTo(x1, y1);
 ? ?path.lineTo(x2, y2);
 ? ?return path;
 ?}
 ?public static class Creator implements ComponentCreator {
 ? ?public Creator() {
 ? ?}
 ? ?public WXComponent createInstance(WXSDKInstance instance, WXDomObject node, WXVContainer parent) throws IllegalAccessException, InvocationTargetException, InstantiationException {
 ? ? ?return new WXSvgLine(instance, node, parent);
 ? ?}
 ?}
}

5.SVG編輯工具介紹

5.1

特征：

導(dǎo)入圖標包

使用圖標，用戶可以輕松地將圖標從軟件中拖拽到AI、PS等設(shè)計工具中直接使用。

轉(zhuǎn)換為SVG圖標代碼

該工具可以轉(zhuǎn)換多種代碼格式，包括：Web、iOS、OS X等，使用方法也超級簡單： 方法一：點擊需要使用的圖標，然后在編輯器上按Ctrl+V粘貼代碼。 方法二：直接將圖標拖到編輯器中。 方法3：這個有點酷。 拖動圖標的時候，直接通過界面，然后拖到編輯器中，就可以生成代碼了。 請看一下帥氣的DEMO！

從 AI 和設(shè)計軟件導(dǎo)出 SVG 圖標

首先將要輸出的圖標復(fù)制到AI或 中，然后粘貼到 中，最后粘貼到文件夾中，完成！ 請看一下帥氣的DEMO！

如有侵權(quán)請聯(lián)系刪除！