[Skyline渲染引擎]学习日D2 从头开始引入 |

第二天接着昨天来其实今天的内容应该是第一篇才对昨天被那个半屏控件的效果帅到了 [Skyline渲染引擎]学习日D1 draggable-sheet 忙着真机各种测试把玩... 巴不得当天就写到之前的项目里去然后发现往老项目迁移的时候一堆错误BUG 所以还是从怎么样引入开始记录下先贴下官方指引文档的地址

https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/migration/

a.app.json文件里需要加入下面的代码

"style": "v2", "renderer": "skyline", "rendererOptions": { "skyline": { "defaultDisplayBlock": true, "disableABTest": true, "sdkVersionBegin": "3.0.0", "sdkVersionEnd": "15.255.255" } }, "componentFramework": "glass-easel", "lazyCodeLoading": "requiredComponents"

b.开发工具里本地设置里的基础库版本需要调高一些下方的开启Skyline渲染调试要勾选上

c.如果需要用到worklet动画特性的时候还需要把编译 worklet代码也勾选好

d.接下来要查看开发工具的渲染模式是不是已经变为Skyline了

e.然后就可以引入下官方组件试试效果了 index.wxml代码

<map class="bg" latitude="{{latitude}}" longitude="{{longitude}}" /><view class="search-wrp" > <view class="search"> <image class="location" src="../../images/pokemon_location.png" /> <view class="input">Search here</view> <image class="headImg" src="{{headImg}}" mode="aspectFill" /> </view></view><draggable-sheet class="sheet" initial-child-size="{{minSize}}" min-child-size="{{minSize}}" max-child-size="{{maxSize}}" snap="{{false}}" snap-sizes="{{[]}}" worklet:onsizeupdate="onSizeUpdate"> <scroll-view associative-container="draggable-sheet" class="scrollable" scroll-y type="custom" show-scrollbar="{{false}}"> <sticky-section> <sticky-header> <view class="bar"> <view class="indicator" /> </view> <view class="row title"> <text>Latest in the area</text> <view class="outer-circle center"> <view class="inner-circle" /> </view> </view> </sticky-header> <list-view> <block wx:for="{{list}}" wx:key="id"> <view class="section"> <view class="card"> <view class="info"> <view class="row"> <image class="info-img" src="{{headImg}}" mode="aspectFill" /> <view class="column" > <text class="n-1">Selen Zeynep</text> <text class="mini-txt">Local Guide • 14 reviews</text> </view> </view> <view class="follow-btn"> Follow </view> </view> <image class="card-img" src="{{item.img}}" mode="aspectFill" /> <view class="row between" > <text class="mini-txt">2 days ago</text> <view class="operation row"> <image class="opt-img" src="../../images/good.png" mode="aspectFill" /> <image class="opt-img" src="../../images/more.png" mode="aspectFill" /> </view> </view> <view class="bottom-intro column"> <text>Mud Island Amphitheaster</text> <text class="mini-txt">4.4 🌟• Outdoor seasonal theaster • 0.6 mi</text> </view> </view> </view> <view class="spacer" /> </block> </list-view> </sticky-section> </scroll-view></draggable-sheet>

index.js的代码

const bg = '

https://pic.616pic.com/bg_w1180/00/00/02/zGDDPXuN2S.jpg'const

headImg = '

https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fd064be90-6b8c-4a6d-9721-837206fbb4a7%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696759051&t=b90e0bf861e41c30214fc739ae66343f'const

hotels = [ '

https://res.cngoldres.com/upload/2017/1011/30b836444f0411260a0afe76ea9576af.jpg',

https://x0.ifengimg.com/ucms/2021_04/C63B2D16D69D691EDC7D8C31E299988487E2C3C5_size144_w1080_h1402.jpg',

https://img2.baidu.com/it/u=2362882516,1616341177&fm=253&fmt=auto&app=138&f=JPEG?w=855&h=500']const

genList = (num) => { const ans = [] for (let i = 0; i < num; i++) { ans.push({ id: i, img: hotels[(i % hotels.length)] }) } return ans}const { shared, Easing } = wx.workletconst lerpColor = (begin, end, t) => { 'worklet' const r = begin.r + (end.r - begin.r) * t const g = begin.g + (end.g - begin.g) * t const b = begin.b + (end.b - begin.b) * t const a = begin.a + (end.a - begin.a) * t return `rgba(${r}, ${g}, ${b}, ${a})`}const { windowHeight } = wx.getSystemInfoSync()const menuRect = wx.getMenuButtonBoundingClientRect()const sheetHeight = windowHeight - (menuRect.bottom + menuRect.height + 60)const Curves = { easeInCubic: Easing.cubicBezier(0.55, 0.055, 0.675, 0.19)}Page({ /** * 页面的初始数据 */ data: { menuRect, sheetHeight, minSize: 0.5, maxSize: 1, headImg, list: genList(10), latitude: 23.099994, longitude: 113.324520, }, onSizeUpdate(e) { 'worklet' const distance = sheetHeight - e.pixels this.progress.value = distance >= 20 ? 1 : distance / 20 }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { const progress = shared(1) this.applyAnimatedStyle('.inner-circle', () => { 'worklet' let t = progress.value const scale = 1 - 0.2 * t return { transform: `scale(${scale})` } }) this.applyAnimatedStyle('.outer-circle', () => { 'worklet' let t = progress.value return { opacity: t, } }) this.applyAnimatedStyle('.search', () => { 'worklet' const t = progress.value const beginColor = { r: 241, g: 233, b: 233, a: 1 } const endColor = { r: 255, g: 255, b: 255, a: 1 } const spreadRadius = -6 + 8 * t const bgColor = lerpColor(beginColor, endColor, t) return { backgroundColor: `${bgColor}`, boxShadow: `0px 0px 6px ${spreadRadius}px rgba(0, 0, 0, 0.12)` } }) this.applyAnimatedStyle('.search-wrp', () => { 'worklet' const t = progress.value return { backgroundColor: `rgb(245, 242, 241, ${1 - t})` } }) this.applyAnimatedStyle('.indicator', () => { 'worklet' const t = progress.value return { opacity: t } }) this.progress = progress },})

index.wxss的代码

/* pages/hotel/index.wxss */.bg { position: absolute; width: 100vw; height: 100vh;}.search-wrp { position: absolute; box-sizing: border-box; width: 100%; height: 50vh; padding: 0 25px; display: flex;}.search { box-sizing: border-box; border-radius: 30px; width: 100%; height: 60px; display: flex; align-items: center; background-color: rgb(241, 233, 233); box-shadow: 0px 0px 6px -6px rgba(0, 0, 0, 0.12); padding: 0 20px;}.input { flex: 1; color: grey; font-size: 16px;}.location { width: 30px; height: 30px; margin-right: 20px; box-sizing: border-box;}.headImg { width: 30px; height: 30px; border-radius: 50%;}.sheet { width: 100%; position: absolute; width: 100%; bottom: 0;}.scrollable { height: 100%; overflow: hidden; border-top-left-radius: 25px; border-top-right-radius: 25px;}.bar { height: 40px; box-sizing: border-box; background-color: rgb(245, 242, 241); border-top-left-radius: 25px; border-top-right-radius: 25px; display: flex; align-items: center; justify-content: center; /* box-shadow: 0px -12px 5px 7px rgba(0, 0, 0, 0.12); */}.indicator { background-color: rgb(190, 186, 186); border-radius: 3px; height: 4px; width: 40px;}.title { position: relative; height: 60px; box-sizing: border-box; padding: 0px 25px 20px; font-size: 24px; background-color: rgb(245, 242, 241);}.inner-circle { width: 60px; height: 60px; transform: scale(1); border-radius: 50%; background-color: rgb(114, 155, 156);}.outer-circle { position: absolute; top: -10px; right: 20vw; width: 60px; height: 60px; border-radius: 50%; background-color: black;}.section { background-color: rgb(245, 242, 241); padding: 5px 25px 25px;}.card { width: 100%; border-radius: 10px; box-sizing: border-box;}.info { display: flex; justify-content: space-between; margin-bottom: 20px;}.row { display: flex; flex-direction: row; align-items: center;}.between { justify-content: space-between;}.column { display: flex; flex-direction: column;}.center { display: flex; align-items: center; justify-content: center;}.follow-btn { padding: 10px 20px; border-radius: 25px; font-weight: 400; background-color: rgb(249, 224, 223);}.info-img { width: 36px; height: 36px; border-radius: 50%;}.n-1 { font-weight: 400;}.card-img { width: 100%; height: 300px; border-radius: 20px;}.mini-txt { font-size: 13px; color: rgb(119, 108, 108);}.opt-img { width: 24px; height: 24px; margin-left: 20px; display: flex; align-content: center;}.bottom-intro { border-radius: 15px; padding: 15px; background-color: rgb(241, 233, 233);}.spacer { background-color: rgb(241, 233, 233); height: 10px;}

以上的代码是一个完整的官方示例在开发工具和真机上调试体验效果都很好就是map组件会报错不知道是不是哪里没设置对但是真机上没问题有需要的可以直接复制到开发工具里跑一跑试试