【weex实战】项目开发经验

1,396 阅读10分钟

前言

本人近期加入了公司开发的一款应用i7,此款应用前端选用的weex开发语言,就weex下面我来讲解一下自己的经验总结,可能不全,希望有些地方能够帮助到大家。

正文

1. 什么是weex?


介绍这里,我参照的官网,建议同学们还是去官网看一遍,下面有网址。

Weex是使用同一套代码来构建 Android、iOS 和 Web 应用(一次编写,处处运行)。具体来讲,在集成了 WeexSDK 之后,你可以使用 JavaScript 和现代流行的前端框架来开发移动应用。

Weex 在 iOS 和 Android 上都实现了一个渲染引擎,并提供了一套基础的内置组件。基于这些组件,你可以用 js 封装更多的上层组件。

尽管 Weex 中的组件看起来很像 HTML 标签,但你无法使用所有 HTML 标签,只能使用内置组件和自定义组件。

在框架内部,Weex 使用的是原生系统提供的 Widget 来渲染的。尽管 Weex 强调每个跨平台的一致性,但我们仍然接受平台本身的行为和 UI 差异。 例如switch 组件


除了内置组件以外,Weex 也支持你扩展更多原生组件,但是你需要在每个平台上实现它们,并保持其行为一致。最实用的方法是将现有的本地组件集成到 Weex 平台中。

在 Android 和 iOS 上看起来是不同的(在 Web 端的外观模拟了 iOS)。

具体解释请参考weex官网:weex.apache.org/cn/guide/

苹果手机上weex最低支持到iOS7.0

2. weex的安装


针对用过weex的同学可以直接跳过这一步。

(简单的步骤:首先安装nodejs,里面自带npm包管理,然后安装weex-toolkit,npm install weex-toolkit -g,这条命令会向你命令行环境中注册一个weex命令。安装完成后命令行输入weex,查看是否有命令帮助内容,如果提示没有weex命令,表示weex没有安装好,检查一下自己的安装环境。)

以前简单讲过,但是考虑到有些同学可能没有用过,下面我详细讲解一下。

初始化

Node.js官网nodejs.org/en/ 点进去直接下载安装,下载后会自带npm包管理工具

在命令行中输入以下命令,查看是否安装成功:

node -v

npm -v

如果要安装淘宝镜像,输入以下命令:

npm install -g cnpm --registry=https://registry.npm.taobao.org

查看是否安装成功:

cnpm -v

请确保你已经安装了 Node.js,然后全局安装 weex-toolkit。

npm install weex-toolkit -g

你可以用weex create命令来创建一个空的模版项目。

weex create awesome-app

这样,你就拥有了一个weex工程了,可以简单的做些demo试一下。

3. weex的优缺点

优点:weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持三端统一。

缺点:控件太少,基本只能实现最基本的效果;上手难度大,如果是前端和移动端都比较懂上手很快;随着项目变大,编译速度会指数型上升。

好了,基础的就不讲了,下面我们进入到项目中讲解。

4. 项目开发中,weex常常需要注意的地方

(这里是我开发的经验,如果有认为错误的地方,可以在留言中指出)

1)页面与网关的联调问题(说些业务上的bug点)

    a) 注意接口拿到的第一个状态值success是网关的接口状态,第二个才是后端接口的状态

    b) 注意后端传空的值,网关是否会自动过滤掉

2)weex页面内判断的问题

weex没有dom的概念,在页面渲染中,如果要进行页面元素的判断,记住最好用true和false。

例如判断一个元素如果接口返回值为1就显示,不为1就不显示,最好这样写:

a) 先在js代码中定义一个变量

data(()=>{ 

   showFlag:false

})

b) 然后在方法中判断如果返回值为1,状态为true

if(data == 1){

   this.showFlag = true

}else{

   this.showFlag = false

}

c) 在template中<div v-if="showFlag">demo</div>这么调用

d) v-show 和display不起作用,可以用v-if来代替

e) 在组件内判断null==null和null!=null,结果都为true,所以判断并没有意义。

f) Weex 目前不支持 z-index 设置元素层级关系,但靠后的元素层级更高,因此,对于层级高的元素,可将其排列在后面。

g) 在 Weex 中,Flexbox 是默认且唯一的布局模型,所以你不需要手动为元素添加 display: flex; 属性

h) 目前在 <image> 组件上尚无法只定义一个或几个角的 border-radius

i) Weex 对于长度值目前只支持像素值,不支持相对单位(em、rem)

j) 不要用float定位,用flexbox布局,可以用position,Weex 布局模型基于 CSS Flexbox,以便所有页面元素的排版能够一致可预测,同时页面布局能适应各种设备或者屏幕尺寸

k) 如果定位元素超过容器边界,在 Android 下,超出部分将不可见,原因在于 Android 端元素 overflow 默认值为 hidden,但目前 Android 暂不支持设置 overflow: visible。

l)weex内置组件一共17个,大家可以按照html标签一样理解,除了这些内置组件,其他标签不支持。

<a>  <div>  <image> <indicator>  <input>  <list>  <cell>  <recycle-list>  <loading>  <refresh>  <scroller>  <slider>  <text>  <textarea>  <video>  <waterfall>  <web>

m)weex内置模块一共有12个,weex的动画和数据交互都以这12个模块为基础进行开发:

animation  clipboard  dom  globalEvent  meta  modal  navigator  picker  storage  stream  webSocket  webview

n)Weex 支持四种伪类:active, focus, disabled, enabled

所有组件都支持 active, 但只有 input 组件和 textarea 组件支持 focus, enabled, disabled

o) background-image 优先级高于 background-color,这意味着同时设置 background-image 和 background-color,background-color 被覆盖,不要使用 background 简写。

p) <recycle-list> 是一个新的列表容器,只能使用 <cell-slot> 作为其直接子节点,使用其他节点无效。

q)navigator 实现前进后退功能。

r)<web> 回退、前进和重新加载用。

5. 组件化

在weex项目中,建议进行单页面应用开发,这样可以进行单页面的独立打包,进行上线替换。

页面编写上尽量趋向于组件化编程,一次编写,多次引用。

我们开发的时候是自己建了一个组件库,将组件开发完成后,发布到npm中。

在开发过程中,因为有些功能不可能有改动就发布到npm上,所以我们大多数用的方法是npm link的方式,在组件项目中,输入命令行 npm  link,会输入一个地址,然后在自己应用的项目中,输入命令行“npm link 地址”,下面给大家贴图说明一下做法,就是红框内的内容


配置完成后,本地的应用项目就可以引用本地的组件库了,组件库一旦更改,应用项目就会自动编译更新。引用组件的方法和引用npm时一样,不用变。更贴近于业务的组件,如果别的项目,基本不会用到,可以放到应用项目中,单独建立一个页面,进行调用。

下面我简单举个页面例子:


这段代码,一共引用了5个组件,不知道你有没有看出来,这样编写,可以让页面结构和布局更简洁明了,这只是一个开发建议,大家开发还是要看自己的习惯。

这段代码最后有一句话,是引入列表页模块,下面我们就来说一下单页面应用中,多个页面内如果进行数据传递。

6. 页面数据的交互

  • 首先说一下代码结构,每个单页面应用有个文件夹,有个package.json,有个README.md,还有一个或多个页面,例如:

awesome-page-demo

      index.js

      index.vue

      package.json

      README.md

      second.vue (然后我们加一个页面,说下怎么传输数据)

我这里的使用方法就是把每个页面的下一个页面,作为一个模块引入进来,类似于a引入b,b引入c的形式。路由单独提到下面去讲。

a) 在页面index.vue中设置变量data,然后在second.vue中设置

props:{

   data:{

     type:Object

   }

}

在页面second.vue中,data里的值就可以随意使用了

  • 然后说下路由怎么传值:
脱离我上面讲的那个页面结构,先说下页面如何跳转:this.$router.push('/a');

页面回退:this.$router.back();

加上参数:this.$router.push({path:'/a',query:param});

获得路由请求的参数:
let routerparams = this.$router.currentRoute.query;

7. weex 日历控件的使用

说几个坑,大家注意下。

我目前知道的weex日历控件有三个,如果有更好的,大家可以告诉我下,互相学习嘛~

a) weex内置组件<input type="date"/> iphoneX iphone8不支持,日历组件弹都弹不出来

b) weex-ui的WxcPageCalendar组件,这个组件手机上都能成功调用,缺点就是有点影响性能,不过这个组件支持往返日期的选择,如果你的功能需要这样的交互,也是个不错的选择

c) weex的picker内置模块,这个相对于前两个,性能更好,而且兼容iphoneX。测试时发现在不同型号手机上,样式和交互方式是不一样的。如果想要样式和交互一致,建议用weex-ui的日历组件。

上次测试发现了一个问题,我在这里描述下,大家知道一下。手机360N4上,例如当前日期是2018-06-30,默认选中。当你翻到其它年份的6月30日时,它也是选中状态。目前我没有提供解决方案,功能是不影响使用,在其它手机上没有发现这个问题。如果有好的解决方法,请给我留言。

8. weex的渲染问题

说一个我遇到的问题,如果你也遇到这种问题,希望对你有帮助。

一个页面中多个按钮,点击后可以切换面板,如果面板中有可编辑区域的内容,例如input和textarea,面板切换走,在切换回来,你会发现,刚才你编辑的内容不见了,那么这个问题怎么解决。

说下我的思路,先定义一个变量inputTxt:"",inputFlag:false,编辑的时候,获取blur或者change方法内的值,也就是你编辑的值,将变量this.inputTxt = event.value;

this.inputFlag=true;(这个变量的意思就是你编辑过)

然后切换回来的时候判断:

if(this.inputFlag){ //编辑过

      编辑框的内容 = this.inputTxt;

}else{ //没有编辑过

      编辑框的内容 = 接口回显的值;

}

这样不论你怎么切换,页面内容的显示都没有问题了 。

9. css的写法

Css不支持用scss或者less,组合式css分开写

这里我重点强调一句,用最原始的写法,最笨的写法,就是最好用的写法。

组件的话,大家可以参考下weex-ui和bui-weex

10. 文件下载和图片上传

参见:natjs.com/#/

11. 个人意见

不建议大家用weex开发,个人觉得不好用,做不了特别复杂的交互,也没有解放iOS和Android的人力