一。vue 、 weex 介绍
1、vue.js 介绍
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
2、weex 介绍
Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验，来构建 Android、iOS 和 Web 应用。简单来说，在集成了 WeexSDK 之后，你可以使用 JavaScript 语言和前端开发经验来开发移动应用。详情 https://cn.vuejs.org/v2/guide/
Weex 渲染引擎与 DSL 语法层是分开的，Weex 并不强依赖任何特定的前端框架。目前 Vue.js 和 Rax 这两个前端框架被广泛应用于 Weex 页面开发，同时 Weex 也对这两个前端框架提供了最完善的支持。Weex 的另一个主要目标是跟进流行的 Web 开发技术并将其和原生开发的技术结合，实现开发效率和运行性能的高度统一。在开发阶段，一个 Weex 页面就像开发普通网页一样；在运行时，Weex 页面又充分利用了各种操作系统的原生组件和能力。详细介绍： https://weex.apache.org/zh/guide/introduction.html
二、weex组件和vue组件的区别
1、布局不同
在html或者Vue中我们可以使用浮动布局，但是weex并不支持，所以请不要使用。weex
提倡使用Flex进行布局。
2、float浮动，Flex移动端全都支持
3、百分比布局
html中布局，经常使用百分比进行布局，这种布局可以适应不同屏幕，但是你用weex布局时百分比是不支持的
4、不支持综合式写法
例如：border:1px solid #ccc;
这样在网页中可以显示出来，但是weex不支持在原生app中不能显示出来
因此要分开写
border：设定边框，border 目前不支持类似这样 border: 1 solid #ff0000; 的组合写法。可有如下写法：
border-style：设定边框样式，值类型为 string，可选值为 solid | dashed | dotted，默认值 solid可有如下写法：
border-left-style {string}：可选值为 solid | dashed | dotted，默认值 solid
border-top-style {string}：可选值为 solid | dashed | dotted，默认值 solid
border-right-style {string}：可选值为 solid | dashed | dotted，默认值 solid
border-bottom-style {string}：可选值为 solid | dashed | dotted，默认值 solid
border-width {length}：设定边框宽度，非负值, 默认值 0可有如下写法：
border-left-width {length}：，非负值, 默认值 0
border-top-width {length}：，非负值, 默认值 0
border-right-width {length}：，非负值, 默认值 0
border-bottom-width {length}：，非负值, 默认值 0
border-color {color}：设定边框颜色，默认值 #000000可有如下写法：
border-left-color {color}：，默认值 #000000
border-top-color {color}：，默认值 #000000
border-right-color {color}：，默认值 #000000
border-bottom-color {color}：，默认值 #000000
border-radius {length}：设定圆角，默认值 0可有如下写法：
border-bottom-left-radius {length}：，非负值, 默认值 0
border-bottom-right-radius {length}：，非负值, 默认值 0
border-top-left-radius {length}：，非负值, 默认值 0
border-top-right-radius {length}：，非负值, 默认值 0
背景颜色也要写成 background-color:red;
5、weex长度单位只支持px
长度单位有 rem,em,pt weex:px
dpi=dp=px
了解原生应用的dpi单位，那这里的px是和dpi单位相对应的。所以你也不用纠结。使用就可以了，需要注意的是请不要再使用我们的rem,em,pt进行布局了。
参考文章
http://blog.csdn.net/yuzhouxiang/article/details/7283931
三 。weex 和vue 与原生交互的比较（iOS版本---oc）
·1 weexsdk iOS拓展
https://weex.apache.org/zh/guide/extend/extend-ios.html#%E8%87%AA%E5%AE%9A%E4%B9%89-module
2.wkwebview
原生调用js的方法
OC部分：
[self.webView stringByEvaluatingJavaScriptFromString:@"add(1,2)"];
JS部分：
function add(a,b) {
return a+b;
}
js调用原生的方法
/ JS给OC发送消息
JS部分：
function js2oc1() {
window.webkit.messageHandlers.noParamsFunction.postMessage('我是js方法传过来的数据');
}
OC 部分
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
// WKScriptMessage 类的name属性是消息名称，body是发送的数据
NSLog(@"message.name:%@", message.name);
NSLog(@"message.body:%@", message.body);
}
3 。限制 wkwebview 不支持跨域名访问。
四 视频组件在手机上的表现。
1 iOS
参考链接
https://blog.csdn.net/weixin_33859504/article/details/87533906kw 不支持跨域访问。https://github.com/dengjunwen/weexPageDemo。https://github.com/jiaowoxiaoming/app_weex。
网友评论