uniapp/web2app开发总结

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

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

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

...



  



...

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://ask.dcloud.net.cn/article/64

11,检查更新并显示进度

web2app:https://blog.csdn.net/weixin_36185028/article/details/103126477

uniapp:https://blog.csdn.net/weixin_36185028/article/details/103126680

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

参考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

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

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

16,两个scroll-view一个被另一个带动

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

 

你可能感兴趣的:(uniapp)