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

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

项目概述

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

微信小程序 Skyline Worklet ios Andorid 项目实战-01的视频

自定义tabbat

自定义appbar

因为小程序的appbar比较特殊，所以建议在appbar上使用px而不是rpx，应为rpx是逻辑像素，它不管设备的真实的像素，一刀切的把屏幕宽度分成750份，一份就是1rpx，这样的后果是在手机上看上去一切正常，如果使用平板打开样式会乱掉。当然我们也可以写一个rpx和px互换的工具方法，把px转成rpx后再使用也是可以的。util.js 工具类加入一下方法

/**
 * rpx或px相互转换
 * @param { String } unit 带单位的尺寸 rpx、px
 * @param { Number } screenWidth 屏幕宽度不是设备可用的宽度
 * @return { Number } 转换后的rpxn或px
 */
export const switchPxRx = (unit, screenWidth) => {
  if (!unit || typeof (unit) !== 'string') return new Error('带单位的尺寸叁数错误')
  if (!screenWidth || typeof (screenWidth) !== 'number') return new Error('设备宽度错误')
  const value = parseInt(unit, 10)
  const and = 0 - Number(unit.length - (value.toString().length))
  const type = unit.slice(and)
  if (type === 'px') return value / (screenWidth / 750)
  if (type === 'rpx') return value * screenWidth / 750
}

rpx和px互换的工具方法

容器组件iAppbar

项目根目录创建一个components文件夹用来存放我们的所有组件。创建出一个appbar头部容器组件名字叫iAppbar

const app = getApp()
const wininfo = app.globalData.windowInfo
/**
 * 这是一个头部容器组件 主要以微信小程序胶囊作为计算基点, 分左中有三部分。
 */
Component({
  options: {
    addGlobalClass: true, // 使用全局样式
    virtualHost: true, // 虚拟化节点
    multipleSlots: true // 组件使用多个slot 必须配置 true 默认组件只能有一个slot
  },

  data: {
    contentStyle: `height: $