codecamp

Weex 使用场景

一、不可旋转屏幕的应用

如果应用不支持屏幕旋转,你可以不用关心以上问题。当 Weex 启动时,会自动获取当前屏幕宽度作为全局宽度,所有之后创建的 Weex 页面都会使用该宽度。

二、某个特殊页面支持横竖屏切换

1、设置页面保留原始 CSS 样式值 2、当屏幕旋转完成后,调用以下接口设置新的屏幕尺寸,并重新排版

  • iOS:
CGFloat w = [UIScreen mainScreen].bounds.size.width;
CGFloat h = [UIScreen mainScreen].bounds.size.height;
[_instance setPageRequiredWidth:w height:h];
[_instance reloadLayout];
  • Android:
instance.resetDeviceDisplayOfPage();
instance.reloadPageLayout();

你可以使用最新 Playground 扫码示例 要在控制面板里允许屏幕自动旋转。

image

三、注意

对于不希望受屏幕宽度和 viewPortWidth 影响的尺寸,请使用 'wx' 单位。


Weex 屏幕参数接口
Weex 参与者公约
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Weex 调试

Weex 集成Devtool到Android

Weex 集成Devtool到IOS

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }