uni-app跨端开发H5、微信小程序、支付宝小程序遇到的坑

文章目录

微信支付宝小程序通用功能
- 1.checkbox样式
- 2.分享功能
- - 支付宝小程序参数
  - 微信小程序参数
其他兼容问题
- H5
- 微信小程序
- 支付宝小程序
持续更新中...

微信支付宝小程序通用功能

1.checkbox样式

/* App.vue 页面样式没有用scoped的话，可以不要::v-deep */
/* 微信小程序样式 */
/* #ifdef MP-WEIXIN */::v-deep checkbox {.wx-checkbox-input {color: transparent;width: 36rpx;height: 36rpx;background: url("checkbox.png") no-repeat center;background-size: 100% 100%;border: none;}.wx-checkbox-input.wx-checkbox-input-checked {background: url("checkbox-checked.png") no-repeat center;background-size: 100% 100%;}}/* #endif */
/* 支付宝小程序样式 */
/* #ifdef MP-ALIPAY */::v-deep checkbox {color: transparent;width: 36rpx;height: 36rpx;background: url("checkbox.png") no-repeat center;background-size: 100% 100%;border: none;}::v-deep checkbox-checked {background: url("checkbox-checked.png") no-repeat center;background-size: 100% 100%;}/* #endif */
/* #ifdef H5 */::v-deep uni-checkbox {.uni-checkbox-input {color: transparent;width: 36rpx;height: 36rpx;background: url("checkbox.png") no-repeat center;background-size: 100% 100%;border: none;outline: none;&.uni-checkbox-input-checked {background: url("checkbox-checked.png") no-repeat center;background-size: 100% 100%;}}}/* #endif */

2.分享功能

<button class="share-btn" open-type="share">分享</button>

onShareAppMessage() {return {title: '',//#ifdef MP-WEIXINimageUrl: 'https://xx/bg-500x400.png',//#endif//#ifdef MP-ALIPAY//支付宝小程序需要网络图片路径imageUrl: 'https://xx/logo.png', //小图 icon 元素scImgUrl: 'https://xx/sc-376x330.png', //分享到支付宝好友时的主体图片bgImgUrl: 'https://xx/bg-750x825.png', //预览大图desc: '', //描述，最大长度 140 个字content: '吱口令前面的文字', //吱口令，最多 28 个字符//#endifpath: '/pages/xx/xx?params=xxx'}
}//微信H5
//需要先走jsconfig
wx.ready(function () {   //需在用户可能点击分享按钮前就先调用wx.updateAppMessageShareData({ title: '', // 分享标题desc: '', // 分享描述link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致imgUrl: 'https://xx/bg-400x400.png', // 分享图标success: function () {// 设置成功}})
});

支付宝小程序参数

onShareAppMessage 执行后必须返回一个分享对象，用于自定义分享内容。
scImgUrl 一定要网络图片地址！！！
！！！支付宝小程序path中自定义的参数只能在页面的onLoad中获取，不能在app.js的onLaunch或onShow中获取；微信小程序都可以获取到

微信小程序参数

其他兼容问题

H5

微信小程序

问题1：

webview 内嵌的H5页面不支持使用微信提供的开放标签wx-open-launch-weapp跳转其他小程序

解决：

webview页面先通过wx.miniProgram.navigateTo 跳转到原生页面，再使用wx.navigateToMiniProgram跳转小程序

问题2：

onLaunch获取不到每次打开小程序的参数

解决：【支付宝小程序同理】

onLaunch仅触发一次，且当用户「关闭」小程序时，小程序并没有真正被关闭，而是进入了「后台」状态，在短时间内，如果再打开小程序，小程序启动使用的是热启动，热启动情况下，onLaunch不触发，可以在onShow做初始化操作，且onShow获取到的参数是最新的。或者使用uni.getEnterOptionsSync()获取热启动的参数

支付宝小程序

问题1：

The ‘showToast’ method of platform ‘支付宝小程序’ does not support option ‘duration’

解决：

uni 修改依赖版本【3.6.5.20221121】以上

问题2：

自定义组件设置class无效

解决：

在自定义组件外加view，在view上设置class

问题3：

自定义组件设置点击事件（@click）无效

解决：

在组件内部设置点击事件，传递到父组件

<comp-item @handleClick="handleClick"></comp-item>

<template><view class="comp-item" @click="handleClick">自定义组件comp-item</view>
</template>
<script>export default {name: "comp-item",methods: {handleClick(){this.$emit('handleClick')}}}
</script>

问题4：

自定义组件使用v-model this.$emit(“input”, value)方式改变值

解决：

v-model绑定的值最好是独立的值，不要是某个对象的属性，绑定对象的属性值会不更新

问题5：

使用image时，mode=""会导致图片显示大小有问题

解决：

mode不需要设置的话就去掉，HBuilder自动带出的时候会有，记得去掉

问题6：

支付宝小程序没带参数时onLaunch和onShow拿到的options.query是undefined，微信options.query是{}

解决：

取参数时需要先判断options&&options.query&&options.query.xx

问题7：

支付宝小程序不建议用:active

解决：

可以用hover-class代替

问题8：

支付宝小程序不支持 <checkbox >这是文本</checkbox>

解决：

<view><checkbox />这是文本
</view>

问题9：

支付宝小程序input 默认box-sizing:content-box;

解决：

可能会有样式问题，手动设置

问题10：

支付宝小程序label、icon无法添加点击事件

解决：

label标签，只能用for指定点击的表单元素，支持的表单元素只有checkbox、radio、input、textarea。
icon组件不支持点击事件。

问题11：

支付宝小程序自定义组件中createSelectorQuery().select().fields({node:true})获取不到node

解决：

支付宝小程序在组件中不支持in(this)，需要用this.createSelectorQuery()，在页面中用my.createSelectorQuery()；
用SelectorQuery.node的方式获取；canvas需要设置宽高才能获取到node

const query = this.createSelectorQuery()
query.select('#id').node().exec((res) => {})

问题12：

用navigator.userAgent匹配AlipayClient的方式判断是否支付宝环境，在支付宝小程序正式版会返回true，体验版和开发版、开发工具都是false

解决：

用navigator.userAgent判断环境只在H5环境使用，小程序用条件编译#ifdef MP-ALIPAY

持续更新中…

uni-app跨端开发H5、微信小程序、支付宝小程序遇到的坑相关推荐

uni-app跨端开发实现APP与H5之间的通讯和交互
最近在研究uni-app跨端开发APP和H5的通讯和交互,比如H5调用APP的方法,APP往H5里面传参,H5往app外面传参.话不多说,上代码! html文件放本地的话必须放在项目根目录下的stat ...
uni-app跨端开发微信小程序之HBuilderX项目实现多环境开发
摘要:由于市场的需求不断变化,原有的开发环境和生产环境已经无法满足需求,多环境开发已经是越来越多的公司要面临的问题.本文先介绍如何将HBuilderX创建的uni-app项目转换成vue-cli项目, ...
Kbone与小程序跨端开发的一些思考
小程序是一种新的移动应用程序格式,是一种依赖Web技术,但也集成了原生应用程序功能的混合解决方案.小程序一些特性有助于填补Web和原生平台之间的鸿沟,因此小程序受到了一些超级应用程序的欢迎. 它不需要 ...
前端 domparser未定义怎么解决_开源｜wwto：小程序跨端迁移解决方案——微信转其他小程序...
开源项目专题系列 (二) 1.开源项目名称:wwto 2.github地址: https://github.com/wuba/wwto 3.简介:wwto是58同城推出的一种小程序跨端迁移解决方案,可 ...
跨端开发如何实现降本增效？
自2017年微信首次推出小程序开始,小程序应用平台迅速发展,各大互联网纷纷加入,使得小程序成为真正意义上的"互联网新技术标准". 此前市面上主流跨端方案有以下3种: 1.以 Web ...
前端技术周刊 2019-01-21：跨端开发的三条路线
2019-01-21 前端快爆微软 Edge 开发者意图为 Chrome 实现 HTML Modules,该规范用来替代之前的 HTML Imports.其优点是基于 ES Modules,可以避免 ...
uniapp开发h5微信授权登录(详细教程)
uniapp开发h5微信授权登录文章目录 uniapp开发h5微信授权登录前言一.前期准备--申请测试账号二.正式开发--前端代码三.打包发布总结前言我也是第一次做h5授权微信登录,网 ...
taro 引入js_Taro跨端开发之多业务模块管理 React Native篇(终篇)
React Native 热更新方案 rn的业务越来越庞大,同时协同的团队越来越多. rn的动态化就必须提上日程了. 对于rn热更新,首当其冲的问题就是分包. rn的基础库很大,再加上我们依赖了很多的 ...
流言终结者- Flutter和RN谁才是更好的跨端开发方案？
背景论坛上很多小伙伴关心为什么闲鱼选择了Flutter而不选择其他跨端方案?站在质量的角度,高性能是一个很重的因素,我们使用Flutter重写了宝贝详情页之后,对比了Flutter和Native详情 ...

uni-app跨端开发H5、微信小程序、支付宝小程序遇到的坑

文章目录

微信支付宝小程序通用功能

1.checkbox样式

2.分享功能

支付宝小程序参数

微信小程序参数

其他兼容问题

H5

微信小程序

支付宝小程序

持续更新中…

uni-app跨端开发H5、微信小程序、支付宝小程序遇到的坑相关推荐

最新文章

热门文章