前言
该公司使用 weex 改造骑手项目已经三个多月了。 随着weex页面在骑手项目中占比不断增加，weex实现复杂UI的需求也越来越强烈。 插件市场的插件已经很久没有维护了。 开发者苦不堪言，所以我们对此进行了探索。 为了兼容iOS和Web，我们选择了svg技术来对weex进行插件扩展研究。 希望对正在使用weex进行开发的朋友有所帮助。 少走一些弯路。
1.SVG简介
1.1 什么是SVG？
1.2 SVG 工作流程？
1.3 为什么选择SVG？
1.4 SVG的优点
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预定义形状元素
2.Weex插件扩展（有相关经验的伙伴可以忽略）
2.1 weex-iOS插件扩展方法介绍
iOS组件扩展步骤
iOS端*1。 创建自定义组件继承类*2。 重写 - ():( *)ref type:( *)type :( *) :( *) :( *) :( *)*3 .真实的自定义 UI 风格*4. 支持js方法调用重写和特殊状态下的方法，在需要的位置调用方法执行对应的js方法*5。 支持js调用模块扩展的方法，可编写扩展方法(@())扩展*6。 使用+::注册js端 1.直接在需要该组件的组件中使用 2.如果组件需要传递参数，可以通过以下形式传递：key=value, @=,实现js方法3.调用扩展方法：this.$refs..
iOS模块扩展步骤
iOS端*1。 创建自定义模块来实现协议*2。 实现自定义函数并回调js*3。 使用 or 向 js*4 抛出方法。 使用+::注册js端 1.在需要组件的模块中直接使用weex.()获取注册的模块 2.在需要的地方调用注册的方法
2.2 weex-扩展方法介绍
组件扩展步骤
1号航站楼。 创建自定义组件继承/类*2。 使用w()来初始化，()方法已经过时*3。 实现自定义UI样式，通过添加注解@4来设置属性。 使用.()方法执行对应的js方法*5。 支持js调优模块扩展的方法，编写扩展方法@( = false or true)扩展*6。 使用.()注册js端 1、直接在需要的组件中使用 2、如果组件需要传递参数ai图标导入sketch，可以采用：key=value、@=的形式传递，实现js方法3.调用扩展方法：this.$refs..
模块扩展步骤
结束*1。 创建自定义模块继承*2。 实现自定义函数并回调js*3。 使用@(= false或true)将自定义方法抛给js*4。 使用.()注册js端 1.在需要组件的组件中直接使用weex.()获取注册的模块 2.在需要的地方调用注册的方法
2.3 weex-web插件扩展方法介绍
Web组件扩展步骤
js 端 1. 使用 npm 加载 weex-vue- 2. 使用 Weex.('name', ); 注册组件 3. 在 中使用 weex.() 。 加载所有组件 4. 调用扩展方法：
Web组件扩展步骤
js端
使用 npm 加载 weex-vue-
使用 Weex.('name', )
在 中使用 weex.() 加载所有组件 4. 调用扩展方法：const = weex.(''); 调用模块方法.xx()
3.Weex互动（有相关经验的小伙伴可以忽略）
3.1 Weex-web及交互（iOS使用、使用）
Weex-Web 端
1、Weex-web调用提供的方法：iOS:...(data):..(data); 2、解决方法：使用调用方式实现参数： name：被调用方法的名称，即约定的需要调用的具体方法，例如：(set title) b.：传递到末尾的参数，例如：{'title': 'This is商品详情页的标题'}c.：方法调用成功后的回调方法名。 d.：被调用的方法名称，即约定的需要调用的具体方法，例如：(set title) 3.问题：打包生成的Weex-web的vuejs文件的方法无法调用除非下面列出的方法。 解决办法：绑下面的方法
iOS版本
1、iOS调用Weex-web方法返回数据：[ :jsStr :^(id d, * error) {}];
结尾
1、调用Weex-web方法返回数据：通过()获取，然后用()调用Js
3.2 Weex 与 iOS 交互
1.Weex如何调用iOS
方法一：通过iOS注册抛出方法供weex调用
2. iOS 上如何调用 weex
方法一：获取weex页面的方法，调用weex方法，如：[[ ]:。 参考：类型：类型：：nil]； 方法二：使用组件中的方法调用weex方法。 方法三：用于通知weex方法的调用
注：该方法通过实施和通知的方式进行。
3.3 Weex 与交互
1.Weex调用的方法
方法一：通过注册抛出方法供weex调用
2.调用weex方法
方法一：获取pass((),,data,null); weex页面的方法来调用weex方法。 方法二：使用广播调用weex方法。
注：该方法是通过调用js并广播来实现的。
4.Weex SVG练习
4.1 Weex-web SVG 扩展
SVG 可直接在 Weex-web 上获取：
例如：使用
画一个圆弧
代码解释：path>标签用于定义路径。 以下命令可与路径数据一起使用： M = = = = = = = = = ArcZ = 注意：以上所有命令都允许小写字母。 大写表示绝对定位，小写表示相对定位。
4.2 Weex-iOS SVG 扩展
思路：根据svg api规范，通过Core库在iOS端实现一套iOS-svg标准组件库，并通过weex将这套组件库暴露给weex。
Core的使用介绍这是一个绘图专用的API家族，通常被称为或2D。 Core 是 iOS 上所有绘图功能的基石，包括 UIKit。
基本概念：
1.绘图需求
这就是图形上下文。 可以理解为，我们的绘图需要一个载体或者输出目标ai图标导入sketch，它用来显示绘图信息，并决定将绘制的东西输出到哪里。
2.如何获得？
第一种方法是利用 Cocoa 为您生成的图形上下文。第二种方法是创建图片类型上下文
核心使用步骤：
1、首先获取方法中的上下文； 2、绘制图形（线条、图形、图片等）； 3、设置一些修改属性； 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 扩展
思路：根据svg api规范，通过年底的库实现一套-svg标准组件库，并通过weex将这个组件库暴露给weex。
Paint - 还有三个基本对象：Color 和 Paint，它们位于 Paint 包下。 1.：对象，相当于现实生活中绘画所用的画纸或画布。 2. Paint：画笔对象，相当于现实生活中画画用的笔。 设置画笔的一些参数非常重要。 3.Color：颜色对象，相当于现实生活中的调味料
例如：为 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
特征：
导入图标包
使用图标，用户可以轻松地将图标从软件中拖拽到AI、PS等设计工具中直接使用。
转换为SVG图标代码
该工具可以转换多种代码格式，包括：Web、iOS、OS X等，使用方法也超级简单： 方法一：点击需要使用的图标，然后在编辑器上按Ctrl+V粘贴代码。 方法二：直接将图标拖到编辑器中。 方法3：这个有点酷。 拖动图标的时候，直接通过界面，然后拖到编辑器中，就可以生成代码了。 请看一下帅气的DEMO！
从 AI 和设计软件导出 SVG 图标
首先将要输出的图标复制到AI或 中，然后粘贴到 中，最后粘贴到文件夹中，完成！ 请看一下帅气的DEMO！
如有侵权请联系删除！
