Rexxar 是一个针对移动端的混合开发框架。现在支持 Android 和 iOS 平台。rexxar-web
是 Rexxar 的 Web 端实现,提供配合 Rexxar Container 运行的基础工具。
想要运行一个例子了解使用 Rexxar 开发页面的工作流程,直接查看简单的 example。如果要在 iOS/Android Container 查看,请至 rexxar-ios 或 rexxar-android。
关于 Rexxar 的整体介绍,可以查看文档:Rexxar 简介。
关于 Rexxar iOS,可以访问:https://github.com/douban/rexxar-ios。
关于 Rexxar Android,可以访问:https://github.com/douban/rexxar-android。
$ npm install rexxar-web --save
widgetMessenger
是一个消息组装器,分段传入参数构成消息体
let messenger = widgetMessenger('douban', 'rexxar-container')('widget/alert_dialog')
callbackListener
将注册给定的回调函数,并挂载到全局,用于客户端调用
let cbName = callbackListener('Rexxar.Widget.AlertDialog')('confirm')(() => {})
assemblePayload
是将一个对象转化成消息中的payload
let data = {
title: 'AlertDialog',
callback: cbName,
}
let payload = assemblePayload(data)
dispatch
将由widgetMessenger组装好的消息分发给客户端
dispatch(messenger(payload))
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)
)
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 目录。
$ git clone https://github.com/douban/rexxar-web
$ cd rexxar-web/example
$ npm i
$ gulp serve
gulp serve 启动调试服务器之后,你可以在浏览器中通过 https://localhost:8080/rexxar/demo.html?uri=douban:https://douban.com/rexxar_demo/
这样的url来查看页面。
如果你需要 iOS/Android Container 访问调试服务器上的页面,则应该在 serve
的时候明确指定机器的ip。
$ gulp serve --ip 192.168.0.250
然后将 Container 中的 routes 地址改为 https://192.168.0.250:8080/routes.json
这样的地址。
本地调试完成后,通过以下命令可以在 dist
目录下生成一系列打包后的资源:
$ gulp deploy
在这个例子中我们用 raw.githubusercontent.com
作为我们的静态资源存放地址,iOS/Android Container 通过访问 dist/routes.json
获取路由文件。当然你可以使用自己的CDN服务器来存放资源,并且可以根据需求定制自己的测试环境和线上环境。
- v0.2.0
- rexxarFetch 对于 iOS WKWebView 亦将 POST 转化成 GET 来处理,需要配合 rexxar-ios v0.3.0 及以上使用
- 新增 widgetMessenger, assemblePayload, callbackListener, dispatch
- 废弃 getRexxarWidget
- develop on your branch
- run build via eslint
- test in example
- commit and pr
- check build
- dump version to new one in package.json
- pr and merge into master
- add tag and write changelog
- npm publish
Rexxar is released under the MIT license. See LICENSE for details.