作用域
如下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属性和input的adjust-position
当页面softinputMode属性为adjustResize时,input的adjust-position无效【安卓】;
当页面softinputMode属性为adjustPan时,input的adjust-position为false时【iOS12之前有问题】;
解决方案:softinputMode设置为adjustPan;adjust-position设置为true【这时整个页面会随着键盘上移,体验差了点,但是对比前两者bug只能退而求其次】;
参考
层级问题
web-view、map、video等标签层级要比vue页面层级高,要在这些页面上面添加子视图可通过原生子窗体【nvue】来解决【不是唯一】
web-view
1>app-vue下web-view组件不支持自定义样式,而v-show的本质是改变组件的样式。即组件支持v-if而不是支持v-show;
所以如果html整个页面铺满屏幕可使用vue+web-view来呈现,如果不是铺满整个屏幕要使用nvue+web-view来呈现;因此:vue的web-view导航栏要使用uni-app的原生导航;
2>html与web-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包无法完成;例如openinstall的debug包测试无效
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】
参考