【代码优化】SYSTEM：支付宝小程序兼容性：修复无法启动、tabbar与宫格组件无法点击、首页的自定义顶部导航栏与轮播图样式

mini.project.json

@@ -0,0 +1,10 @@
+{
+    "format": 2,
+    "compileOptions": {
+      "component2": true,
+      "enableNodeModuleBabelTransform": true,
+      "transpile": {},
+      "globalObjectMode": "enable"
+    }
+  }
+

pages/index/index.vue

@@ -9,7 +9,6 @@
 		</s-layout>
 	</view>
 </template>
-
 <script setup>
 	import {
 		computed

sheep/components/s-layout/s-layout.vue

@@ -5,6 +5,7 @@
   >
     <view class="page-main" :style="[bgMain]">
       <!-- 顶部导航栏-情况1：默认通用顶部导航栏 -->
+      <!--<view>{{navbar}}{{navbarMode}}</view>-->
       <su-navbar
         v-if="navbar === 'normal'"
         :title="title"
@@ -17,19 +18,25 @@
       />
 
       <!-- 顶部导航栏-情况2：装修组件导航栏-标准 -->
+      <!--#ifndef MP-ALIPAY-->
       <s-custom-navbar
         v-else-if="navbar === 'custom' && navbarMode === 'normal'"
         :data="navbarStyle"
         :showLeftButton="showLeftButton"
       />
+      <!--#endif-->
+
+      <!--#ifdef MP-ALIPAY-->
+      <!--  -->
+      <!--#endif-->
+
       <view class="page-body" :style="[bgBody]">
         <!-- 顶部导航栏-情况3：沉浸式头部 -->
         <su-inner-navbar v-if="navbar === 'inner'" :title="title" />
         <view
           v-if="navbar === 'inner'"
           :style="[{ paddingTop: sheep.$platform.navbar + 'px' }]"
         ></view>
-
         <!-- 顶部导航栏-情况4：装修组件导航栏-沉浸式 -->
         <s-custom-navbar v-if="navbar === 'custom' && navbarMode === 'inner'" :data="navbarStyle" :showLeftButton="showLeftButton" />
 
@@ -201,6 +208,8 @@
     if (!isEmpty(shareInfo.value)) {
       sheep.$platform.share.updateShareInfo(shareInfo.value);
     }
+
+    console.log("导航栏模式",navbarMode.value,props.navbar.value)
   });
 </script>
 

sheep/components/s-menu-grid/s-menu-grid.vue

@@ -1,33 +1,33 @@
 <!-- 装修基础组件：宫格导航 -->
 <template>
   <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">
-        <view class="img-box">
-          <view
-            class="tag-box"
-            v-if="item.badge.show"
-            :style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"
-          >
-            {{ item.badge.text }}
+    <view v-for="(item, index) in data.list"
+          :key="index"
+          @tap="sheep.$router.go(item.url)">
+      <uni-grid-item>
+        <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
+          <view class="img-box">
+            <view
+              class="tag-box"
+              v-if="item.badge.show"
+              :style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"
+            >
+              {{ item.badge.text }}
+            </view>
+            <image class="menu-image" :src="sheep.$url.cdn(item.iconUrl)"></image>
           </view>
-          <image class="menu-image" :src="sheep.$url.cdn(item.iconUrl)"></image>
-        </view>
 
-        <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
-          <view class="grid-text" :style="[{ color: item.titleColor }]">
-            {{ item.title }}
-          </view>
-          <view class="grid-tip" :style="[{ color: item.subtitleColor }]">
-            {{ item.subtitle }}
+          <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
+            <view class="grid-text" :style="[{ color: item.titleColor }]">
+              {{ item.title }}
+            </view>
+            <view class="grid-tip" :style="[{ color: item.subtitleColor }]">
+              {{ item.subtitle }}
+            </view>
           </view>
         </view>
-      </view>
-    </uni-grid-item>
+      </uni-grid-item>
+    </view>
   </uni-grid>
 </template>
 

sheep/components/s-tabbar/s-tabbar.vue

@@ -10,22 +10,21 @@
       :midTabBar="tabbar.mode === 2"
       :customStyle="tabbarStyle"
     >
-      <su-tabbar-item
-        v-for="(item, index) in tabbar.items"
-        :key="item.text"
-        :text="item.text"
-        :name="item.url"
-        :isCenter="getTabbarCenter(index)"
-        :centerImage="sheep.$url.cdn(item.iconUrl)"
-        @tap="sheep.$router.go(item.url)"
-      >
-        <template v-slot:active-icon>
-          <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.activeIconUrl)"></image>
-        </template>
-        <template v-slot:inactive-icon>
-          <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.iconUrl)"></image>
-        </template>
-      </su-tabbar-item>
+      <view v-for="(item, index) in tabbar.items" :key="item.text" @tap="sheep.$router.go(item.url)">
+        <su-tabbar-item
+          :text="item.text"
+          :name="item.url"
+          :isCenter="getTabbarCenter(index)"
+          :centerImage="sheep.$url.cdn(item.iconUrl)"
+        >
+          <template v-slot:active-icon>
+            <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.activeIconUrl)"></image>
+          </template>
+          <template v-slot:inactive-icon>
+            <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.iconUrl)"></image>
+          </template>
+        </su-tabbar-item>
+      </view>
     </su-tabbar>
   </view>
 </template>

sheep/platform/index.js

@@ -15,6 +15,7 @@ import { isWxBrowser } from '@/sheep/helper/utils';
 // #endif
 import wechat from './provider/wechat/index.js';
 import apple from './provider/apple';
+import alipay from './provider/alipay/index';
 import share from './share';
 import Pay from './pay';
 
@@ -53,6 +54,12 @@ platform = 'miniProgram';
 provider = 'wechat';
 // #endif
 
+// #ifdef MP-ALIPAY
+name = 'AlipayMiniProgram';
+platform = 'miniProgram';
+provider = 'alipay';
+// #endif
+
 if (isEmpty(name)) {
   uni.showToast({
     title: '暂不支持该平台',
@@ -64,14 +71,20 @@ if (isEmpty(name)) {
 const load = () => {
   if (provider === 'wechat') {
     wechat.load();
+  }else if (provider === 'alipay') {
+    alipay.load();
+  } else {
+    console.log('未知平台', provider);
   }
 };
 
 // 使用厂商独占sdk name = 'wechat' | 'alipay' | 'apple'
 const useProvider = (_provider = '') => {
+  console.error('useProvider', _provider, provider)
   if (_provider === '') _provider = provider;
   if (_provider === 'wechat') return wechat;
   if (_provider === 'apple') return apple;
+  if (_provider === 'alipay') return alipay;
 };
 
 // 支付服务转发

sheep/platform/provider/alipay/index.js

@@ -0,0 +1,7 @@
+
+// 这里 特指支付宝小程序，后面如果需要拓展什么阿里云小程序、淘宝小程序之类的，就自己新建
+import service from './miniProgram';
+
+const alipay = service;
+
+export default alipay;