支付宝小程序适配

2025-11-27 10:45:08 +08:00 · 2025-11-27 10:45:08 +08:00 · f6a8721238
parent 3184dcd4f1
commit f6a8721238
12 changed files with 60 additions and 30 deletions
--- a/manifest.json
+++ b/manifest.json
@ -185,7 +185,9 @@
    "requiredPrivateInfos": ["chooseAddress"]
  },
  "mp-alipay": {
-    "usingComponents": true
+    "usingComponents": true,
+    "styleIsolation": "shared",
+    "mergeVirtualHostAttributes": true
  },
  "mp-baidu": {
    "usingComponents": true
--- a/pages.json
+++ b/pages.json
@ -675,7 +675,15 @@
 		"navigationBarTitleText": "芋道商城",
 		"navigationBarBackgroundColor": "#FFFFFF",
 		"backgroundColor": "#FFFFFF",
-		"navigationStyle": "custom"
+		"navigationStyle": "custom",
+    "mp-alipay": {
+      "titleImage": "",
+      "gestureBack": "YES",
+      "allowsBounceVertical": "NO",
+      "transparentTitle": "always",
+      "navigationStyle": "custom",
+      "titlePenetrate": "YES"
+    }
 	},
 	"tabBar": {
 		"list": [{
--- a/pages/goods/components/detail/detail-navbar.vue
+++ b/pages/goods/components/detail/detail-navbar.vue
@ -3,7 +3,10 @@
  <su-fixed alway :bgStyles="{ background: '#fff' }" :val="0" noNav opacity :placeholder="false">
    <su-status-bar />
    <view
-      class="ui-bar ss-flex ss-col-center ss-row-between ss-p-x-20"
+      class="ui-bar ss-flex ss-col-center ss-row-between"
+      :class="[{
+           'ss-p-x-20': sheep.$platform.provider !== 'alipay'
+      }]"
      :style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
    >
      <!-- 左 -->
--- a/pages/goods/components/list/list-navbar.vue
+++ b/pages/goods/components/list/list-navbar.vue
@ -11,7 +11,10 @@
  >
    <su-status-bar />
    <view
-      class="ui-bar ss-flex ss-col-center ss-row-between ss-p-x-20"
+      class="ui-bar ss-flex ss-col-center ss-row-between"
+      :class="[{
+           'ss-p-x-20': sheep.$platform.provider !== 'alipay'
+      }]"
      :style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
    >
      <!-- 左 -->
--- a/sheep/components/s-auth-modal/s-auth-modal.vue
+++ b/sheep/components/s-auth-modal/s-auth-modal.vue
@ -46,18 +46,6 @@
          <view class="circle" />
        </view>

-        <!-- 7.3 支付宝小程序登录 -->
-        <button
-          v-if="sheep.$platform.name === 'alipayMiniProgram'"
-          @tap="thirdLogin('alipay')"
-          class="ss-reset-button auto-login-btn"
-        >
-          <image
-            class="auto-login-img"
-            :src="sheep.$url.static('/static/img/shop/platform/alipay.png')"
-          />
-        </button>
-
        <!-- 7.2 微信的公众号、App、小程序的登录，基于 openid + code -->
        <button
          v-if="
@ -84,6 +72,18 @@
            :src="sheep.$url.static('/static/img/shop/platform/apple.png')"
          />
        </button>
+
+        <!-- 7.4 支付宝小程序登录 -->
+        <button
+          v-if="sheep.$platform.name === 'alipayMiniProgram'"
+          @tap="thirdLogin('alipay')"
+          class="ss-reset-button auto-login-btn"
+        >
+          <image
+            class="auto-login-img"
+            :src="sheep.$url.static('/static/img/shop/pay/alipay.png')"
+          />
+        </button>
      </view>

      <!-- 用户协议的勾选 -->
@ -97,7 +97,7 @@
        <view class="agreement-options-container">
          <!-- 同意选项 -->
          <view class="agreement-option ss-m-b-20">
-            <label class="radio ss-flex ss-col-center" @tap="onAgree">
+            <view class="radio ss-flex ss-col-center" @tap="onAgree">
              <radio
                :checked="state.protocol === true"
                color="var(--ui-BG-Main)"
@ -110,12 +110,12 @@
                <view class="agreement-text">与</view>
                <view class="tcp-text" @tap.stop="onProtocol('隐私协议')"> 《隐私协议》 </view>
              </view>
-            </label>
+            </view>
          </view>
          
          <!-- 拒绝选项 -->
          <view class="agreement-option">
-            <label class="radio ss-flex ss-col-center" @tap="onRefuse">
+            <view class="radio ss-flex ss-col-center" @tap="onRefuse">
              <radio
                :checked="state.protocol === false"
                color="#ff4d4f"
@ -128,7 +128,7 @@
                <view class="agreement-text">与</view>
                <view class="tcp-text" @tap.stop="onProtocol('隐私协议')"> 《隐私协议》 </view>
              </view>
-            </label>
+            </view>
          </view>
        </view>
      </view>
@ -197,7 +197,7 @@
      } else {
        sheep.$helper.toast('请选择是否同意协议');
      }
-      // return;
+      return;
    }
    const loginRes = await sheep.$platform.useProvider(provider).login();
    if (loginRes) {
--- a/sheep/components/s-layout/s-layout.vue
+++ b/sheep/components/s-layout/s-layout.vue
@ -17,13 +17,11 @@
      />

      <!-- 顶部导航栏-情况2：装修组件导航栏-标准 -->
-      <!--#ifndef MP-ALIPAY-->
      <s-custom-navbar
        v-else-if="navbar === 'custom' && navbarMode === 'normal'"
        :data="navbarStyle"
        :showLeftButton="showLeftButton"
      />
-      <!--#endif-->
      <view class="page-body" :style="[bgBody]">
        <!-- 顶部导航栏-情况3：沉浸式头部 -->
        <su-inner-navbar v-if="navbar === 'inner'" :title="title" />
@ -216,6 +214,11 @@

  // 组件中使用 onMounted 监听页面加载，不是页面组件不使用 onShow
  onMounted(()=>{
+    // #ifdef MP-ALIPAY
+    uni.setNavigationBarTitle({
+      title: "",
+    });
+    // #endif
    if (!isEmpty(shareInfo.value)) {
      sheep.$platform.share.updateShareInfo(shareInfo.value);
    }
--- a/sheep/components/s-menu-grid/s-menu-grid.vue
+++ b/sheep/components/s-menu-grid/s-menu-grid.vue
@ -2,8 +2,8 @@
 <template>
 	<view :style="[bgStyle, { marginLeft: `${data.space}px` }]">
 		<uni-grid :showBorder="Boolean(data.border)" :column="data.column">
-			<uni-grid-item v-for="(item, index) in data.list" :key="index" @tap="sheep.$router.go(item.url)">
-				<view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
+			<uni-grid-item v-for="(item, index) in data.list" :key="index" >
+				<view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center" @tap="sheep.$router.go(item.url)">
 					<view class="img-box">
 						<view class="tag-box" v-if="item.badge.show"
 							:style="[{ background: item.badge.bgColor, color: item.badge.textColor }]">
--- a/sheep/components/s-tabbar/s-tabbar.vue
+++ b/sheep/components/s-tabbar/s-tabbar.vue
@ -20,7 +20,7 @@
        :badgeStyle="tabbar.badgeStyle"
        :isCenter="getTabbarCenter(index)"
        :centerImage="sheep.$url.cdn(item.iconUrl)"
-        @tap="sheep.$router.go(item.url)"
+        @click="sheep.$router.go(item.url)"
      >
        <template v-slot:active-icon>
          <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.activeIconUrl)"></image>
--- a/sheep/platform/index.js
+++ b/sheep/platform/index.js
@ -58,6 +58,13 @@ provider = 'wechat';
 name = 'alipayMiniProgram';
 platform = 'alipayMiniProgram';
 provider = 'alipay';
+if (!device.safeAreaInsets) {
+  device.safeAreaInsets = uni.getSystemInfoSync().safeAreaInsets
+}
+// 兜底一下。还是没有值时候，就给个默认值
+if (!device.safeAreaInsets) {
+  device.safeAreaInsets = {}
+}
 // #endif

 if (isEmpty(name)) {
--- a/sheep/ui/su-fixed/su-fixed.vue
+++ b/sheep/ui/su-fixed/su-fixed.vue
@ -3,7 +3,7 @@
    <view
      class="ui-fixed-box"
      :id="`fixed-${uuid}`"
-      :class="['fixed']"
+      :class="[{ fixed: state.fixed }]"
      :style="[
        {
          left: sticky ? 'auto' : '0px',
--- a/sheep/ui/su-inner-navbar/su-inner-navbar.vue
+++ b/sheep/ui/su-inner-navbar/su-inner-navbar.vue
@ -17,8 +17,12 @@
     -->
    <view class="ui-navbar-box">
      <view
-        class="ui-bar ss-p-x-20"
-        :class="state.isDark ? 'text-white' : 'text-black'"
+        class="ui-bar"
+        :class="[{
+           'text-white': state.isDark,
+           'text-black': !state.isDark,
+           'ss-p-x-20': sheep.$platform.provider !== 'alipay'
+        }]"
        :style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
      >
        <view class="icon-box ss-flex">
--- a/sheep/ui/su-tabbar-item/su-tabbar-item.vue
+++ b/sheep/ui/su-tabbar-item/su-tabbar-item.vue
@ -1,6 +1,6 @@
 <!-- 自定义底部导航项 -->
 <template>
-  <view class="u-tabbar-item" :style="[addStyle(customStyle)]">
+  <view class="u-tabbar-item" :style="[addStyle(customStyle)]" @click="clickHandler">
    <view v-if="isCenter" class="tabbar-center-item">
      <image class="center-image" :src="centerImage" mode="aspectFill"></image>
    </view>