@duozhuayu/rexxar-web v0.2.2

rexxar-web

Rexxar 是一个针对移动端的混合开发框架。现在支持 Android 和 iOS 平台。rexxar-web 是 Rexxar 的 Web 端实现，提供配合 Rexxar Container 运行的基础工具。

想要运行一个例子了解使用 Rexxar 开发页面的工作流程，直接查看简单的 example。如果要在 iOS/Android Container 查看，请至 rexxar-ios 或 rexxar-android。

Rexxar 简介

关于 Rexxar 的整体介绍，可以查看文档：Rexxar 简介。

关于 Rexxar iOS，可以访问：https://github.com/douban/rexxar-ios。

关于 Rexxar Android，可以访问：https://github.com/douban/rexxar-android。

安装

$ npm install rexxar-web --save

使用

widgetMessenger

widgetMessenger 是一个消息组装器，分段传入参数构成消息体

let messenger = widgetMessenger('douban', 'rexxar-container')('widget/alert_dialog')

callbackListener

callbackListener 将注册给定的回调函数，并挂载到全局，用于客户端调用

let cbName = callbackListener('Rexxar.Widget.AlertDialog')('confirm')(() => {})

assemblePayload(obj, base)

assemblePayload 是将一个对象转化成消息中的payload

let data = { 
  title: 'AlertDialog',
  callback: cbName,
}
let payload = assemblePayload(data)

dispatch(messenger)

dispatch 将由widgetMessenger组装好的消息分发给客户端

dispatch(messenger(payload))

rexxarFetch(input, init)

rexxarFetch 是对 fetch 的包装，提供与 window.fetch 一样的接口和用法。值得注意的是，在使用 POST 时会有所限制，只允许 content-type 为 application/x-www-form-urlencoded 的请求。

import { rexxarFetch } from 'rexxar-web';

rexxarFetch('/request')
  .then(response => response.json())
  .then(data =>
    console.log('request succeeded with JSON response', data)
  )
  .catch(error =>
    console.log('request failed', error)
  )

getRexxarWidget(config)

Deprecated

配置 Widget 协议的 scheme 和 host，获取 RexxarWidget 基类，推荐使用继承的方式编写自己的组件。

import { getRexxarWidget } from 'rexxar-web';

const RexxarWidget = getRexxarWidget({
  scheme: 'douban',
  host: 'rexxar-container'
});

class Title extends RexxarWidget {
  constructor(title) {
    super('title');
    this.title = title;
  }
  show() {
    super.call({ title: this.title });
  }
}
let title = new Title('My Title');
title.show();

开发与部署

关于如何开发一个 Rexxar 页面，并进行调试，部署集成，请查看 example 目录。

Quick Start

安装

$ git clone https://github.com/douban/rexxar-web
$ cd rexxar-web/example
$ npm i

调试

$ gulp serve

gulp serve 启动调试服务器之后，你可以在浏览器中通过 http://localhost:8080/rexxar/demo.html?uri=douban://douban.com/rexxar_demo/ 这样的url来查看页面。

如果你需要 iOS/Android Container 访问调试服务器上的页面，则应该在 serve 的时候明确指定机器的ip。

$ gulp serve --ip 192.168.0.250

然后将 Container 中的 routes 地址改为 http://192.168.0.250:8080/routes.json 这样的地址。

部署

本地调试完成后，通过以下命令可以在 dist 目录下生成一系列打包后的资源：

$ gulp deploy

在这个例子中我们用 raw.githubusercontent.com 作为我们的静态资源存放地址，iOS/Android Container 通过访问 dist/routes.json 获取路由文件。当然你可以使用自己的CDN服务器来存放资源，并且可以根据需求定制自己的测试环境和线上环境。

ChangeLog

• v0.2.0
  1. rexxarFetch 对于 iOS WKWebView 亦将 POST 转化成 GET 来处理，需要配合 rexxar-ios v0.3.0 及以上使用
  2. 新增 widgetMessenger, assemblePayload, callbackListener, dispatch
  3. 废弃 getRexxarWidget

Contributing

develop process

1. develop on your branch
2. run build via eslint
3. test in example
4. commit and pr

release process

1. check build
2. dump version to new one in package.json
3. pr and merge into master
4. add tag and write changelog
5. npm publish

License

Rexxar is released under the MIT license. See LICENSE for details.