weex开发中遇到的问题记录

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>