uniapp(vue3)开发兼容微信小程序和支付宝小程序遇到的问题

问题1：image标签在支付宝小程序当中比例不正确

在微信小程序当中

在支付宝小程序当中

解决办法是在image标签当中增加 mode="aspectFill"

问题2 使用uni.getUserProfile时报错

uniapp官网 需要添加 data-eventsync="true"

<button @click="loginFn" data-eventsync="true">微信登录</button>

问题3 自定义组件的使用

在uniapp当中使用自定义组件 需要创建components文件夹，然后创建为如下形式

之后不需要引入，直接在其他页面中使用即可

问题4 在components文件夹中的页面修改uview-plus的样式不生效

解决办法，在引用该组件的页面进行样式修改

问题5 调用获取手机号方法getPhoneNumber，返回getPhoneNumber:fail Error: 系统错误 errorCode:-10000

表示在尝试获取用户的手机号码时，由于系统错误导致失败，错误码为-10000。 可能是微信开发者工具没有登录

混合开发 APP中Web容器的核心实现

www.cnblogs.com/zhou--fei/p…

问题6 使用uniapp在支付宝小程序自定义tabbar

在tabBar中写"custom": true没有效果

需要添加 "customize":true

"tabBar": {
    "color": "#333333",
    "selectedColor": "#FBA034",
    "backgroundColor": "#ffffff",
    "custom": true,
    
    // 需要添加 "customize":true
    "customize":true,
    
    "list":[
        {
            "pagePath": "pages/index/index",
            "iconPath": "static/image/tabHomeUn.png",
            "selectedIconPath": "static/image/tabHomeSel.png",
            "text": "首页"
        },
        {
            "pagePath": "pages/userInfo/userInfo",
            "iconPath": "static/image/tabMyUn.png",
            "selectedIconPath": "static/image/tabMySel.png",
            "text": "我的"
        }
    ]

约定在代码根目录下添加 tabBar 入口文件。

├── customize-tab-bar				# 自定义 tabBar 文件
│   ├── index.acss
│   ├── index.axml
│   ├── index.js
│   └── index.json
├── components
│		└── ...
├── pages
│		└── ...
├── app.acss
├── app.js
├── app.json
├── mini.project.json
└── ...

自定义tabbar组件文件名需要写成customize-tab-bar，文件夹下的内容为 index.acss、index.axml、index.js、index.json，不能写成index.vue

customize-tab-bar/index.axml

<view class="tab-bar">
  <view a:for="{{list}}" onTap="tap" data-value={{item}} data-index={{index}} class="item">
    <view style="color: {{selected == index ? selectedColor : textColor}}">{{item.name}}</view>
  </view>
</view>

customize-tab-bar/index.js

Component({
  data: {
    selected: 0,
    textColor: "#7A7E83",
    selectedColor: "#2f54eb",
    list: [
       {
            "pagePath": "pages/index/index",
            "iconPath": "static/image/tabHomeUn.png",
            "selectedIconPath": "static/image/tabHomeSel.png",
            "text": "首页"
        },
        {
            "pagePath": "pages/userInfo/userInfo",
            "iconPath": "static/image/tabMyUn.png",
            "selectedIconPath": "static/image/tabMySel.png",
            "text": "我的"
        }
    ],
  },
  methods: {
    tap(e) {
      const data = e.target.dataset;
      my.switchTab({
        url: data.value.pagePath,
      });
    },
  },
})

pages/index/index.js

说明：页面切换时，开发者需要手动更新相应的自定义 tabBar 的状态。例如切换自定义 tabBar 时，改变选中态和高亮颜色：

Page({
  onShow() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0,
      });
    }
  },
})

详情可以参考支付宝小程序官方文档

但是在vue3中的<script setup>中无法直接使用this.getTabBar，需要用getCurrentPages()[0]获取当前页面实例

const curPages = getCurrentPages()[0]
if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
      curPages.getTabBar().setData({
      selected: 0   // selected根据tabbar数组里面的索引值来写的
    });
  }

问题7 支付宝小程序发布成功之后，在支付宝App当中搜索不到支付宝小程序

有可能是以下原因

1.没有开启搜索可见功能

需要在小程序控制台当中的基础信息中开启 搜索可见设置

2.开启搜索可见功能后存在一定的延迟，等一段时间再试试

问题8 uview的消息提示u-toast被u-popup遮挡住

解决办法是把u-toast写在u-popup标签里面

<up-popup :show="show" @close="close" @open="open">
    <view style="height: 300px;">
            <text @click="openTitle">内容</text>
    </view>
    <up-toast ref="uToastRef"></up-toast>
</up-popup>

问题9 按钮被一个元素遮挡，无法点击按钮

随便举个例子

点击按钮没有反应

解决方案 给外层元素添加pointer-events: nonecss样式。

.test{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.3);
    
    // 添加该样式
    pointer-events: none;
}

默认值auto，元素对指针事件做出反应，比如 :hover 和 click。

pointer-events: none除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

其他属性值可以去看mdn上的说明developer.mozilla.org/zh-CN/docs/…

问题10 支付宝小程序开发工具不显示最新基础库版本

打开支付宝小程序的开发工具，把项目删掉，然后重新运行

问题11 支付宝小程序使用open-type="chooseAvatar"的button按钮点击没有反应

<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
    <image :src="avatarUrl" mode="aspectFit"></image>
</button>

隐私协议里面也加了，不知道为什么用不了

补充：后来向支付宝开发社区的小伙伴提问，找到了原因，这个需要在真机上面调试，开发工具暂时无法正常显示

然后我换了一种方法获取用户头像和昵称，使用my.getOpenUserInfo

my.getOpenUserInfo({
    success: (res) => {
           console.log(JSON.parse(res.response).response);
    }
})

问题12 获取小程序当前系统的状态栏高度和与胶囊按钮对齐

在小程序平台，如果原生导航栏被隐藏，仍然在右上角会有一个悬浮按钮，微信下也被称为胶囊按钮

在App.vue文件的onLaunch生命周期中获取设备信息

// 获取设备信息
uni.getSystemInfo().then(res => {
    // 获取状态栏高度
    uni.setStorageSync('statusBarHeight',res.statusBarHeight)
})

其它返回值可以参考uniapp官网 uniapp.dcloud.net.cn/api/system/…

// 获取菜单按钮的布局位置信息
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()

uniapp官方链接 uniapp.dcloud.net.cn/api/ui/menu…