feat: 把图片放到线上,微信小程序可以全部打demo打包进去
Before Width: | Height: | Size: 745 KiB After Width: | Height: | Size: 745 KiB |
Before Width: | Height: | Size: 245 KiB After Width: | Height: | Size: 245 KiB |
Before Width: | Height: | Size: 2.4 MiB After Width: | Height: | Size: 2.4 MiB |
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 86 KiB |
Before Width: | Height: | Size: 673 KiB After Width: | Height: | Size: 673 KiB |
Before Width: | Height: | Size: 46 KiB |
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
@ -3,15 +3,20 @@
|
|||||||
<view class="mb-2 text-orange-500">
|
<view class="mb-2 text-orange-500">
|
||||||
原始图片是一个很大的,2.5M,build之后生成的图片只有1.1M,体积下降 56%
|
原始图片是一个很大的,2.5M,build之后生成的图片只有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>
|
|
||||||
|
@ -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 = [
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|