微信小程序 Skyline Worklet ios Andorid 项目实战

微信小程序 最新推出的Skyline渲染以及打包ios、andorid查察各个技能平台很少有详细先容与项目案例,下面是一个简单的壁纸项目开辟实战案例，涵盖了从项目创建到功能实现的整个过程。

项目概述

我们开辟的是一个小程序手机、平板、pc端壁纸项目。用户可以点赞、收藏、下载壁纸。虽然项目很简单，但项目中我们会涉及多语言、主题表面、适配ios andorid、手势系统、自定义tabbar、自定义appbar、复杂组件开辟测试、自定义路由、 元素共享动画、以及一些算法如:发布订阅、线性插值、矩形插值等高阶内容。
项目初始化

首先你需要拥有微信小程序AppID，以及下载微信开辟者工具，再打开微信开辟者工具创建一个不使用微信云以及官方JS-底子模版的小程序，这里我们就不再细聊，我们默认用户拥有肯定开辟底子。
编译项目后能正常运行。接下来需要配置Skline，打开app.json配置文件，添加如下配置。

1. "renderer": "skyline",
2.   "componentFramework": "glass-easel",
3.   "rendererOptions": {
4.     "skyline": {
5.       "defaultDisplayBlock": true,
6.       "defaultContentBox": true
7.     }
8.   },

复制代码

再点击微信开辟者工具右侧详情-当地设置勾选开启Skyline渲染调试，以及将JS编译成ES5。固然如果你还需要真机调试，需要在真机下点击小程序胶囊-开辟调试-Siwtch Render  选择Skline。

     创建项目配置skyline
  
获取微信小程序根本布局信息以及系统根本信息
打开 app.js文件先删除部门内容只留下根本的框架 留下如下代码        

1. App({
2.   onLaunch() {
3.     this.globalData = {
4.       appName: '多时壁纸', // app名称
5.       windowInfo: null, // 设备布局与APP基础信息
6.     }
7.   }
8. })

复制代码

获取根本信息

1.     // 获取窗口信息
2.     const windowInfo = wx.getWindowInfo()
3.     // 获取设备基础信息
4.     windowInfo.deviceInfo = wx.getDeviceInfo()
5.     // 获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
6.     windowInfo.clientRect = wx.getMenuButtonBoundingClientRect()
7.     // APP基础信息
8.     windowInfo.appBase = wx.getAppBaseInfo()
9.     // 计算appbar高度
10.     windowInfo.appbarHeight = windowInfo.clientRect.bottom + windowInfo.clientRect.top - windowInfo.statusBarHeight
11.     // 计算胶囊边距
12.     windowInfo.padding = windowInfo.windowWidth - windowInfo.clientRect.right
13.     // 计算头部导行高度
14.     windowInfo.headerHeight = windowInfo.appbarHeight - windowInfo.statusBarHeight
15.     // 设备宽高比例
16.     windowInfo.ratio = windowInfo.screenWidth / windowInfo.screenHeight
17.     // 加入全局数据
18.     this.globalData.windowInfo = windowInfo

复制代码

     获取装备信息
  
自定义tabbar
我们还是先删撤除没用的页面以及内容和utils文件夹子下utils.js里面的全部内容。删除pages文件夹下的全部文件夹，以及删除app.json下pages下的配置。再再pages文件夹下创建四个文件夹分别是：index、classify、seeker、mine。 注意我们在这四个文件下创建的是组件components而不是页面page，app.jaon中pages[]和普通的配置一样。

如今文件目录应该是这个样子的，而四个页面index.js内容是如下代码:

1. const app = getApp()
2. Component({
3.   behaviors: [],
4.   properties: {},
5.   observers: {},
6.   data: {},
7.   lifetimes: {
8.     created: function () {},
9.     attached: function () {
10.     },
11.     ready: function () {},
12.     detached: function () {}
13.   },
14.   pageLifetimes: {
15.     show: function () {},
16.     hide: function () {}
17.   },
18.   methods: {}
19. })

复制代码

pages文件夹下index.json配置如下，四个都一样哈。

1. {
2.   "navigationStyle": "custom",
3.   "navigationBarTextStyle": "black",
4.   "disableScroll": true,
5.   "componentFramework": "glass-easel",
6.   "renderer": "skyline",
7.   "component": true,
8.   "usingComponents": {}
9. }

复制代码

好了如今对应的tabbap四个页面都创建完成，自己为每个页面添加个背景色，一会切换测试看得清楚些。        
在根目录下创建存放静态资源的status文件夹, 图片请下载原码。再在根目录下创建一个custom-tab-bar文件夹以及在文件下创建index组件。这就是我们需要自定义的tabbar布局组件。固然你还是需要配置一下app.json 下的 tabBar。

1. "tabBar": {
2.     "custom": true,
3.     "list": [
4.       {
5.         "pagePath": "pages/index/index"
6.       },
7.       {
8.         "pagePath": "pages/classify/index"
9.       },
10.       {
11.         "pagePath": "pages/seeker/index"
12.       },
13.       {
14.         "pagePath": "pages/mine/index"
15.       }
16.     ]
17.   }

复制代码

开始编写自定义tabbar:

1. const { runOnJS, shared, timing, Easing, spring, sequence } = wx.worklet
2. const app = getApp()
3. const wininfo = app.globalData.windowInfo // 基础信息
4. Component({
5.   options: {
6.     addGlobalClass: true // 使用全局样式
7.   },
8.   lifetimes: {
9.     attached: function () {
10.       // wx.worklet.shared用于跨线程共享数据和驱动动画数据
11.       // Y抽偏移距离
12.       this._offsetY = shared(100)
13.       // 主题颜色
14.       this._backgroundColor1 = shared(app.globalData.theme === 'light' ? '#f4e2d8a6' : 'rgba(0,0,0,0.3)')
15.       this._backgroundColor2 = shared(app.globalData.theme === 'light' ? '#f4e2d82d' : 'rgba(0,0,0,0.3)')
16.       // 获取组件节点更新属性
17.       this.applyAnimatedStyle('#tabbar', () => {
18.         'worklet'
19.         return {
20.           transform: `translateY(${this._offsetY.value}px)`,
21.           background: `linear-gradient(145deg, ${this._backgroundColor1.value}, ${this._backgroundColor2.value})`
22.         }
23.       })
24.     },
25.   },
27.   ready() {
28.     this._offsetY.value = spring(0)
29.   },
31.   data: {
32.     index: 0,
33.     list: [
34.       '../static/index',
35.       '../static/classify',
36.       '../static/seeker',
37.       '../static/mine'
38.     ]
39.   },
41.   methods: {
42.     // 显示隐藏
43.     onShowHide(bool = true, defaultNumber = 0, hideNumber = 100) {
44.       if (bool) this._offsetY.value = spring(defaultNumber)
45.       else this._offsetY.value = spring(hideNumber)
46.     },
48.     // 切换背景颜色
49.     switchBackgroundColor(theme = app.globalData.theme) {
50.       if (theme === 'light') {
51.         this._backgroundColor1.value = '#f4e2d8a6'
52.         this._backgroundColor2.value = '#f4e2d8a6'
53.       } else {
54.         this._backgroundColor1.value = 'rgba(0,0,0,0.3)'
55.         this._backgroundColor2.value = 'rgba(0,0,0,0.3)'
56.       }
57.     },
59.     // 根据下标获取相应的页面
60.     currentIndexGetPage(index) {
61.       switch (index) {
62.         case 0:
63.           return '/pages/index/index'
64.         case 1:
65.           return '/pages/classify/index'
66.         case 2:
67.           return '/pages/seeker/index'
68.         case 3:
69.           return '/pages/mine/index'
70.         default:
71.           return '/pages/index/index'
72.       }
73.     },
75.     // 切换页面
76.     switchTab(e) {
77.       // 重复中一个同一个tabbar处理
78.       if (this.data.index === e.currentTarget.dataset.index) {
79.         // 当不是探索直接返回
80.         if (e.currentTarget.dataset.index !== 2) return
81.         // 当在探索时发布下载事件
82.         const eventChannel = this.getOpenerEventChannel()
83.         if (!eventChannel) return
84.         eventChannel.emit('download', { index: e.currentTarget.dataset.index })
85.       }
86.       // 当前点击下标
87.       const index = +e.currentTarget.dataset.index
88.       // 根据下标选择路由路径
89.       let url = this.currentIndexGetPage(index)
90.       // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
91.       wx.switchTab({
92.         url: `${url}?index=${index}`, // 路由路径
93.         routeType: 'wx://cupertino-modal', // 路由类型
94.         success: () => {
95.           this.setData({ index }, () => {
96.             // 短时间的振动
97.             wx.vibrateShort({ type: 'medium' })
98.             // tabbar在探索Y抽移动负40像素
99.             if (index === 2) this._offsetY.value = spring(-40)
100.             // 默认移动0
101.             else this._offsetY.value = spring(0)
102.           })
103.         }
104.       })
105.     }
106.   }
107. })

复制代码

1. <view id="tabbar">
2.   <view wx:for="{{list}}" wx:for-index="i" wx:key="*this" bind:tap="switchTab" data-index="{{i}}">
3.     <image src="{{item}}{{index == i? 1: 0}}.svg"/>
4.   </view>
5. </view>

复制代码

1. #tabbar {
2.   width: 600rpx;
3.   height: 100rpx;
4.   position: absolute;
5.   left: 75rpx;
6.   border-radius: 30rpx;
7.   pointer-events: auto;
8.   bottom: calc(env(safe-area-inset-bottom) + 8px);
9.   backdrop-filter: blur(10rpx);
10.   display: flex;
11.   align-items: center;
12. }
14. #tabbar>view {
15.   display: flex;
16.   align-items: center;
17.   justify-content: center;
18.   flex: 1;
19.   height: 100%;
20. }
22. #tabbar>view>image {
23.   width: 50rpx;
24.   height: 50rpx;
25. }

复制代码

     自定义tabbat
  



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。