JSON.parse()
解析JSON字符串并返回对应的值，可以额外传入一个转换函数，用来将生成的值和其属性, 在返回之前进行某些修改。
JSON.stringify()
返回与指定值对应的JSON字符串，可以通过额外的参数, 控制仅包含某些属性, 或者以自定义方法来替换某些key对应的属性值。
class组合：
<div v-for="(imageURLStringArray, index1) in imageURLStringArrays" :key="index1" style="flex-direction: row;">
<div v-for="(imageURLString, index2) in imageURLStringArray" :key="index2">
<div :class="['imageView',index2===1 ? 'imageViewMarginBetween': 'imageViewMarginLeft']"><image :src="imgSrc" class="image"/></div>
</div>
</div>
定义Object类型：
type: Object,
required: true
url中文转义encodeURI
// 返回默认图片地址
isDefaultImage(url) {
// 1.此处url可能包含中文，需要编码，否则ios无法识别
// 2.local://xxx.png为原生ios端本地图片路径
return url !== undefined ? encodeURI(url) : 'local://logo.png'
}
页面间数据传递：
native -> weex:
可以在native端调用render时传入的option中自定义字段,
例如NSDictary *option = @{@"params": @{}}， 在weex中使用weex.config.params取出数据
weex -> weex: 使用storage
weex -> native: 使用自定义module
/**
从weex页面跳转到原生页面
@param vcName 原生页面的字符串类名，如果这个类有vc的类方法会按此方法生成类，如果没有则直接alloc init生成类，所以这里还是建议大家用类方法vc包装下自己的页面的生成方法，或者手码生成
@param param 传给vcName控制器的字典，运行时遍历字典赋值给控制器相应的属性
*/
- (void)pushNative:(NSString *)vcName param:(NSDictionary *)param {
Class vcClass = NSClassFromString(vcName);
if (vcClass == nil) {
return;
}
UIViewController *vc = [[vcClass alloc] init];
SEL vcSEL = NSSelectorFromString(@"vc");
if ([NSClassFromString(vcName) respondsToSelector:vcSEL]) {
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Warc-performSelector-leaks"
vc = [NSClassFromString(vcName) performSelector:vcSEL];
#pragma clang diagnostic pop
}
unsigned int count = 0;
objc_property_t *plist = class_copyPropertyList(vcClass, &count);
for (int i = 0; i<count; i++) {
objc_property_t property = plist[i];
NSString *propertyName = [NSString stringWithUTF8String:property_getName(property)];
if (param[propertyName]) {
[vc setValue:param[propertyName] forKey:propertyName];
}
}
//释放
free(plist);
[[weexInstance.viewController navigationController] pushViewController:vc animated:YES];
}
动态宽度
:style="{ width: twoLineTextWidth + 'px' }"
获取网络请求后，值给控件，然后拿控件的size
1、引用控件
<text class="rightText subText" ref="phoneText">{{data.sellerPhone}}</text>
2、导入dom
const dom = weex.requireModule('dom')
3、变更size
/// 生命周期方法，更新成功后，网络请求数据变更新，控件双向绑定，界面刷新成功后会自动走此方法，在这里获取size。
updated:function () {
const result = dom.getComponentRect(this.$refs.phoneText, option => {
var screenWidth = 375*2;
var imageWith = 34;
var imageLeftMargin = 32;
var imageRightMargin = 40;
var phoneLeftRightMargin = 30;
this.twoLineTextWidth = screenWidth - (imageWith + imageLeftMargin + imageRightMargin + phoneLeftRightMargin*2 + option.size.width);
})
}
VSCode里的.vue文件模板
<template>
<div @viewappear="viewappear" @viewdisappear="viewdisappear">
</div>
</template>
<script>
export default {
data(){
return {
name:"aaaaaa",
}
},
// 页面创建前
// 在实例初始化之后，数据观测和event/watcher时间配置之前被调用。
beforeCreate: function() {
console.log("beforeCreate")
},
// 页面已经创建，相当于iOS vc的viewDidLoad
// 实例已经创建完成之后被调用。在这一步，实例已经完成以下的配置：数据观测，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。
created: function() {
console.log("created");
},
// 在挂载开始之前被调用：相关的render函数首次被调用。
// 该钩子在服务器端渲染期间不被调用。
beforeMount: function() {
console.log("beforeMount")
},
// el被新创建的vm.$el替换，并挂在到实例上去之后调用该钩子函数。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内。
// 在这发起后端请求，拿回数据，配合路由钩子做一些事情
mounted: function() {
console.log("mounted")
},
// 数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
// 你可以在这个钩子中进一步第更改状态，这不会触发附加的重渲染过程。
beforeUpdate: function() {
console.log("beforeUpdate");
},
// 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
// 当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
updated: function() {
console.log("updated");
},
// 【类似于React生命周期的componentWillUnmount】
// 实例销毁之间调用。在这一步，实例仍然完全可用。
beforeDestroy: function() {
console.log("beforeDestroy");
},
// Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
destroyed: function() {
console.log("destroyed");
},
methods: {
// 相当于iOS里的viewWillAppear
viewappear () {
console.log('viewappear')
},
// 相当于iOS里的viewWillDisappear
viewdisappear () {
console.log('viewdisappear')
},
},
}
</script>
<style scoped>
</style>
网友评论