Przeglądaj źródła

feat: 把图片放到线上,微信小程序可以全部打demo打包进去

Burt 2 lat temu
rodzic
commit
1da9ccda08

src/pages/demo/demo/img-min/after.png → screenshots/img-min/after.png


src/pages/demo/demo/img-min/before.png → screenshots/img-min/before.png


src/pages/demo/demo/img-min/bg-1.png → screenshots/img-min/bg-1.png


src/pages/demo/demo/lottery2-1.png → screenshots/lottery/lottery2-1.png


src/pages/demo/demo/lottery2-2.png → screenshots/lottery/lottery2-2.png


src/pages/demo/demo/lottery2.gif → screenshots/lottery/lottery2.gif


src/pages/demo/demo/lottery/target.png → screenshots/lottery/target.png


BIN
screenshots/lottery2.png


src/static/screenshots/wx-share-after.png → screenshots/wx-share/wx-share-after.png


src/static/screenshots/wx-share-before.png → screenshots/wx-share/wx-share-before.png


+ 14 - 9
src/pages/demo/demo/img-min/index.vue

@@ -3,15 +3,20 @@
     <view class="mb-2 text-orange-500">
       原始图片是一个很大的,2.5M,build之后生成的图片只有1.1M,体积下降 56%
     </view>
-    <image :src="bgImg" mode="scaleToFill" />
+    <image
+      src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/img-min/bg-1.png"
+      mode="scaleToFill"
+    />
     <view class="mb-4">对比图如下2图,如果看不清请看代码原图</view>
-    <image :src="beforeImg" mode="widthFix" class="w-full" />
-    <image :src="afterImg" mode="widthFix" class="w-full" />
+    <image
+      src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/img-min/before.png"
+      mode="widthFix"
+      class="w-full"
+    />
+    <image
+      src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/img-min/after.png"
+      mode="widthFix"
+      class="w-full"
+    />
   </view>
 </template>
-
-<script lang="ts" setup>
-import bgImg from './bg-1.png'
-import beforeImg from './before.png'
-import afterImg from './after.png'
-</script>

+ 8 - 2
src/pages/demo/demo/lottery/big-wheel.vue

@@ -20,13 +20,19 @@
       <view class="lottery-btn" @click="start"> </view>
     </view>
     <view class="text-blue-600 my-2">目标是实现如下的效果,但是我感觉只用css还是太难了</view>
-    <image :src="targetImg" mode="widthFix" width="552px" />
+    <image
+      src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery/target.png"
+      mode="widthFix"
+      width="552px"
+    />
+    <!-- <image :src="targetImg" mode="widthFix" width="552px" /> -->
   </view>
 </template>
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
-import targetImg from './target.png'
+// TODO: fix 微信小程序里面会报错
+// import targetImg from 'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery/target.png'
 
 // 后台配置的奖品数据
 const prizeList = [

+ 10 - 2
src/pages/demo/demo/lottery2.vue

@@ -27,9 +27,17 @@
     <view class="mt-8 text-center text-green-600">下面是调试过程图片</view>
     <view class="mb-8 text-center text-green-600">欢迎感兴趣的玩家继续优化</view>
     <view class="text-center text-blue-600">计算lottery-item-inner节点的padding-left值</view>
-    <image src="./lottery2-1.png" mode="widthFix" class="w-full" />
+    <image
+      src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery/lottery2-1.png"
+      mode="widthFix"
+      class="w-full"
+    />
     <view class="text-center text-blue-600">调整lottery-item-gift节点</view>
-    <image src="./lottery2-2.png" mode="widthFix" class="w-full" />
+    <image
+      src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/lottery/lottery2-2.png"
+      mode="widthFix"
+      class="w-full"
+    />
   </view>
 </template>
 

+ 8 - 2
src/pages/demo/demo/mp-weixin-share.vue

@@ -9,9 +9,15 @@
     <view class="text-green">微信分享页</view>
     <view class="text-green-500">请在微信小程序中体验,或者开发者工具</view>
     <view>1) 默认是不激活”发送给朋友“和”分享到朋友圈“的,如下图</view>
-    <image src="/static/screenshots/wx-share-before.png" mode="widthFix" />
+    <image
+      src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/wx-share/wx-share-before.png"
+      mode="widthFix"
+    />
     <view>2) 增加了onShareAppMessage和onShareTimeline后,就可以微信分享了,如下图</view>
-    <image src="/static/screenshots/wx-share-after.png" mode="widthFix" />
+    <image
+      src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/wx-share/wx-share-after.png"
+      mode="widthFix"
+    />
   </view>
 </template>