1.取服务器返回报文中的某一个key类似num@name的值，此时用data.num@name行不通，需要改写成data["num@name"]来取值才可以
2.parseFloat()需要慎用，parseFloat()虽然是将一个值转成浮点数，一般情况下没问题，但是对于有些数字却有影响，例如将"572.57"转成浮点数，会变成572.5700000001,所以要将某一个数显示在某地方，建议用toString()
3. 安卓上屏蔽蒙板后面的点击事件
backClick:function () {
},
4.scroller里面嵌套list列表的时候，list不会被自动撑开，可能需要给list设置高度
5.判断是否是iPhone X等机型的判断
<div v-if="isShowReInvestList" :class="[isIPhoneX ? 'iPhoneXStyle' : 'iPhoneStyle']" @click = "backClick()">
if(weex.config.env.deviceModel == "iPhone10,3" || weex.config.env.deviceModel == "iPhone11,8" || weex.config.env.deviceModel == "iPhone11,2" || weex.config.env.deviceModel == "iPhone11,6") {
self.isIPhoneX = true;
}
6.在隐藏了导航条的界面，需要返回上一级页面时，weex调用原生的方法中，写以下代码即可
[weexInstance.viewController.navigationController popViewControllerAnimated:YES]
7.三目运算嵌套的写法
<div :class="[isAndroid ? 'AndroidStyle' : isIPhoneX ? 'isIPhoneXStyle' : 'isIPhoneStyle']">
8.竖直居中
align-items: center;
水平居中
justify-content:center
9.weex调用原生方法传多个参数的用法
weex里面的写法如下：
ev.applyForBusinessLoanDialog("3",self.totalBorrowLineAmount/10000);
原生里面的写法如下：
WX_EXPORT_METHOD(@selector(applyForBusinessLoanDialog: paramets:))
-(void)applyForBusinessLoanDialog:(NSString *)type paramets:(NSString *)message {
if([type isEqualToString:@"3"]){
[self showAlertWithTitle:@"提示" message:[NSString stringWithFormat:@"您的累计金额已经超过%@万，暂不能申请借款。",message] defaultButtonTitle:@"确定" needMsgLabelLineSpacing:NO];
return;
}
}
10.weex搜索.vue文件，command + p
11.weex界面隐藏导航条
a.创建个状态栏statusBar.vue
<template>
<div>
<div class="iPhoneXH statusBar" v-if="isiPhoneX"></div>
<div class="iOSH statusBar" v-else-if="isiOS"></div>
<div class="androidH statusBar" v-else-if="isAndroid"></div>
</div>
</template>
<style scoped>
.iPhoneXH {
height: 88px;
}
.iOSH {
height: 40px;
}
.androidH {
height: 0px;
}
.statusBar {
width: 750px;
background-color: #ffffff;
}
</style>
<script>
import { Utils } from 'weex-ui';
var device = weex.config.env;
export default {
data() {
return {
isiPhoneX: weex.config.env.deviceModel == "iPhone10,3" || weex.config.env.deviceModel == "iPhone11,8" || weex.config.env.deviceModel == "iPhone11,2" || weex.config.env.deviceModel == "iPhone11,6",
isiOS: device.platform === "iOS",
isAndroid: device.platform === "android"
};
}
};
</script>
2.创建个导航栏navigationBar.vue
<template>
<div>
<div :class="[isAndroid ? 'isAndroidBgViewStyle' : isIPhoneX ? 'isIPhoneXBgViewStyle' : 'isIPhoneBgViewStyle']">
<!-- 返回div -->
<div @click="goBack()" :class="[isAndroid ? 'isAndroidBackViewStyle' : isIPhoneX ? 'isIPhoneXBackViewStyle' : 'isIPhoneBackViewStyle']">
<image class="backImg" :src="back_img"/>
</div>
<!-- 标题 -->
<text class="centerTitle">{{title}}</text>
</div>
<!-- 底部分隔线 -->
<!-- <div class="bottomLine"></div> -->
</div>
</template>
<style scoped>
.isAndroidBgViewStyle {
width: 750px;
height: 100px;
background-color: #ffffff;
justify-content: center;
align-items: center;
}
.isIPhoneXBgViewStyle {
width: 750px;
height: 150px;
background-color: #ffffff;
justify-content: center;
align-items: center;
}
.isIPhoneBgViewStyle {
width: 750px;
height: 100px;
background-color: #ffffff;
justify-content: center;
align-items: center;
}
.isAndroidBackViewStyle {
padding-left: 30px;
padding-right: 30px;
height: 100px;
position: absolute;
top: 0;
justify-content: center;
}
.isIPhoneXBackViewStyle {
padding-left: 30px;
padding-right: 30px;
height: 150px;
position: absolute;
top: 0;
justify-content: center;
}
.isIPhoneBackViewStyle {
padding-left: 30px;
padding-right: 30px;
height: 100px;
position: absolute;
top: 0;
justify-content: center;
}
.backImg {
width: 18px;
height: 40px;
}
.centerTitle {
font-size: 36px;
color: #0e1932;
}
.bottomLine {
background-color: #cccccc;
width: 750px;
height: 1px;
}
</style>
<script>
var modal = weex.requireModule('modal');
var baseUrl = require('./include/base.js').getWeexURL;
var ev = weex.requireModule("navevent");
export default {
props: {
/**
* 导航栏标题
*/
title: {
type: String,
required: true
},
/**
* 是否是直接返回上一页，默认为true直接返回上一页
*/
isBack: {
type: String,
default: 'true'
}
},
data() {
return {
back_img:baseUrl+"img_back.png",
isAndroid:false,
isIPhoneX:false
};
},
created: function () {
if(weex.config.env.deviceModel == "iPhone10,3" || weex.config.env.deviceModel == "iPhone11,8" || weex.config.env.deviceModel == "iPhone11,2" || weex.config.env.deviceModel == "iPhone11,6") {
this.isIPhoneX = true;
}
},
methods: {
mounted: function () {
var config = this.$getConfig();
var json = JSON.parse(JSON.stringify(config));
this.platform = json.env.platform;
var self = this;
if ("android" === self.platform) {
this.isAndroid = true;
} else {
this.isAndroid = false;
}
},
goBack(e) {
if (this.isBack === 'true') {
var self = this;
var config = this.$getConfig();
var json = JSON.parse(JSON.stringify(config));
if("android" == json.env.platform) {
ev.pop("", null);
} else {
ev.showNavPop();
}
} else {
this.$emit("click", {e});
}
}
}
};
</script>
3.在需要隐藏导航栏的vue中使用即可导入
<template>
<div style="background-color: #f0f0f0;">
<statusBar></statusBar>
<navBar title=“导航条” isBack='false' @click="goback()"></navBar>
</div>
</template>
<script>
/*引用自定义的状态栏控件*/
import statusBar from './statusBar.vue';
/*引用自定义的导航条控件*/
import navBar from './navigationBar.vue';
export default {
components: {navBar,statusBar},
}
</script>
4.记得调用隐藏原生导航条的方法： ev.hideTitle()
created: function () {
globalEvent.removeEventListener("appear");
globalEvent.addEventListener("appear",function(e){
var fileName = e.page;
if ('' !== fileName && '当前的js文件名.js' === fileName) {
ev.hideTitle();
}
});
},
12.weex页面隐藏导航条时，界面底部出现空白的解决方案
在加载weex界面的跟控制器里面设置如下代码即可
- (void)setupFrame {
CGFloat devH = [UIScreen mainScreen].bounds.size.height;
BOOL isIphoneX = WJ_Device_iPhoneX || WJ_Device_iPhoneXR || WJ_Device_iPhoneXsMax;
BOOL isHideNav = [self.pageid isEqualToString:@"apply_for_business_loan.js"] || [self.pageid isEqualToString:@"apply_for_business_loan_affirm.js"] || [self.pageid isEqualToString:@"apply_for_business_loan_complete.js"];
CGFloatnavH = isHideNav ?0:64;
CGFloatiPhoneXH = isIphoneX ?40:0;
CGFloatviewH = isIphoneX ? devH : devH - iPhoneXH - navH;
_instance.frame = CGRectMake(0, 0, CGRectGetWidth(self.view.frame), viewH);
}
网友评论