uniapp/web2app开发总结

Love The Way You Lie 2023-06-14 05:29 24阅读 0赞

**1，变量为数字0在ios上会不显示，需转成字符串才显示**

**2，当页面中使用webview返回按钮会失效，需要自定义头部**

**3，页面使用webview时候，默认是全屏的会遮挡住其他元素，解决办法是最好将webview布局在最下方，其他元素布局在webview的上方，onShow时计算webview距离屏幕顶部高度，并设置为这个距离：**

...
    
    <view class="kline_view">
    
      <web-view :src="kline_url"></web-view>
    
    </view>
    
    ...
    
    onShow() {
    
    // #ifdef APP-PLUS
    
    //获取vewview到顶部的高度
    
    const query = uni.createSelectorQuery().in(this);
    
    query.select('.kline_view').boundingClientRect(data => {
    
    var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
    
    setTimeout(function() {
    
    wv = currentWebview.children()[0]
    
    wv.setStyle({top:data.top })  //设置webview到顶部高度
    
    }, 1000); //如果是页面初始化调用时，需要延时一下
    
    }).exec();
    
    // #endif
    
    },

**4，调用照相机扫码后把值赋值给data里面定义到对象属性，如果该属性绑定在视图上会不显示，需要另起一个变量给该对象的属性赋值**

**5，下拉刷新禁止页面一起下拉，在pages.json的对应页面配置：**

"app-plus":{
    
    "titleNView":false,
    
    "bounce": "none",
    
    "pullToRefresh": {
    
    "support": true,
    
    "style": "circle",  //设置ios与安卓下拉统一为圈圈
    
    "color": "#1c5ea7",  //下拉圈圈颜色
    
    "offset": "100px"  //下拉圈圈出现的位置
    
    }
    
    },
    
    "enablePullDownRefresh": true

**6，建议使用 uni-app 的 onReady代替 vue 的 mounted，使用 uni-app 的 onLoad 代替 vue 的 created**

**7，本地图片引用不支持相对路径**

**8，修改原生组件样式需要在公共样式文件中修改，h5端的组件名可以在浏览器的debug中看到尾uni-开头，app端组件名为wx-开头，有时需要配置/deep/穿透进行修改：**

/* #ifdef H5 */
    
    .vtbModal{
    
    uni-radio.radio .uni-radio-input{
    
    width: 12px!important;
    
    height: 12px!important;
    
    border-color: #ccc!important;
    
    }
    
    }
    
    /* #endif */
    
    
    
    /* #ifdef APP-PLUS || MP-WEIXIN */
    
    .vtbModal{
    
    wx-radio.radio .wx-radio-input{
    
    width: 12px!important;
    
    height: 12px!important;
    
    border-color: #ccc!important;
    
    }
    
    }
    
    /* #endif */

**9，自定义导航栏弹出层禁止页面滚动：catchtouchmove="false"。**

**10，手机端浏览器唤起app并传入参数**

**参考**[**https://blog.csdn.net/weixin\_36185028/article/details/103126812**][https_blog.csdn.net_weixin_36185028_article_details_103126812]

**详细配置参考：**[**https://ask.dcloud.net.cn/article/64**][https_ask.dcloud.net.cn_article_64]

**11，检查更新并显示进度**

**web2app:**[**https://blog.csdn.net/weixin\_36185028/article/details/103126477**][https_blog.csdn.net_weixin_36185028_article_details_103126477]

**uniapp:**[**https://blog.csdn.net/weixin\_36185028/article/details/103126680**][https_blog.csdn.net_weixin_36185028_article_details_103126680]

**12，vue-cli打包webapp返回按钮处理**

**参考**[**https://blog.csdn.net/weixin\_36185028/article/details/103125354**][https_blog.csdn.net_weixin_36185028_article_details_103125354]

**13，web2app跳转其他页面头部不显示返回按钮，需要在打包配置文件sitemap.json中的pages添加：**

"pages": [
    
        {
    
            "webviewId": "__W2A__xxxx.com",
    
            "matchUrls": [
    
    {"pathname":"http://xxxx.com"}  //首页地址
    
    ],
    
    ...
    
        }
    
    ]

**14，vue打包后index.html的缓存问题（若前端修改），在打包配置文件puls中设置cache的mode为noCache：**

"plus" : {
    
        "cache" : {
    
            "mode" : "noCache"
    
        },
    
        ...
    
    }

**更多配置见****manifest.json文档说明**[**https://ask.dcloud.net.cn/article/94**][https_ask.dcloud.net.cn_article_94]

**15，h5页面弹出键盘会把页面顶上去下不来问题**

**在输入结束后用失焦事件blur 执行window.scrollTo(0, 0)**

**16，两个scroll-view一个被另一个带动**

有可能是css设置scopesd且没设置page:height:100%

[https_blog.csdn.net_weixin_36185028_article_details_103126812]: https://blog.csdn.net/weixin_36185028/article/details/103126812
[https_ask.dcloud.net.cn_article_64]: https://ask.dcloud.net.cn/article/64
[https_blog.csdn.net_weixin_36185028_article_details_103126477]: https://blog.csdn.net/weixin_36185028/article/details/103126477
[https_blog.csdn.net_weixin_36185028_article_details_103126680]: https://blog.csdn.net/weixin_36185028/article/details/103126680
[https_blog.csdn.net_weixin_36185028_article_details_103125354]: https://blog.csdn.net/weixin_36185028/article/details/103125354
[https_ask.dcloud.net.cn_article_94]: https://ask.dcloud.net.cn/article/94