从 Remax 2.0 开发,remax/one
支持 web 应用的构建。
$ remax build -t web
为了与小程序对齐,Remax 为 Web 平台也提供了一份与小程序类似的应用配置。
router 配置从 2.6.0 开始支持
// app.config.jsmodule.exports.web = {// 配置的页面pages: ['pages/index/index'],window: {// 页面默认标题defaultTitle: '页面默认标题',// 是否全局开启下拉刷新pullRefresh: false,// 触底滚动的默认距离,单位 pxreachBottomOffset: 50,},router: {// history 类型,支持 hash 和 browsertype: 'hash',},// tab bar 配置tabBar: {// 背景色backgroundColor: '#fff',// 选中状态的 tab 标题颜色selectedColor: 'red',// tab 标题颜色titleColor: 'blue',// tab 对象列表items: [{// tab 标题title: '标题',// tab 对应页面路由url: 'pages/index/index',// tab 显示的图片地址image: '图片地址',// tab 选中后的显示的图片地址activeImage: '选择图片地址',},],},};
同样,Remax 为 Web 平台也提供了一份与小程序类似的页面配置。
// app.config.jsmodule.exports.web = {window: {// 页面标题defaultTitle: '页面标题',// 是否开启下拉刷新pullRefresh: false,// 触底滚动的距离,单位 pxreachBottomOffset: 50,},};
可以通过建立 [module].web.js
文件来做 web 平台同构。
// 在 web 平台中,以下的引用会优先使用 ./module.web.js 文件import module from './module';...
web 平台也可以通过 web-
前缀来指明只在 web 平台中使用的属性。
// 表明 `required` 只在 web 平台下使用。<Input web-required />
注意
web 平台只能通过 remax/one 来开发,因此 remax 给 web 平台提供的组件和 api 就是来自 remax/one 提供的组件和 api
与小程序不同,web 中页面之间的样式是没有隔离的,因此建议用 CSS modules 来解决这个问题。
另外要避免使用 page
选择器。
在小程序中如果你启用了 TabBar ,视图的高度是缩小的。但是在 web 中,视图的高度不变,这意味着 vh
单位在小程序和 web 中表现不同。