perf(uniapp): 小程序主包瘦身，迁移分包静态资源、清理冗余组件与全局样式

App.vue

@@ -203,4 +203,126 @@ body {
 .flex1 {
 	flex: 1; //必须父级设置flex
 }
+
+.light-color {
+	color: $light-color;
+}
+.main-color {
+	color: $main-color !important;
+}
+.bg-light-color {
+	background-color: $light-color !important;
+}
+.bg-main-color {
+	background-color: $main-color !important;
+}
+
+// 渐变主题颜色
+.bg-linear-gradient {
+	background-image: linear-gradient(25deg, var(--theme-primary, #fa123b), var(--theme-light, #ff6b35), var(--theme-aider, #ff9f28), #ffcc03);
+}
+.uni-tabbar .uni-tabbar__icon {
+	width: 20px;
+	height: 18px;
+}
+
+.flex {
+	display: flex;
+}
+
+.btn {
+	background-color: $light-color;
+	color: #ffffff;
+	border-width: 0px;
+	border: none;
+	border-radius: 44px;
+	height: 44px;
+	box-shadow: none;
+	font-weight: 400;
+	font-style: normal;
+	line-height: 44px;
+	text-align: center;
+	&::after {
+		border: none;
+	}
+}
+.button-hover {
+	opacity: 0.7;
+}
+
+.margin {
+	margin: 10px;
+}
+
+.tag {
+	background-color: rgba(242, 242, 242, 1);
+	color: #333333;
+	height: 28px;
+	border-radius: 28px;
+	box-shadow: none;
+	font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+	font-weight: 400;
+	font-style: normal;
+	line-height: 28px;
+	text-align: center;
+	width: 90px;
+}
+
+.c-content {
+	background-color: #ffffff;
+	// margin-top: 30rpx;
+	border-top: 1px solid $border-color-light;
+	border-bottom: 1px solid $border-color-light;
+}
+.mt-30 {
+	margin-top: 30rpx;
+}
+.border-top {
+	border-top: 1px solid $border-color-light;
+}
+.describe {
+	color: $font-color-light;
+	font-size: $font-sm;
+	padding: 30rpx;
+}
+.flex-center {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+}
+
+.flex-a-c{
+	align-items: center;
+}
+.flex-j-sb{
+	justify-content: space-between;
+}
+.relative {
+	position: relative;
+}
+
+.wes {
+	/* 多出部分用省略号表示 , 用于一行 */
+	overflow: hidden;
+	word-wrap: normal;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.wes-2 {
+	/* 适用于webkit内核和移动端 */
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+}
+
+.wes-3 {
+	/* 适用于webkit内核和移动端 */
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3;
+	overflow: hidden;
+}
 </style>

components/m-canvas/README.md

@@ -1 +0,0 @@
-### 说明 https://ext.dcloud.net.cn/plugin?id=3237

components/m-canvas/index.vue

@@ -1,200 +0,0 @@
-<template>
-
-  <div class="index">
-    <u-modal v-model:show="show" :show-title="false" :show-confirm-button="false" mask-close-able>
-      <view class="slot-content">
-        <image @click="downLoad()" class="img" :src="imgUrl" />
-        <div class="canvas-hide">
-          <!-- #ifdef MP-WEIXIN -->
-          <canvas id="canvas" type="2d" style="width: 600px; height: 960px" />
-          <!-- #endif -->
-          <!-- #ifndef MP-WEIXIN -->
-          <canvas canvas-id="canvas" id="canvas" style="width: 600px; height: 960px" />
-          <!-- #endif -->
-        </div>
-      </view>
-    </u-modal>
-
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, onMounted, getCurrentInstance } from 'vue'
-// 引入绘制插件
-import DrawPoster from "@/js_sdk/u-draw-poster"
-import logoImg from "@/pages/passport/static/logo-title.png"
-
-const instance = getCurrentInstance()
-
-const props = defineProps<{
-	res?: any
-}>()
-
-const imgUrl = ref("")
-const show = ref(false)
-const dp = ref<any>({})
-const logo = logoImg
-
-/**
- * 解决微信小程序中图片模糊问题
- */
-// #ifdef MP-WEIXIN
-const st2 = (size: number) => size * 2
-// #endif
-
-// #ifndef MP-WEIXIN
-const st2 = (size: number) => size
-// #endif
-
-/**
- * 保存图片
- */
-const downLoad = () => {
-  uni.saveImageToPhotosAlbum({
-    filePath: imgUrl.value,
-    success: function () {
-      uni.showToast({
-        title: "保存成功！",
-        icon: "none",
-      })
-    },
-    fail: function () {
-      uni.showToast({
-        title: "保存失败，请稍后重试！",
-        icon: "none",
-      })
-    },
-  })
-}
-
-/**
- * 创建canvas
- */
-const init = async () => {
-  show.value = true
-  dp.value = await DrawPoster.build({
-    selector: "canvas",
-    componentThis: instance?.proxy,
-    loading: true,
-    debugging: true,
-  })
-  let dpVal = dp.value
-  // #ifdef MP-WEIXIN
-  // 用于微信小程序中画布错乱问题
-  dpVal.canvas.width = st2(600)
-  dpVal.canvas.height = st2(960)
-  // #endif
-  await draw(dpVal)
-}
-
-const draw = async (dp: any) => {
-  const { width, height, background, title } = props.res.container
-  const { code, img, price } = props.res.bottom
-
-  // /** 绘制背景 */
-  await dp.draw((ctx: any) => {
-    ctx.fillStyle = background
-    ctx.fillRoundRect(
-      st2(0),
-      st2(0),
-      st2(width),
-      st2(height),
-      st2(12)
-    )
-    ctx.clip()
-  })
-  /** 绘制图片 */
-  dp.draw(async (ctx: any) => {
-    await Promise.all([
-      // 绘制Logo
-      ctx.drawImage(
-        logo,
-        st2(175),
-        st2(0),
-        st2(256),
-        st2(144)
-      ),
-      // 中间图片
-      ctx.drawImage(
-        img,
-        st2(100),
-        st2(150),
-        st2(400),
-        st2(400)
-      ),
-      // 二维码
-      ctx.drawImage(
-        code,
-        st2(39),
-        st2(750),
-        st2(150),
-        st2(150)
-      ),
-    ])
-  })
-
-  /** 绘制中间文字*/
-  await dp.draw((ctx: any) => {
-    ctx.fillStyle = "#333"
-    ctx.font = `bold ${st2(24)}px PingFang SC`
-    ctx.textAlign = "center"
-    ctx.fillWarpText({
-      text: title,
-      maxWidth: st2(500),
-      x: st2(300),
-      y: st2(600),
-      layer: 1,
-    })
-
-    ctx.fillStyle = "#ff3c2a"
-    ctx.font = `${st2(38)}px PingFang SC`
-    ctx.textAlign = "center"
-    ctx.fillText(price, st2(300), st2(680))
-  })
-
-  // /** 绘制底部文字 */
-  await dp.draw((ctx: any) => {
-    ctx.fillStyle = "#666"
-    ctx.font = `${st2(24)}px PingFang SC`
-    ctx.fillText("长按图片，识别二维码", st2(200), st2(866))
-    ctx.fillStyle = "#666"
-    ctx.font = `${st2(24)}px PingFang SC`
-    ctx.fillText("查看商品详情", st2(200), st2(900))
-  })
-
-  imgUrl.value = await dp.createImagePath()
-}
-
-onMounted(() => {
-  init()
-})
-</script>
-
-<style lang="scss" scoped>
-page,
-.index {
-  height: 100%;
-}
-.canvas-hide {
-  /* 1 */
-  position: fixed;
-  right: 100vw;
-  bottom: 100vh;
-  /* 2 */
-  z-index: -9999;
-  /* 3 */
-  opacity: 0;
-}
-.index {
-  position: relative;
-  text-align: center;
-  background: rgba($color: grey, $alpha: 0.2);
-}
-
-image {
-  display: block;
-}
-.img {
-  width: 600rpx;
-  height: 960rpx;
-}
-</style>

components/m-placard/index.vue

@@ -1,199 +0,0 @@
-<template>
-	<view class="index">
-		<view v-model="show" class="slot-content">
-			<image @click="downLoad()" class="img" :src="imgUrl" />
-			<div class="canvas-hide">
-				<!-- #ifdef MP-WEIXIN -->
-				<canvas id="canvas" type="2d" style="width: 560px; height: 800px" />
-				<!-- #endif -->
-				<!-- #ifndef MP-WEIXIN -->
-				<canvas canvas-id="canvas" id="canvas" style="width: 560px; height: 800px" />
-				<!-- #endif -->
-			</div>
-		</view>
-	</view>
-</template>
-<script setup lang="ts">
-import { ref, onMounted, getCurrentInstance } from 'vue'
-// 引入绘制插件
-import DrawPoster from "@/js_sdk/u-draw-poster"
-// 生成二维码
-import uQRCode from '@/components/Sansnn-uQRCode/uqrcode.js'
-import logoImg from "@/pages/passport/static/logo-title.png"
-import myFaceImg from "@/pages/passport/static/missing-face.png"
-
-const instance = getCurrentInstance()
-
-const props = defineProps<{
-	res?: any
-}>()
-
-const imgUrl = ref("")
-const show = ref(false)
-const dp = ref<any>({})
-const logo = logoImg
-const myFace = myFaceImg
-const sharingLink = ref('')
-
-/** 解决微信小程序中图片模糊问题 */
-// #ifdef MP-WEIXIN
-const st2 = (size: number) => size * 2
-// #endif
-
-// #ifndef MP-WEIXIN
-const st2 = (size: number) => size
-// #endif
-
-/** 保存图片 */
-const downLoad = () => {
-	uni.saveImageToPhotosAlbum({
-		filePath: imgUrl.value,
-		success: function () {
-			uni.showToast({title: "保存成功！",icon: "none"})
-		},
-		fail: function () {
-			uni.showToast({title: "保存失败，请稍后重试！",icon: "none"})
-		},
-	})
-}
-
-/** 创建canvas */
-const init = async () => {
-	show.value = true
-	dp.value = await DrawPoster.build({
-		selector: "canvas",
-		componentThis: instance?.proxy,
-		loading: true,
-		debugging: true,
-	})
-	let dpVal = dp.value
-	// #ifdef MP-WEIXIN
-	// 用于微信小程序中画布错乱问题
-	dpVal.canvas.width = st2(560)
-	dpVal.canvas.height = st2(800)
-	// #endif
-	await showQRCode(dpVal)
-}
-
-/** 生成二维码 */
-const showQRCode = async (dp: any) => {
-	await uQRCode.make({
-		canvasId: 'canvas',
-		componentInstance: instance?.proxy,
-		text: props.res.bottom.code,
-		size: 130,
-		margin: 5,
-		backgroundColor: '#ffffff',
-		foregroundColor: '#000000',
-		fileType: 'jpg',
-		errorCorrectLevel: 0,
-		success: (res: any) => {
-			sharingLink.value = res
-			draw(dp)
-		},
-		fail: (_res: any) => {
-			// console.log('失败',res)
-		}
-	})
-}
-
-const draw = async (dp: any) => {
-	const { face, nickName, desc } = props.res.memberInfo
-	const { width, height, background, title } = props.res.container
-	const { img, price } = props.res.bottom
-
-	/** 绘制背景 */
-	await dp.draw((ctx: any) => {
-		ctx.fillStyle = background
-		ctx.fillRoundRect(st2(0), st2(0), st2(width), st2(height), st2(12))
-		ctx.clip()
-	})
-	/** 绘制圆角矩形 */
-	await dp.draw(async (ctx: any) => {
-		ctx.fillStyle = "#ffffff"
-		ctx.strokeStyle = "#ffffff"
-		ctx.lineWidth = st2(1)
-		ctx.fillRoundRect(30, 150, 500, 620, 0)
-	})
-	/** 绘制图片 */
-	dp.draw(async (ctx: any) => {
-		await Promise.all([
-			ctx.drawImage(face ? face : myFace, st2(30), st2(30), st2(90), st2(90)),
-			ctx.drawImage(img, st2(60), st2(170), st2(440), st2(440)),
-			ctx.drawImage(sharingLink.value, st2(375), st2(625), st2(130), st2(130))
-		])
-	})
-	/** 绘制顶部文字（昵称 简述） */
-	await dp.draw((ctx: any) => {
-		ctx.fillStyle = "#666"
-		ctx.font = `${st2(24)}px PingFang SC`
-		ctx.fillText(nickName, st2(150), st2(65))
-		ctx.fillStyle = "#666"
-		ctx.font = `${st2(24)}px PingFang SC`
-		ctx.fillText(desc, st2(150), st2(105))
-	})
-	/** 绘制中间文字（商品名称 价格） */
-	await dp.draw((ctx: any) => {
-		ctx.fillStyle = "#333"
-		ctx.font = `bold ${st2(24)}px PingFang SC`
-		ctx.textAlign = "left"
-		ctx.fillWarpText({
-			text: title,
-			lineHeight: st2(32),
-			maxWidth: st2(280),
-			x: st2(60),
-			y: st2(710),
-			layer: 2,
-		})
-		ctx.fillStyle = "#ff3c2a"
-		ctx.font = `${st2(38)}px PingFang SC`
-		ctx.textAlign = "left"
-		ctx.fillText(price, st2(60), st2(665))
-	})
-
-	// 绘制生成本地地址
-	imgUrl.value = await dp.createImagePath()
-}
-
-onMounted(() => {
-	init()
-})
-</script>
-
-<style lang="scss" scoped>
-page,
-.index {
-  height: 100%;
-}
-.canvas-hide {
-  /* 1 */
-  position: fixed;
-  right: 100vw;
-  bottom: 100vh;
-  /* 2 */
-  z-index: -9999;
-  /* 3 */
-  opacity: 0;
-}
-.index {
-  position: relative;
-  text-align: center;
-  background: rgba($color: grey, $alpha: 0.2);
-}
-
-image {
-  display: block;
-}
-.img {
-  width: 560rpx;
-  height: 800rpx;
-}
-
-.qrcode-content {
-	width: 100rpx;
-	height: 100rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-</style>

components/popups/popups.vue

@@ -1,331 +0,0 @@
-<template>
-  <view class="shadow" :class="!show?'':'shadow-show'" :style="{backgroundColor:show?maskBg:'rgba(0,0,0,0)'}" @tap="tapMask">
-    <view class="popups" :class="[theme]" :style="{top: popupsTop ,left: popupsLeft,flexDirection:direction}">
-      <text :class="dynPlace" :style="{width:'0px',height:'0px'}" v-if="triangle"></text>
-      <view v-for="(item,index) in popData" :key="index" @tap.stop="tapItem(item)" class="itemChild view" :class="[direction=='row'?'solid-right':'solid-bottom',item.disabled?'disabledColor':'']">
-        <view class="popup-icon" v-if="item.icon">
-          <u-icon size="35rpx" :name="item.icon"></u-icon>
-        </view>
-        <span class="title">{{item.title}}</span>
-      </view>
-      <slot></slot>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, onMounted, getCurrentInstance } from 'vue'
-
-const props = withDefaults(defineProps<{
-  maskBg?: string
-  placement?: string
-  direction?: string
-  x?: number
-  y?: number
-  modelValue?: boolean
-  popData?: any[]
-  theme?: string
-  dynamic?: boolean
-  gap?: number
-  triangle?: boolean
-}>(), {
-  maskBg: "rgba(0,0,0,0)",
-  placement: "default",
-  direction: "column",
-  x: 0,
-  y: 0,
-  modelValue: false,
-  popData: () => [],
-  theme: "light",
-  dynamic: false,
-  gap: 20,
-  triangle: true,
-})
-
-const emit = defineEmits(['update:modelValue', 'tapPopup'])
-
-const instance = getCurrentInstance()
-
-const popupsTop = ref("0rpx")
-const popupsLeft = ref("0rpx")
-const show = ref(false)
-const dynPlace = ref("")
-
-onMounted(() => {
-  popupsPosition()
-})
-
-const tapMask = () => {
-  emit("update:modelValue", !props.modelValue)
-}
-
-const tapItem = (item: any) => {
-  if (item.disabled) return
-  emit("tapPopup", item)
-  emit("update:modelValue", !props.modelValue)
-}
-
-const getStatusBar = () => {
-  const windowInfo = uni.getWindowInfo()
-  // #ifdef H5
-  return Promise.resolve(
-    (windowInfo.statusBarHeight || 0) + (windowInfo.windowTop || 0)
-  )
-  // #endif
-  // #ifndef H5
-  return Promise.resolve(windowInfo.statusBarHeight || 0)
-  // #endif
-}
-
-const popupsPosition = async () => {
-  let statusBar = await getStatusBar()
-  await new Promise<void>((resolve) => {
-    let popupsDom = uni.createSelectorQuery().in(instance!.proxy).select(".popups")
-    popupsDom
-      .fields(
-        {
-          size: true,
-        },
-        (data: any) => {
-          if (!data) {
-            resolve()
-            return
-          }
-          let width = data.width
-          let height = data.height
-
-          let y = props.dynamic
-            ? dynamicGetY(props.y, props.gap)
-            : transformRpx(props.y)
-
-          let x = props.dynamic
-            ? dynamicGetX(props.x, props.gap)
-            : transformRpx(props.x)
-
-          // #ifdef H5
-          y = props.dynamic
-            ? props.y + statusBar
-            : transformRpx(props.y + statusBar)
-          // #endif
-
-          dynPlace.value =
-            props.placement == "default"
-              ? getPlacement(x, y)
-              : props.placement
-
-          switch (dynPlace.value) {
-            case "top-start":
-              popupsTop.value = `${y + 9}rpx`
-              popupsLeft.value = `${x - 15}rpx`
-              break
-            case "top-end":
-              popupsTop.value = `${y + 9}rpx`
-              popupsLeft.value = `${x + 15 - width}rpx`
-              break
-            case "bottom-start":
-              popupsTop.value = `${y - 18 - height}rpx`
-              popupsLeft.value = `${x - 15}rpx`
-              break
-            case "bottom-end":
-              popupsTop.value = `${y - 9 - height}rpx`
-              popupsLeft.value = `${x + 15 - width}rpx`
-              break
-          }
-          resolve()
-        }
-      )
-      .exec()
-  })
-}
-
-const getPlacement = (x: number, y: number) => {
-  const { windowWidth: width, windowHeight: height } = uni.getWindowInfo()
-  if (x > width / 2 && y > height / 2) {
-    return "bottom-end"
-  } else if (x < width / 2 && y < height / 2) {
-    return "top-start"
-  } else if (x > width / 2 && y < height / 2) {
-    return "top-end"
-  } else if (x < width / 2 && y > height / 2) {
-    return "bottom-start"
-  } else if (x > width / 2) {
-    return "top-end"
-  } else {
-    return "top-start"
-  }
-}
-
-const dynamicGetY = (y: number, gap: number) => {
-  const { windowHeight: height } = uni.getWindowInfo()
-  y = y < gap ? gap : y
-  y = height - y < gap ? height - gap : y
-  return y
-}
-
-const dynamicGetX = (x: number, gap: number) => {
-  const { windowWidth: width } = uni.getWindowInfo()
-  x = x < gap ? gap : x
-  x = width - x < gap ? width - gap : x
-  return x
-}
-
-const transformRpx = (params: number) => {
-  const { screenWidth } = uni.getWindowInfo()
-  return (params * screenWidth) / 375
-}
-
-watch(() => props.modelValue, async (newVal) => {
-  if (newVal) await popupsPosition()
-  show.value = newVal
-}, { immediate: true })
-
-watch(() => props.placement, (newVal) => {
-  dynPlace.value = newVal
-}, { immediate: true })
-</script>
-
-<style lang="scss" scoped>
-.title {
-  margin-left: 16rpx;
-}
-.shadow {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: 100%;
-  z-index: 9999;
-  transition: background 0.3s ease-in-out;
-  visibility: hidden;
-
-  &.shadow-show {
-    visibility: visible;
-  }
-}
-
-.popups {
-  position: absolute;
-  padding: 20rpx;
-  border-radius: 5px;
-  display: flex;
-  .view {
-    display: flex;
-    align-items: center;
-    padding: 15rpx 10rpx;
-    font-size: 25rpx;
-  }
-  .popup-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: 40rpx;
-    height: 40rpx;
-    line-height: 40rpx;
-  }
-  .image {
-    display: inline-block;
-    vertical-align: middle;
-    width: 40rpx;
-    height: 40rpx;
-    margin-right: 20rpx;
-  }
-}
-.dark {
-  background-color: #4c4c4c;
-  color: #fff;
-  .top-start:after {
-    content: "";
-    position: absolute;
-    top: -18rpx;
-    left: 10rpx;
-    border-width: 0 20rpx 20rpx;
-    border-style: solid;
-    border-color: transparent transparent #4c4c4c;
-  }
-  .top-end:after {
-    content: "";
-    position: absolute;
-    top: -18rpx;
-    right: 10rpx;
-    border-width: 0 20rpx 20rpx;
-    border-style: solid;
-    border-color: transparent transparent #4c4c4c;
-  }
-  .bottom-start:after {
-    content: "";
-    position: absolute;
-    bottom: -18rpx;
-    left: 10rpx;
-    border-width: 20rpx 20rpx 0;
-    border-style: solid;
-    border-color: #4c4c4c transparent transparent;
-  }
-  .bottom-end:after {
-    content: "";
-    position: absolute;
-    bottom: -18rpx;
-    right: 10rpx;
-    border-width: 20rpx 20rpx 0;
-    border-style: solid;
-    border-color: #4c4c4c transparent transparent;
-  }
-  .disabledColor {
-    color: #c5c8ce;
-  }
-}
-.light {
-  color: #515a6e;
-  box-shadow: 0upx 0upx 30upx rgba(0, 0, 0, 0.2);
-  background: #fff;
-  .top-start:after {
-    content: "";
-    position: absolute;
-    top: -18rpx;
-    left: 10rpx;
-    border-width: 0 20rpx 20rpx;
-    border-style: solid;
-    border-color: transparent transparent #fff;
-  }
-  .top-end:after {
-    content: "";
-    position: absolute;
-    top: -18rpx;
-    right: 10rpx;
-    border-width: 0 20rpx 20rpx;
-    border-style: solid;
-    border-color: transparent transparent #fff;
-  }
-  .bottom-start:after {
-    content: "";
-    position: absolute;
-    bottom: -18rpx;
-    left: 10rpx;
-    border-width: 20rpx 20rpx 0;
-    border-style: solid;
-    border-color: #fff transparent transparent;
-  }
-  .bottom-end:after {
-    content: "";
-    position: absolute;
-    bottom: -18rpx;
-    right: 10rpx;
-    border-width: 20rpx 20rpx 0;
-    border-style: solid;
-    border-color: #fff transparent transparent;
-  }
-  .disabledColor {
-    color: #c5c8ce;
-  }
-}
-.solid-bottom {
-  border-bottom: 1px solid #f3f5f7;
-}
-.solid-right {
-  border-right: 1px solid #ccc;
-}
-.popups .itemChild:last-child {
-  border: none;
-}
-</style>

main.js

@@ -1,84 +1,86 @@
-import { createSSRApp, computed } from 'vue'
-import App from './App'
-import uviewPlus, { setConfig } from 'uview-plus'
-import store from './store'
-import config from '@/config/config'
-import airBtn from '@/components/m-airbtn/index.vue'
-import mpShare from '@/utils/mpShare.js'
-import * as filterUtils from './utils/filters.js'
-import { getThemeStyle } from '@/utils/theme'
-
-export function createApp() {
-  const app = createSSRApp(App)
-
-  // uview-plus 内部会触发 Vue3 开发态告警（枚举组件实例 keys），不影响运行
-  app.config.warnHandler = (msg, _instance, trace) => {
-    if (
-      typeof msg === 'string' &&
-      msg.includes('enumerating keys on a component instance')
-    ) {
-      return
-    }
-    try {
-      console.warn(`[Vue warn]: ${msg}${trace || ''}`)
-    } catch (e) {
-      // #ifdef MP-WEIXIN
-      // 微信开发者工具部分版本在输出 Vue warn 时会触发
-      // TypeError: Cannot read property '__global' of null
-      // #endif
-    }
-  }
-
-  app.use(store)
-  app.use(uviewPlus)
-
-  // uview-plus 的图标字体默认每个 u-icon 实例都会触发 uni.loadFontFace，
-  // 导致进入页面时同一字体被反复请求。开启 loadFontOnce 后全局只加载一次。
-  setConfig({
-    config: {
-      loadFontOnce: true,
-    },
-    props: {
-      form: {
-        labelWidth: '180rpx',
-        labelPosition: 'left',
-      },
-    },
-  })
-
-  app.config.globalProperties.$store = store
-  app.config.globalProperties.$mainColor = computed(() => store.getters.mainColor)
-  app.config.globalProperties.$lightColor = computed(() => store.getters.lightColor)
-  app.config.globalProperties.$aiderLightColor = computed(
-    () => store.getters.aiderLightColor
-  )
-
-  const filterMethods = {}
-  Object.keys(filterUtils).forEach((key) => {
-    if (typeof filterUtils[key] === 'function') {
-      filterMethods[key] = filterUtils[key]
-    }
-  })
-
-  app.mixin({
-    methods: filterMethods,
-    computed: {
-      themeStyle() {
-        return getThemeStyle(this.$store.state.theme)
-      },
-    },
-  })
-  app.mixin(mpShare)
-
-  // #ifdef H5
-  if (config.enableMiniBarStartUpApp) {
-    const mountPoint = document.createElement('div')
-    document.body.appendChild(mountPoint)
-    createSSRApp(airBtn).mount(mountPoint)
-  }
-  // #endif
-
-  return {
-    app
-  }
-}
+import { createSSRApp, computed } from 'vue'
+import App from './App'
+import uviewPlus, { setConfig } from 'uview-plus'
+import store from './store'
+import config from '@/config/config'
+// #ifdef H5
+import airBtn from '@/components/m-airbtn/index.vue'
+// #endif
+import mpShare from '@/utils/mpShare.js'
+import * as filterUtils from './utils/filters.js'
+import { getThemeStyle } from '@/utils/theme'
+
+export function createApp() {
+  const app = createSSRApp(App)
+
+  // uview-plus 内部会触发 Vue3 开发态告警（枚举组件实例 keys），不影响运行
+  app.config.warnHandler = (msg, _instance, trace) => {
+    if (
+      typeof msg === 'string' &&
+      msg.includes('enumerating keys on a component instance')
+    ) {
+      return
+    }
+    try {
+      console.warn(`[Vue warn]: ${msg}${trace || ''}`)
+    } catch (e) {
+      // #ifdef MP-WEIXIN
+      // 微信开发者工具部分版本在输出 Vue warn 时会触发
+      // TypeError: Cannot read property '__global' of null
+      // #endif
+    }
+  }
+
+  app.use(store)
+  app.use(uviewPlus)
+
+  // uview-plus 的图标字体默认每个 u-icon 实例都会触发 uni.loadFontFace，
+  // 导致进入页面时同一字体被反复请求。开启 loadFontOnce 后全局只加载一次。
+  setConfig({
+    config: {
+      loadFontOnce: true,
+    },
+    props: {
+      form: {
+        labelWidth: '180rpx',
+        labelPosition: 'left',
+      },
+    },
+  })
+
+  app.config.globalProperties.$store = store
+  app.config.globalProperties.$mainColor = computed(() => store.getters.mainColor)
+  app.config.globalProperties.$lightColor = computed(() => store.getters.lightColor)
+  app.config.globalProperties.$aiderLightColor = computed(
+    () => store.getters.aiderLightColor
+  )
+
+  const filterMethods = {}
+  Object.keys(filterUtils).forEach((key) => {
+    if (typeof filterUtils[key] === 'function') {
+      filterMethods[key] = filterUtils[key]
+    }
+  })
+
+  app.mixin({
+    methods: filterMethods,
+    computed: {
+      themeStyle() {
+        return getThemeStyle(this.$store.state.theme)
+      },
+    },
+  })
+  app.mixin(mpShare)
+
+  // #ifdef H5
+  if (config.enableMiniBarStartUpApp) {
+    const mountPoint = document.createElement('div')
+    document.body.appendChild(mountPoint)
+    createSSRApp(airBtn).mount(mountPoint)
+  }
+  // #endif
+
+  return {
+    app
+  }
+}

manifest.json

@@ -192,6 +192,7 @@
     "mp-weixin" : {
         /* 小程序特有相关 */
         "usingComponents" : true,
+        "lazyCodeLoading" : "requiredComponents",
         "appid" : "wx6f10f29075dc1b0b",
         "optimization" : {
             "subPackages" : true

pages/mine/point/myPoint.vue

@@ -1,8 +1,8 @@
 <template>
   <view :style="themeStyle" class="content">
     <view class="portrait-box">
-      <image src="/static/pointTrade/point_bg_1.png" mode=""></image>
-      <image class="point-img" src="/static/pointTrade/tradehall.png" />
+      <image src="/pages/mine/static/point_bg_1.png" mode=""></image>
+      <image class="point-img" src="/pages/mine/static/tradehall.png" />
       <view class="position-point">
 
 

pages/order/afterSales/afterSalesSelect.vue

@@ -35,7 +35,7 @@
     <view class="select-view">
       <view class="select-cell" v-if="applyInfo.returnGoods" @click="onSelect(1)">
         <view class="select-image">
-          <image class="select-icon" src="/static/order/t1.png"></image>
+          <image class="select-icon" src="/pages/order/static/t1.png"></image>
         </view>
         <view class="cell-body">
           <view class="select-title">退货</view>
@@ -45,7 +45,7 @@
       </view>
       <view class="select-cell" v-if="applyInfo.returnMoney" @click="onSelect(3)">
         <view class="select-image">
-          <image class="select-icon" src="/static/order/t3.png"></image>
+          <image class="select-icon" src="/pages/order/static/t3.png"></image>
         </view>
         <view class="cell-body">
           <view class="select-title">退款</view>

pages/passport/login.vue

@@ -115,7 +115,7 @@
 					<u-icon v-if="item.title != 'APPLE'" color="#fff" size="42" :name="item.icon"
 						@click="navigateLogin(item)">
 					</u-icon>
-					<u-image v-else src="/static/appleidButton@2x.png" :lazy-load="false" @click="navigateLogin(item)"
+					<u-image v-else src="/pages/passport/static/appleidButton@2x.png" :lazy-load="false" @click="navigateLogin(item)"
 						width="80" height="80" />
 				</div>
 				</template>

pages/product/comment.vue

@@ -303,7 +303,7 @@ page {
           .star-item {
             width: 28rpx;
             height: 28rpx;
-            background: url("/static/star.png");
+            background: url("/pages/product/static/star.png");
             background-size: 100%;
             opacity: 0.25;
 

pages/product/product/promotion/group.scss

@@ -1,5 +1,5 @@
 .group-wrapper {
-	background: url("/static/exchange.png");
+	background: url("/pages/product/static/exchange.png");
 	background-size: cover;
 }
 .u-group-row {

pages/promotion/joinGroup.vue

@@ -27,7 +27,7 @@
 		</u-navbar>
 		<!-- 顶部栏 -->
 		<view class="header-wraper">
-			<image class="header-banner" mode="aspectFit" src="/static/join-buy.png"></image>
+			<image class="header-banner" mode="aspectFit" src="/pages/promotion/static/join-buy.png"></image>
 		</view>
 		<!-- 商品栏 -->
 		<div class="swiper">
@@ -156,7 +156,7 @@ function GET_AssembleGoods() {
 	}
 
 	.header-wraper {
-		background: url('/static/bg.png') no-repeat center center;
+		background: url('/pages/promotion/static/bg.png') no-repeat center center;
 		background-size: cover;
 		height: 200rpx;
 		display: flex;

pages/promotion/point/user.vue

@@ -32,7 +32,7 @@ async function init() {
   padding: 0 20rpx;
   height: 300rpx;
   flex-shrink: 0;
-  background: url("/static/point-bg.png") no-repeat;
+  background: url("/pages/promotion/static/point-bg.png") no-repeat;
   background-size: 100%;
   display: flex;
   align-items: center;

pages/promotion/seckill.vue

@@ -9,7 +9,7 @@
 			@left-click="back"
 		></u-navbar>
 		<view class="header-wraper">
-			<image class="header-banner" mode="aspectFit" src="/static/seckill.png"></image>
+			<image class="header-banner" mode="aspectFit" src="/pages/promotion/static/seckill.png"></image>
 		</view>
 		<scroll-view scroll-x>
 			<view class="index-navs">
@@ -176,7 +176,7 @@ function clickNavigateTime(type: number) {
 	}
 
 	.header-wraper {
-		background: url('/static/bg.png') no-repeat center center;
+		background: url('/pages/promotion/static/bg.png') no-repeat center center;
 		background-size: cover;
 		height: 200rpx;
 		display: flex;

pages/tabbar/home/template/fetch_coupon.vue

@@ -18,7 +18,7 @@
         <view style="width: 120rpx; height: 120rpx; float: right">
           <image
             @click="enableShowCoupon = false"
-            src="/static/cpauto1.png"
+            src="https://lilishop-uniapp.oss-cn-beijing.aliyuncs.com/cpauto1.png"
             style="width: 100%; height: 100%"
           ></image>
         </view>

pages/tabbar/user/my.vue

@@ -181,7 +181,7 @@ body {
     background-size: cover;
     border-bottom-left-radius: 30rpx;
     border-bottom-right-radius: 30rpx;
-    background-image: url("/static/img/main-bg.png");
+    background-image: url("https://lilishop-uniapp.oss-cn-beijing.aliyuncs.com/main-bg.png");
     background-position: bottom;
     background-repeat: no-repeat;
     color: #ffffff;

uni.scss

@@ -1,180 +1,59 @@
-/* 页面左右间距 */
-$page-color-base: #f8f8f8;
-@import "uview-plus/theme.scss";
-
-/* 文字尺寸 */
-$font-sm: 24rpx;
-$font-base: 28rpx;
-$font-lg: 32rpx;
-$font-sl: 36rpx;
-/*文字颜色*/
-$font-color-dark: #303133;
-$font-color-white: #ffffff;
-$font-color-base: #606266;
-$font-color-light: #909399;
-$font-color-disabled: #c0c4cc;
-/* 边框颜色 */
-$border-color-dark: #dcdfe6;
-$border-color-base: #e4e7ed;
-$border-color-light: #ebeef5;
-/* 图片加载中颜色 */
-$image-bg-color: #eee;
-/* 行为相关颜色 */
-$uni-color-primary: #fa436a;
-$uni-color-success: #4cd964;
-$uni-color-warning: #f0ad4e;
-$uni-color-error: #dd524d;
-
-/*主题颜色 具体参考   https://ant.design/docs/spec/colors-cn */
-/**微信登录按钮颜色 */
-$weChat-color:#00a327;
-/**主颜色*/
-$main-color: var(--theme-primary, #ff3c2a);
-/*用于金钱等颜色 */
-$price-color: var(--theme-primary, #ff3c2a);
-/*主题高亮颜色*/
-$light-color: var(--theme-light, #ff6b35);
-/*辅助高亮颜色*/
-$aider-light-color: var(--theme-aider, #ff9f28);
-
-/*主题高亮背景颜色*/
-$main-light-color: #edfcf7;
-/*价格红高亮背景颜色*/
-$price-light-color: #fcedeb;
-
-/*辅助色*/
-$aider-color-red: #ff6262;
-$aider-color-yellow: #ffc71c;
-$aider-color-green: #28d094;
-$aider-color-blue: #1e9ff2;
-// 中性色
-$neutral-color: #333333;
-//背景色
-$bg-color: #f9f9f9;
-
-// 字体
-$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-	"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-$font-weight-b: 500;
-$font-weight: 400;
-.light-color {
-	color: $light-color;
-}
-.main-color {
-	color: $main-color !important;
-}
-.bg-light-color {
-	background-color: $light-color !important;
-}
-.bg-main-color {
-	background-color: $main-color !important;
-}
-
-// 渐变主题颜色
-.bg-linear-gradient {
-	background-image: linear-gradient(25deg, var(--theme-primary, #fa123b), var(--theme-light, #ff6b35), var(--theme-aider, #ff9f28), #ffcc03);
-}
-.uni-tabbar .uni-tabbar__icon {
-	width: 20px;
-	height: 18px;
-}
-
-.flex {
-	display: flex;
-}
-
-.btn {
-	background-color: $light-color;
-	color: #ffffff;
-	border-width: 0px;
-	border: none;
-	border-radius: 44px;
-	height: 44px;
-	box-shadow: none;
-	font-weight: 400;
-	font-style: normal;
-	line-height: 44px;
-	text-align: center;
-	&::after {
-		border: none;
-	}
-}
-.button-hover {
-	opacity: 0.7;
-}
-
-.margin {
-	margin: 10px;
-}
-
-.tag {
-	background-color: rgba(242, 242, 242, 1);
-	color: #333333;
-	height: 28px;
-	border-radius: 28px;
-	box-shadow: none;
-	font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
-	font-weight: 400;
-	font-style: normal;
-	line-height: 28px;
-	text-align: center;
-	width: 90px;
-}
-
-.c-content {
-	background-color: #ffffff;
-	// margin-top: 30rpx;
-	border-top: 1px solid $border-color-light;
-	border-bottom: 1px solid $border-color-light;
-}
-.mt-30 {
-	margin-top: 30rpx;
-}
-.border-top {
-	border-top: 1px solid $border-color-light;
-}
-.describe {
-	color: $font-color-light;
-	font-size: $font-sm;
-	padding: 30rpx;
-}
-.flex-center {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-direction: column;
-}
-
-.flex-a-c{
-	align-items: center;
-}
-.flex-j-sb{
-	justify-content: space-between;
-}
-.relative {
-	position: relative;
-}
-
-.wes {
-	/* 多出部分用省略号表示 , 用于一行 */
-	overflow: hidden;
-	word-wrap: normal;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-.wes-2 {
-	/* 适用于webkit内核和移动端 */
-	display: -webkit-box;
-	-webkit-box-orient: vertical;
-	-webkit-line-clamp: 2;
-	overflow: hidden;
-}
-
-.wes-3 {
-	/* 适用于webkit内核和移动端 */
-	display: -webkit-box;
-	-webkit-box-orient: vertical;
-	-webkit-line-clamp: 3;
-	overflow: hidden;
-}
+/* 页面左右间距 */
+$page-color-base: #f8f8f8;
+@import "uview-plus/theme.scss";
+
+/* 文字尺寸 */
+$font-sm: 24rpx;
+$font-base: 28rpx;
+$font-lg: 32rpx;
+$font-sl: 36rpx;
+/*文字颜色*/
+$font-color-dark: #303133;
+$font-color-white: #ffffff;
+$font-color-base: #606266;
+$font-color-light: #909399;
+$font-color-disabled: #c0c4cc;
+/* 边框颜色 */
+$border-color-dark: #dcdfe6;
+$border-color-base: #e4e7ed;
+$border-color-light: #ebeef5;
+/* 图片加载中颜色 */
+$image-bg-color: #eee;
+/* 行为相关颜色 */
+$uni-color-primary: #fa436a;
+$uni-color-success: #4cd964;
+$uni-color-warning: #f0ad4e;
+$uni-color-error: #dd524d;
+
+/*主题颜色 具体参考   https://ant.design/docs/spec/colors-cn */
+/**微信登录按钮颜色 */
+$weChat-color:#00a327;
+/**主颜色*/
+$main-color: var(--theme-primary, #ff3c2a);
+/*用于金钱等颜色 */
+$price-color: var(--theme-primary, #ff3c2a);
+/*主题高亮颜色*/
+$light-color: var(--theme-light, #ff6b35);
+/*辅助高亮颜色*/
+$aider-light-color: var(--theme-aider, #ff9f28);
+
+/*主题高亮背景颜色*/
+$main-light-color: #edfcf7;
+/*价格红高亮背景颜色*/
+$price-light-color: #fcedeb;
+
+/*辅助色*/
+$aider-color-red: #ff6262;
+$aider-color-yellow: #ffc71c;
+$aider-color-green: #28d094;
+$aider-color-blue: #1e9ff2;
+// 中性色
+$neutral-color: #333333;
+//背景色
+$bg-color: #f9f9f9;
+
+// 字体
+$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+	"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font-weight-b: 500;
+$font-weight: 400;