美文网首页Weex学习iOS视角
weex开发中遇到的问题记录

weex开发中遇到的问题记录

作者: 十一岁的加重 | 来源:发表于2018-03-05 11:41 被阅读13次

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>

相关文章

  • weex开发中遇到的问题记录

    JSON.parse()解析JSON字符串并返回对应的值,可以额外传入一个转换函数,用来将生成的值和其属性, 在返...

  • Weex爬坑之路

    简单描述一下公司使用weex初衷和记录weex开发中遇到的问题,用作以后回顾; 移动端最大的缺点就是更新版本,整包...

  • 关于文集介绍

    这里记录关于在weex实际开发中,按照官方文档操作后依然出问题的经历 本文集是记录基于weex实现一个采购系统ap...

  • weex 踩坑记(持续更新中……)

    消失了一个月,努力为新项目倒腾 weex 中,记录一下遇到的问题。之后还会持续更新~ 目前,我使用的 weex 都...

  • 2018-06-25weex开发问题

    1. (已解决)开发遇到图片不显示问题,原因是开发的时候weex代码最终调用的是原生项目中的资源,不是weex代码...

  • Weex 05 Native路径跳转JS踩坑

    前言 weex页面跳转是很多开发者遇到的问题。navigator是Android和IOS的跳转模块,weex的We...

  • 记录开发中遇到的问题

    1.网络请求 iOS开发中基本都是使用的AFN网络库(OC),参数都是一个字典类型,这次服务端要一个字典下包含一个...

  • 记录开发中遇到的问题

    1、问题:当往plist文件中写操作时,控制台打印如下错误,[User Defaults] attempt to ...

  • weex编译ios项目

    初次编译阿里Weexdemo项目my-project,遇到的问题做个记录 npm install -g weex-...

  • Weex 理解和记录 - Web + iOS

    该文章主要记录我在weex开发中所遇到的问题及解决方法, 转载请说明出处关键词:设置端口号路由配置页面跳转图片加载...

网友评论

    本文标题:weex开发中遇到的问题记录

    本文链接:https://www.haomeiwen.com/subject/wczcfftx.html