林河西网站建设,网页设计与制作教程的出版社,网店排行榜前十名,培训心得总结1、支付宝不支持v-show
改为v-if。
2、v-html
App端和H5端支持 v-html #xff0c;微信小程序会被转为 rich-text#xff0c;其他端不支持 v-html。
解决方法#xff1a;去插件市场找一个支持跨端的富文本组件。
3、导航栏处有背景色延伸至导航栏外
兼容微信小程序和支…1、支付宝不支持v-show
改为v-if。
2、v-html
App端和H5端支持 v-html 微信小程序会被转为 rich-text其他端不支持 v-html。
解决方法去插件市场找一个支持跨端的富文本组件。
3、导航栏处有背景色延伸至导航栏外
兼容微信小程序和支付宝小程序 pages.json给支付宝的导航栏设置透明
{path: pages/agent/agent,style: {navigationStyle: custom,enablePullDownRefresh: false,mp-alipay: {transparentTitle: always,titlePenetrate: YES}}
}
agent页面
支付宝加上my.setNavigationBar设置标题文字即可微信需要自定义导航栏
html
templateview styleheight: 100vh;position: relative;view classbj/viewview classstatus_bar/view!-- #ifndef MP-ALIPAY --view classback clickback :style{ top: menuButton.top px, height: menuButton.height px }view classtext1/view代理中心/view!-- #endif --
/template
js
scriptexport default {data() {return {menuButton: {}}},onLoad() {// #ifdef MP-WEIXINthis.menuButton uni.getMenuButtonBoundingClientRect()// #endif// #ifdef MP-ALIPAYmy.setNavigationBar({title: 代理中心})// #endif},methods: {back() {uni.navigateBack({delta: 1,})},}}
/script css
.bj {background: linear-gradient(180deg, #ffbdbd, #ff8f8f);height: 460rpx;width: 100%;position: absolute;
}
.status_bar {height: var(--status-bar-height);width: 100%;
}
.back {position: fixed;z-index: 99;display: flex;align-items: center;color: #292929;
}
.text1 {margin-right: 14rpx;margin-left: 32rpx;width: 16rpx;height: 16rpx;border-left: 2px solid #292929;border-top: 2px solid #292929;transform: rotate(-45deg);
}
参考小程序文档 - 支付宝文档中心
4、获取节点信息支付宝不兼容uni.createSelectorQuery().in中的in
//#ifdef MP-WEIXIN
uni.createSelectorQuery().in(this).selectAll(.content_box).boundingClientRect(res {this.nodeData res
}).exec();
//#endif
//#ifdef MP-ALIPAY
my.createSelectorQuery().selectAll(.content_box).boundingClientRect().exec(res {this.nodeData res[0]
})
//#endif
5、客服
open-typecontact 仅支持微信小程序、百度小程序、快手小程序、抖音小程序
!-- #ifdef MP-WEIXIN --
button open-typecontact/button
!-- #endif --
支付宝接入客服
首先在支付宝开放平台开通蚂蚁智能客服支付宝开放平台--控制台--小程序信息--在线客服 开通后点击小程序的右上角三个点就有客服功能了 如果想点击某个按钮时进入客服页面
contact-buttontnt-inst-id企业编码scene聊天窗编码size咨询按钮大小color咨询按钮颜色icon咨询按钮图片url例如https://xxx/service.png
/ tips: 企业编码、聊天窗编码在 tips contact-button本身无法修改样式若想达到自己想要的效果如 方法父元素设置相对定位 overflow: hidden超出隐藏子元素里循环很多个contact-button出来绝对定位并使用opacity:0隐藏代码
view styleposition: relative;width: 100%;overflow: hidden;display: flex;view官方客服/viewview classiconfont iconfanhui1/viewview classalipyContact styleopacity:0; position: absolute;contact-button size40rpx v-for(item,index) in [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15] :keyindex //view
/view 参考小程序文档 - 支付宝文档中心
6、position: fixed在支付宝小程序会被弹出的键盘顶上去 如下图 “同意《服务和隐私协议》”被弹起的键盘带上来了
