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

This commit is contained in:
Burt 2024-01-22 10:14:27 +08:00
parent c569a267ec
commit 1da9ccda08
14 changed files with 40 additions and 15 deletions

View File

Before

Width:  |  Height:  |  Size: 745 KiB

After

Width:  |  Height:  |  Size: 745 KiB

View File

Before

Width:  |  Height:  |  Size: 245 KiB

After

Width:  |  Height:  |  Size: 245 KiB

View File

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 2.4 MiB

View File

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 56 KiB

View File

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

View File

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 86 KiB

View File

Before

Width:  |  Height:  |  Size: 673 KiB

After

Width:  |  Height:  |  Size: 673 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

View File

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 44 KiB

View File

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 41 KiB

View File

@ -3,15 +3,20 @@
<view class="mb-2 text-orange-500"> <view class="mb-2 text-orange-500">
原始图片是一个很大的2.5Mbuild之后生成的图片只有1.1M体积下降 56% 原始图片是一个很大的2.5Mbuild之后生成的图片只有1.1M体积下降 56%
</view> </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> <view class="mb-4">对比图如下2图如果看不清请看代码原图</view>
<image :src="beforeImg" mode="widthFix" class="w-full" /> <image
<image :src="afterImg" mode="widthFix" class="w-full" /> 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> </view>
</template> </template>
<script lang="ts" setup>
import bgImg from './bg-1.png'
import beforeImg from './before.png'
import afterImg from './after.png'
</script>

View File

@ -20,13 +20,19 @@
<view class="lottery-btn" @click="start"> </view> <view class="lottery-btn" @click="start"> </view>
</view> </view>
<view class="text-blue-600 my-2">目标是实现如下的效果但是我感觉只用css还是太难了</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> </view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, computed } from 'vue' 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 = [ const prizeList = [

View File

@ -27,9 +27,17 @@
<view class="mt-8 text-center text-green-600">下面是调试过程图片</view> <view class="mt-8 text-center text-green-600">下面是调试过程图片</view>
<view class="mb-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> <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> <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> </view>
</template> </template>

View File

@ -9,9 +9,15 @@
<view class="text-green">微信分享页</view> <view class="text-green">微信分享页</view>
<view class="text-green-500">请在微信小程序中体验或者开发者工具</view> <view class="text-green-500">请在微信小程序中体验或者开发者工具</view>
<view>1) 默认是不激活发送给朋友分享到朋友圈如下图</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> <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> </view>
</template> </template>