[使用 Weex 和 Vue 开发原生应用] 4 使用 Weex 平台的功能

baukh789 发布于2019-06-25 11:03 / 3016人阅读

摘要：使用的模块模块的文档通过即可引入的模块。的模块提供了使用原生功能的能力。平台信息，目前是和之一。设备型号仅限和。在中会接收到这个事件，会传递给框架，并且触发最外层组件的事件，最终会找到方法并执行。

系列文章的目录在 ? 这里

除了 Vue 框架提供的功能以为，Weex 平台本身也提供了很多功能，这些功能比前端框架更底层一些，而且是跨框架通用的，在 Vue 和 Rax 里都可以用。本文的几个例子越来越偏底层，最后一个例子还需要写 java 代码。

使用 Weex 的模块

Weex 模块的文档

通过 weex.requireModule 即可引入 weex 的模块。

const modal = weex.requireModule("modal")

modal.toast({
  message: "native toast"
})

Weex 的模块到底是什么东西？

模块的用法很简单，像普通 js 模块一样调接口就行了，看起来挺像一个 npm 模块的，但是在 Weex 模块内部会调用原生接口，最终调用的都是原生平台提供的功能。Weex 的模块提供了使用原生功能的能力。

例如 modal 模块可以弹出 toast 、alert 、confirm 、prompt 等各种弹窗，这些弹窗都是原生弹窗，在 Android 和 iOS 下的风格和行为是由各自的系统决定的。Weex 的模块在 js 这一层只负责向原生环境里传递数据，通知 native 去执行某些操作。

像 storage 、navigator 、clipboard 这种依赖平台特性的功能，需要调用平台原生接口才能实现，所以只能写成模块。

模块的同步和异步

一般来说，都是调用模块的功能，并不会依赖模块返回值的，但是像 dom 模块中的 getComponentRect 接口是用来计算组件的宽高和位置的，必须得从原生端获取值。但是在 Weex 最初设计的版本里，模块都是异步返回值的，也就是说，只能通过回调函数的方式拿到真正的布局信息（也可以自己封装成 Promise）。现在 Weex 已经支持了模块的同步返回值，但是为了保持原先版本中接口的行为一致，getComponentRect 这个方法依然是异步的。

const dom = weex.requireModule("dom")

const returns = dom.getComponentRect(this.$refs.box, option => {
  console.log(option) // { result: true, size: { ... } }
})

console.log(returns) // undefined

上边的代码中，会先执行 console.log(returns) 再执行 console.log(option)，并且 getComponentRect 方法没有返回值，所以 returns 的值是 undefined，option 中才是真正的原生端返回的布局信息。

扩展 Weex 的模块

Weex 本身内置了很多模块，出于通用性考虑，我们只会把最基础的模块打包进 SDK。其他个性化的模块可以自己来实现，或者从社区中找。Weex Market 将会是一个收集这些扩展模块（组件、插件）的地方，结合 weex-pack 可以实现方便的安装和扩展。（目前来说，Weex Market 中还是基于旧版 .we语法的模块比较多，不适用于 Vue，在使用前要看准适用的框架）

具体的扩展 Weex 模块的方法，参考：

《Android APIs》

《Android 扩展》

《iOS APIs》

《iOS 扩展》

获取平台环境数据

Weex 的运行环境有好几种，在写代码的时候，有些情况下需要获取环境数据。Weex 提供了 weex.config 变量可以获取配置信息。

bundleUrl: 当前 js bundle 的 URL 地址。

env: 环境对象。

weexVersion: WeexSDK 的版本。

appName: 应用名字。

appVersion: 应用版本。

platform: 平台信息，目前是 "iOS"、"Android" 和 "Web" 之一。

osVersion: 系统版本。

deviceModel: 设备型号 (仅限 iOS 和 Android)。

deviceWidth: 设备宽度。

deviceHeight: 设备高度。

此外其实还有一个全局的 WXEnvironment 变量，它和 weex.config.env 的属性是一样的。

下边是一个获取环境数据的二维码（支持拷贝）：

写三端不一致的代码 只针对 native 平台注册 Vuex

因为在浏览器环境中，Vuex 是会自动注册的，只需要引入库文件就行了，如果重复注册，Vuex 会抛出警告的。(下边这段代码摘自 Vuex)

// auto install in dist mode
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue)
}

但是在 native 环境中没有 window 变量，就需要再手动调用 Vue.use(Vuex) 注册 Vuex 插件，在注册前判断当前运行的平台。

import Vue from "vue"
import Vuex from "vuex"

// Vuex is auto installed on the web
if (WXEnvironment.platform !== "Web") {
  Vue.use(Vuex)
}

不同的链接跳转行为

如果你在不同端上运行了 weex-hackernews 里的项目，会发现在浏览器上点击文章链接是会新开一个页签的，但是在客户端上点击链接就不会新开视图，而是在当前视图里跳转。

这种不同的行为体现在 story.vue 文件里，这里的跳转链接并不是直接使用的 Weex 里的标签，而是自定义了一个的组件，把 url 参数传过去。


  {{story.title}}
  ({{ story.url | host }})

页面跳转逻辑是在 external-link.vue 里组件实现的：

该组件监听了 click 事件，在点击时会首先判断当前运行的平台，如果是 Web ，则使用 window.open 新开页面，否则（在原生平台中）就默认使用 vue-router 进行跳转，这个“跳转”其实只是更新了当前的视图，其实还在同一个原生页面内。

透传原生事件

如果你看了 src/App.vue 中的代码，会发现里边用了一个 androidback 的事件。它实现的效果是绑定了 Android 中的“返回”事件，点击返回按钮就会退回上一个视图。

这个事件并不是 Vue.js 本身提供的，也不是 Web 标准里的，在浏览器上肯定不会给你提供一个以 android 开头的事件名。在 vue-router 里也不会加这样的东西。甚至如果你去翻 Weex 的文档，也找不到这个事件类型，它也不是 Weex 默认提供的。

想要实现 Android 特有的功能，就得在 Android 项目里的代码，在“前端”层面是解决不了这个问题的，要写 java。

在 Android 中派发原生事件

首先，在 Android 里肯定是可以监听到“返回”按钮的点击事件的，其实只要实现 Activity 里的 onBackPressed 接口就可以了，它会在当前视图里点击返回按钮时执行。在 weex-hackernews Andorid 项目里的 MainActivity.java 中，就实现了 onBackPressed 接口：

public void onBackPressed() {
    Log.e("USER ACTION", "BACK");
    WXSDKManager.getInstance().fireEvent(mWXSDKInstance.getInstanceId(), "_root", "androidback");
}

在这个方法里，通过 WXSDKManager.getInstance() 取到了当前页面的实例，然后调用 fireEvent 接口给根视图派发 androidback 事件，事件名是可以自定义的。在 Weex Runtime 中会接收到这个事件，会传递给 Vue.js 框架，并且触发最外层组件的 androidback 事件，最终会找到 back 方法并执行。（这里说的 Weex Runtime 是前端代码实现的，比 Vue.js 更底层一些）。

小结

除了 Vue.js 本身的特性以外，Weex 还提供了很多平台化的特性，这些特性比前端框架更底层，也更通用一些。即使你用的不是 Vue.js 而是 Rax，或者是旧版的 .we 的语法，Weex 里的这些特性也都是可以用的。

虽然同一份代码可以运行在三端，但是 iOS 和 Android 和 Web 都有各自的优势和缺陷，如果你想实现一些平台特有的功能，Weex 也是支持的。如果你想要体现平台特有的优势，就得针对某个平台写一下原生代码。在写 iOS 或者 Android 代码的时候，肯定能确保在其他平台中不会执行到；但是在写 js 代码的时候，如果使用了只在 Web 上才有的特性，就得注意一些，不要让 iOS 和 Android 执行到这些代码。

混合云超融合服务器 Weex weex webrtc weex图表 weex-playground

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/13519.html

[使用 Weex 和 Vue 开发原生应用] 4 使用 Weex 平台的功能

摘要：使用的模块模块的文档通过即可引入的模块。的模块提供了使用原生功能的能力。平台信息，目前是和之一。设备型号仅限和。在中会接收到这个事件，会传递给框架，并且触发最外层组件的事件，最终会找到方法并执行。系列文章的目录在 ? 这里除了 Vue 框架提供的功能以为，Weex 平台本身也提供了很多功能，这些功能比前端框架更底层一些，而且是跨框架通用的，在 Vue 和 Rax 里都可以用。本文的...

YuboonaZhang 2019-06-25 15:59 评论0 收藏0
用WEB技术栈开发NATIVE应用（二）：WEEX 前端SDK原理详解

摘要：依旧采取传统的开发技术栈进行开发，同时在终端的运行体验不输。首先来看下前端开发框架目前与构成了三大最流行的前端开发框架，具有组件化以及三大特性，还学习的，引入了状态管理模块。摘要： WEEX依旧采取传统的web开发技术栈进行开发，同时app在终端的运行体验不输native app。其同时解决了开发效率、发版速度以及用户体验三个核心问题。那么WEEX是如何实现的？目前WEEX已经完全开...

ls0609 2019-08-22 15:00 评论0 收藏0
[使用 Weex 和 Vue 开发原生应用] 0 项目介绍和文章目录

摘要：全球首个使用和开发的原生应用那就是官方出了一个，是一个完整的使用的例子，并且用到了和服务端渲染。项目介绍和文章目录配置开发环境编写独立页面使用框架的特性使用平台的功能使用使用完整项目目录详解背景介绍 Weex 和 Vue 已经互相支持，这也不是新闻了（如果你觉得是新闻，自行在网上搜相关信息……），Vue.js 也因此具备了开发原生应用的能力。 Vue 官方仓库中包含了适配 Weex ...

DevWiki 2019-08-20 14:15 评论0 收藏0
[使用 Weex 和 Vue 开发原生应用] 0 项目介绍和文章目录

摘要：全球首个使用和开发的原生应用那就是官方出了一个，是一个完整的使用的例子，并且用到了和服务端渲染。项目介绍和文章目录配置开发环境编写独立页面使用框架的特性使用平台的功能使用使用完整项目目录详解背景介绍 Weex 和 Vue 已经互相支持，这也不是新闻了（如果你觉得是新闻，自行在网上搜相关信息……），Vue.js 也因此具备了开发原生应用的能力。 Vue 官方仓库中包含了适配 Weex ...

岳光 2019-06-25 11:01 评论0 收藏0
[使用 Weex 和 Vue 开发原生应用] 0 项目介绍和文章目录

摘要：全球首个使用和开发的原生应用那就是官方出了一个，是一个完整的使用的例子，并且用到了和服务端渲染。项目介绍和文章目录配置开发环境编写独立页面使用框架的特性使用平台的功能使用使用完整项目目录详解背景介绍 Weex 和 Vue 已经互相支持，这也不是新闻了（如果你觉得是新闻，自行在网上搜相关信息……），Vue.js 也因此具备了开发原生应用的能力。 Vue 官方仓库中包含了适配 Weex ...

jackwang 2019-06-25 15:57 评论0 收藏0