Weex 初探

日期:2020-11-23 类型:WEEX 

关键词:凯发k8娱乐官网地址手机版下载,凯发k8官网官网,k8下载网址登录

  它使用了 Web 技术来开发 Android、IOS 应用,从而达到更快的迭代速度,同时降低了开发原生应用的门槛,

  Weex 设计之初是为了和原有应用进行兼容开发,和 NativeScript 不同,它只需要在项目中添加 Weex 的 SDK 即可使用。

  它的定位不是全部应用,目标是针对部分变动频繁的应用。它是一种解耦的应用,每个页面相对独立,通过路由的方式对调用各页面,

  通过 API 的方式与设备进行交互。所以可以看到官网上 Weex 的结构图:

  Weex 做一个简单一些的例子还是比较合适的。本文以仿开眼部分功能为例做一小应用。先看下效果图:

  首先需要准备好 npm 环境、Android 环境,IOS 环境,由于在 mac 下直接安装 xcode 就具备 IOS 环境了,且 npm 是前端必备开发环境的,就无需再安装了。Android 环境的安装可以直接安装 Android Studio,一键配置好环境。

  按照提示操作即可。安装速度都不是很快,需要耐心等候。为了方便开发,我们采用 airbnb 的代码规范,先在 devDependencies 安装相关依赖(或者全局安装eslint,用 eslint 的init 功能也可以):

  要实现三端开发,默认的 weex 项目模板是不行的,它的设计是为 Native 准备的,不考虑单页应用的方式。

  虽然不推荐三端同时开发(兼容三端效率会比较低),但为研究怎么实现我们还是做一下。先安装单页应用必备 vue-router

  包括挂载都是框架做的,我们不需要处理,所以它只是给 web 使用的。

  现在开始像正常写 vue 一样开始码代码吧。要先注意的一点是 native 端不支持 vue-router 的特性,

  需要使用 navigator 模块进行 push 操作,所以我们需要单独写个模块,通过 mixin 方式进行兼容 页面跳转,

  同时准备好你需要的 api 库模块(我用的 axios),以及其他公众模块,比如说 storage 。Weex 中的 Storage 模块是为了兼容 web 版本,接口和 web 版本的 LocalStorage 比较类似,只是异步形式。为方便,我们可以将回调式转为 Promise 式:

  然后在 Mixin 中使用它即可。如果你有精力的话,可以设计一个基于 storage 的数据传递模块。

  每个页面是独立,一定要记住这一点,因此 mixin 之类的公用库,需要手动引入到页面中

  css 选择器只支持一级,比如 .classA 不支持 .classA .classB 这种类型,你需要为设置样式的每个元素添加 className,需要防止变量冲突(web 端是单页应用,可能会有问题)

  包括在开发阶段,我们也是需要对 native 端进行效果验证的。Weex 提供了一个简单的命令:

  如果已经配置了 IOS 环境,直接运行命令就可以了。不过默认的主页是 index.js,

  需要注意的是,运行状态下默认是打开本地文件的,而运行命令是不会放 views 文件夹目录过去,

  调试没问题后,我们按照 Android 和 IOS 各自的方案进行打包即可.

  由于自己对 Native 开发了解得不多,所以好多东西一知半解,而且 Weex 的包总能发现各种小问题,

  需要强大的耐心去解决或者规避这些问题,只能祝使用的人好运吧。新出的 weex-ui 虽然已经开源好久了,

  有时间可以尝试下,不过由于核心模块没有开源,好多组件不能使用,先观望一段时间,等有好的点子再试试。