uniapp汇总

uniapp汇总

920 发布: 2021/11/30 15:10 本文总阅读量

作用域

如下success方法内有个外部方法bookShareSuc();如果这里使用this.bookShareSuc()控制台会有报错提示bookShareSuc not is a function xxxx;这中情况下需要在外部声明一个新变量that并将this指向that然后再内部使用that.bookShareSuc()

let that = this;
uni.share({
    provider: strProvider,
    scene: strScene,
    type: 0,
    href: strShareUrl,
    title: strShareTitle,
    summary: strShareSummary,
    imageUrl: strShareImageUrl,
    success: function(res) {
    	console.log("success:" + JSON.stringify(res) + 'from==>' + that.shareFrom);
    	if (that.shareFrom == 'read') {
    		that.bookShareSuc();
    	}
    },
    fail: function(err) {
    	that.$u.toast(JSON.stringify(err));
    	console.log("fail:" + JSON.stringify(err));
    },
    complete() {
    	console.log('xxxxxxxx');
    },
})

input标签

1>input有默认宽度,当UI上需要的宽度大于默认值时,需要添加一个父视图,约束父视图所要呈现的宽度,然后设置input宽度100%;
2>关于键盘弹起cursor设置问题,每次需要先设置false有个延迟在设置为true否则只能第一次响应键盘弹起,后续操作此属性不起作用,但是设置了延迟之后有个UI体验问题,就是键盘会先收起再弹出;
3>页面softinputMode属性和inputadjust-position
当页面softinputMode属性为adjustResize时,inputadjust-position无效【安卓】;
当页面softinputMode属性为adjustPan时,inputadjust-positionfalse时【iOS12之前有问题】;
解决方案:softinputMode设置为adjustPanadjust-position设置为true【这时整个页面会随着键盘上移,体验差了点,但是对比前两者bug只能退而求其次】;
参考

层级问题

web-viewmapvideo等标签层级要比vue页面层级高,要在这些页面上面添加子视图可通过原生子窗体【nvue】来解决【不是唯一】

web-view

1>app-vueweb-view组件不支持自定义样式,而v-show的本质是改变组件的样式。即组件支持v-if而不是支持v-show
所以如果html整个页面铺满屏幕可使用vue+web-view来呈现,如果不是铺满整个屏幕要使用nvue+web-view来呈现;因此:vueweb-view导航栏要使用uni-app的原生导航;
2>htmlweb-view的交互事件参考

UI布局思路

uniapp的布局跟html统一,跟oc不一样,模拟器看不出差别,到了实际真机上由于手机浏览器有自带上下导航,而且随着滑动自带导航会发生变化,oc的布局思路不适合

CSS样式

vue界面比较友好,基本上css布局样式上和html无差异,但是nvue界面只支持flex布局,100%等写法一律不生效;除非破不得已一般尽量使用vue【遇到上面提到层级问题需要特殊对待】

控件设置本地背景图

必须先import再 给data()中的变量赋值;如果直接给data()里的属性赋值app正常,h5本地运行正常,h5发布之后背景图是无法显示的;正确方式如下:

<view class="vip-item" 
  :style="{'background':'url('+vipImgUrl+')',
  'background-size':'100% 100%'}"> 
</view>

///js
import vipBackimg from "@/static/mine/mine-vip.png";
export default{
    data(){
    	return{
    		vipImgUrl:vipBackimg,
    	}
    }
}

三方配置

所有三方配置信息,需要打包后生效

app打包和h5发布

云端打包有次数限制,这个次数的定义不是唯一不变的,有时候3次字后就需要付费了,有时候1次之后就需要付费;
建议:
1>.我遇到的情况一般都是安卓打包受限,【估计安卓打包需求大】,当受限时可单独云端打包iOS
2>.采用制作自定义基座的方式打debug包测试,但是有时候debug包无法完成;例如openinstalldebug包测试无效
3>.h5发布的时候注意manifest->h5配置路由模式【hash】运行路径【/h5/】发布的时候域名填写栏内【域名(带http)+/h5/】
4>.h5默认的静态html页面有个js路径【原dmeo中没有/h5/】要补充;自定义的html路径也需要注意:

<script src="/h5/static/common/js/touch-emulator.js"></script>

其他扩展

1.例如阿里巴巴矢量图的使用问题:
2.全局变量的挂载使用:【例如:小说中的$yb的使用 ybhttp.js、mian.js】
参考