踩坑集

作者: 钨丝灯 | 来源:发表于2018-05-22 12:58 被阅读0次

    简介

    小程序个人开发中遇到的问题记录,其中包括了小程序对于ES6部分不支持,样式的不兼容,页面传值缺失等问题。
    问题原因归纳为由于小程序开发环境, IOS运行环境,Android运行环境有区别导致的;
    iOS JavaScriptCore WKWebView
    安卓 X5 JSCore X5浏览器
    小程序开发者工具 NWJS Chrome WebView

    问题列表

    • Object.values().sort() 部分机型不可用
    • Object.entries() ios版本低于10.2.1 版本
    • input 输入框 type= number时 Android会去掉空格
    • 高度自适应 不同机型也会出现获取页面高度
    • 页面默认值 会看到明显的赋值过程
    • 页面传递参数 页面传递参数时特殊符号需要进行替换(?,=)
    • text文本截取,补充... 需要white-space:nowrap;

    Object.values().sort() IOS 10.2.1(14D27)

    错误信息:

    Unhadler promise rejection
    Object{line : 1180 , column …}
    column:7039,
    line:1180
    sourceURL:”[https://servicewechat](https://servicewechat).qq.com/app-service.js”
    

    现象:远程调试正常运行,预览及测试版异常
    问题:Object.values().sort()
    Object.values( ) 目前只有 IOS 10.2.1(14D27) 版本机型在预览及体验版本不可用。

    Object.entries()IOS 10.2.1(14D27)

    错误提示,Object.entries()不可以

    input 输入框 type= number时

    iPhone 中可以输入 133 4567 8910 效果
    Android 中输入不能有空格 13345678910
    输入过程中 有卡顿现象出现,该现象只在测试远程调试,及预览情况下复现。所以请不要处理

    高度自适应

    小程序页面高度并不是完美的兼容了各个机型,需要在页面中进行计算。
    windowWidth 可使用窗口宽度
    windowHeight 可使用窗口高度

    • 比例换算 宽度比例与750计算缩放比例即可
    • 获取windowHeight时计算错误,有时带tabBar,有时不带。此时计算通过
        /**
         * 兼容获取ScreenHeight-statusBarHeight
         */
        getScreenH () {
            let systemInfo = wx.getSystemInfoSync();
            let screenHeight = 0;
            let coefficient = 375 / systemInfo.screenWidth;  //屏幕正常宽度取值 375 通过宽度异常计算高度偏差
            screenHeight = (systemInfo.screenHeight - systemInfo.statusBarHeight*systemInfo.pixelRatio) * 2 * coefficient;
            return screenHeight;
        },
    

    页面默认值

    小程序页面默认值,到onReady 获取SetData 时会有短暂的延迟,通过预览及远程调试时,可以看到明显的页面初始值,变化到onReady中赋值的过程。

    页面传递参数

    小程序页面跳转支持 get方式传递参数。但今天传递了cdn图片时候,突然就丢了好几个参数,各种实验,后来发现是对特殊符号的处理不足。如果传递参数携带有“?”时,将对后边的参数进行截断,此时需要在传递参数时对参数进行replace替换处理。

    // 小程序参数传递需要替换?为指定自负
    Object.entries(item).map((item) => {
        if (item[1]) {
            // 小程序参数传递需要替换?为指定自负
            url += `${item[0]}=${item[1].replace('?','_questionmark_')}&`;
        }
    });
    
    wx.navigateTo({
        url: url
    });
    

    text文本截取,补充...

    如果不添加white-space:nowrap; 则不生效。
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    相关文章

      网友评论

          本文标题:踩坑集

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