在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
weexSDK各个版本都试过，在iOS 11下都有可能出现下面的布局问题，但是打开手淘并没有发现明显的卡顿，是不是有什么办法规避呢，请教大神， 09:14:03.0 [] This application is modifying the autolayout engine from a background thread after the engine was accessed from the main thread. This can lead to engine corruption and weird crashes. Stack:(
Foundation
0xb1f66c &redacted& + 96
Foundation
0xb1f350 &redacted& + 76
Foundation
0xfda0 &redacted& + 132
Foundation
0xb1d458 &redacted& + 112
0x82b4 &redacted& + 1948
QuartzCore
0xff90b4 &redacted& + 184
QuartzCore
0xffd194 &redacted& + 332
QuartzCore
0xf6bf24 &redacted& + 336
QuartzCore
0xf92340 &redacted& + 540
QuartzCore
0xf93180 &redacted& + 92
CoreFoundation
0xfc38b8 &redacted& + 32
CoreFoundation
0xfc1270 &redacted& + 412
CoreFoundation
0xee22f8 CFRunLoopRunSpecific + 468
Foundation
0xa6e4 &redacted& + 304
0xbd284 -[WXBridgeManager _runLoopThread] + 264
Foundation
0xa0b860 &redacted& + 996
libsystem_pthread.dylib
0xc4832c &redacted& + 308
libsystem_pthread.dylib
0xc481f8 &redacted& + 0
libsystem_pthread.dylib
0xc46c38 thread_start + 4
另：发现手淘中也用到了ReactNative
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我也在找寻相关的答案
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
在weex页面打开一个横屏app（如王者荣耀），等待刷新完毕再回到weex页面，发现页面渲染出错，重新刷新后就没问题了
二、示例页面
三、重现步骤
点击第一个绿色块
切换到任意横屏app
出现"change width"的toast之后切换会weex页面发现排版出错
再次出现toast之后 页面正常
四、出现问题代码
WXViewUtils.java中
public static int getScreenWidth(Context ctx) {
if(ctx!=null){
Resources res = ctx.getResources();
mScreenWidth = res.getDisplayMetrics().widthP
if(WXEnvironment.SETTING_FORCE_VERTICAL_SCREEN){
mScreenHeight = res
.getDisplayMetrics()
mScreenWidth = mScreenHeight & mScreenWidth ? mScreenWidth : mScreenH
} else if(WXEnvironment.isApkDebugable()){
throw new WXRuntimeException("Error Context is null When getScreenHeight");
return mScreenW
在横屏app中,weex在后台计算屏幕宽度变成了屏幕高度，导致计算错误
五、出现问题截图
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
原生里面获取屏幕宽度,当横屏状态下屏幕宽度就是竖屏时候的高度
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。专注于移动端、前端、脚本。。。
一步步教你学Weex实现登录功能（一）
一步步教你学Weex实现登录功能（一）
废话不多说，先上效果。
我们可以看到，在手机登录界面点击提交按钮，就弹出了用户名的提示。辣么，这是怎么实现的呢？这里我们用到了哪些知识呢？
首先是weex语法（前端CSS Layout，JS，以及Weex本身所提供的Model和Component）来实现WeeX界面。
其次，我们要结合Android客户端来实现具体的登录流程以及页面跳转功能。
第三是NodeJS服务器功能以及WebPack打包工具，我们之所以会讲到这个，就是想从We转换成JS Bundle并提供给客户端这个角度在原理上来更深刻地展示Weex的原理架构。
下一步，我们将结合服务器端来实现一个用Weex来实现完整登录的功能。
下面，我将从一个原生开发者（前端零基础）的角度来去如何实现Weex登录界面。
1 界面实现
作为前端零基础的初学者，我在前端布局能力上几乎是0。辣么，怎么来实现这么伟大的跨越呢？
首先，我们自己首先要确定我们登录界面的样子，并依据这个模型来判断出登录界面所需要的元素：
1. Title居中显示
2. 用户名提示及输入框独行显示
3. 密码提示及输入框独行显示
4. 提交按钮
通过以上分析得来的4种元素，我们可以在Weex中可以找到div，text，**inpu**t三种标签就可以实现。
下面是元素集合代码：
值得注意点：
1. {{textClass}}：动态class及多class指定（目前版本Chrome浏览器正常支持，Android4。4模拟器不太支持）
2. input标签：id方便查找元素，class方便style附加（目前貌似不支持依据id附加style）,type为类型（text文本，password密码），autoFocus是否自动获得焦点，placeholder默认值，value值，maxlength最大长度。
3. 具体这些参考Weex文档：，
其次，我们将通过style来实现精确布局。
在具体实现布局之前，我们要先理解CSS的盒子模型和浮动布局。参考文档在这里：
1. 盒子模型(Box Model)
width: 当我们不了解里面的属性值和意思时，可以在w3c网站上查到。比如，我们在百度中搜索w3c width就可以找到，我们可以看到下图的解释：
padding(padding-left…):
margin(margin-left):
border(border-style、border-width、border-color、border-radius):
2. 填充模式（Flex container）
（1）. flex-direction：row | column（水平布局还是垂直布局）
（2）. justify-content: flex-start | flex-end | center | space-between(内容展示方式，也就是水平居中，居左，居右的问题。这些都是父容器的属性，也就是说如果我们想要子容器水平居中就要我们的父容器添加上这个style)
（3）. align-items：stretch | flex-start | center | flex-end（也就是内容垂直居中，居下，居上的问题）
3. 定位布局（Position）
position：relative | absolute | fixed | sticky（相对定位还是绝对定位方式，可以配合top、left、bottom等形成偏移量）
4. Flex item
5. Flexbox
常用Style添加步骤：
1. overall style: divide the whole page to different parts
2. flex alignment: align boxes in every part of page
3. position box: place box, set offset
4. element specific style: set styles for certain element if needed
现在我们来看一下我们登录界面具体的CSS样式：
1、设定总容器宽度，高度自适应
width: 800;
height: auto;
2、Title水平居中
3、Title文字内容水平居中
4、用户名提示及输入框独占一行并从左往右浮动布局
5、输入框文字样式设定：
6、提交按钮样式设定
最后，如何通过点击提交按钮来实现弹出用户名呢。
1. 寻找到Input标签的value值：
/** 获取元素的value值，但是是初始设置值 */
var userName = this.$el('uInput').attr.
弹出toast:
var modal = require('@weex-module/modal');
modal.toast({'message': userName, 'duration': 1});
值得注意点：
1、获取元素的Value值：
我们通过和 就可以发现通过 this.$el(id)和e.target就可以得到元素的具体JSON值。然后我们观察到value的值在attr属性下面，故由此就能得到元素的Value值。当然，我们也可以通过生成的JS Bundle文件来观察到这种关系。
2、弹出toast和alet等的参考文档：
参考文档：
代码稍后奉献上！
weex开发实战(4)-实现登录功能
Weex事件传递机制（二）
微信授权登录
weex项目实战篇（二）
实现用户注册功能的代码
Weex例子——登录页面
weex 学习之登录界面的开发
Android第三方登录-----微信登录接入方法
一步步教你学Weex Android加载远程服务器配置
WEEX｜简单界面的实现与页面跳转
没有更多推荐了，在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
weex里的stream只能发送get,post请求。发送delete,put等调用restful API的后台应该怎么办？尝试用vue-resource，在Web下是没有问题的，android下验证失败，也许是姿势不对。求正确姿势。。。。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
Content-Type是application/x-www-form-urlencoded的时候，居然post等请求的body只能写成这样body:"userName=xxxx&mobile=xxxx"
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
需要看一下原生代码的实现，看一下HttpAdapter默认是否支持，如果不支持，需要自己自定义HttpAdapter，然后设置成自己的Adapter就可以了。
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。14:05:04 提问
问题android studio 3.0出现报错：
Error:(24, 0) Cannot set the value of read-only property 'outputFile' for ApkVariantOutputImpl_Decorated{apkData=Main{type=MAIN, fullName=debug, filters=[]}} of type com.android.build.gradle.internal.api.ApkVariantOutputImpl.
网上有人说改
variant.outputs.each { output -&
def outputFile = output.outputFile
if (outputFile != null && outputFile.name.equals('app-debug.apk')){
def fileName = outputFile.name.replace("app-debug.apk", "playground.apk")
output.outputFile = new File(outputFile.parent, fileName)
问题二：我改了一些代码，倒是没报错，但是运行模拟器，模拟器里面只显示hello world 没有显示weex的logo信息， 与pc版本的显示也有区别
不清楚你们遇到没有。
Android gradle 4.1的问题，就是在你要设置apk路径与名称的时候可能会遇到的问题，通常是将里面的each改为all，设置里面的文件名称就好，不要new File（XXX）。或者手动将gradle版本降级比如3.3等
公开 一 公开后不可再设置为私密
私密 一 仅自己可见
版权所有: 红黑联盟--IT精英由此起航
内容来自互联网,仅供用于技术学习,请遵循相关法律法规.黑客不作恶.
注册新账号
用Email注册
手机号 或 Email
√记住登录状态