记录一下【微信小程序skyline模式的一些坑】

引言

最近在用这个skyline渲染模式开发页面，记录一下遇到的一些坑，总结一下使用体验：快跑！run！

总结我遇到的不能接受的地方

1. 无法使用css变量 ，基于unocss或tailwind原子化css，需要对css变量做额外的处理，有点难受了；
2. wxss使用import导入公共wxss，不生效，难受加剧;
3. 最新的nighly版的微信开发者工具，flex布局方向默认是 columns，而移动端是 row，这个是个大坑！！！需要额外的给.flex class增加flex-direction:row 特别注意！; 感到疼痛
4. skyline模式所有的元素布局默认不使用盒模型，偏偏开发者工具又是默认的盒模型显示，在你以为一切都没问题的时候，真正上手机调试就知道了，差点两眼一黑，直接昏过去~ 解决很简单，习惯了盒模型的，只需要给 每个 view 添加 box-sizing:border-box； 所有view元素默认使用盒模型； 感到剧烈疼痛
5. 开发者工具特别卡，元素审查工具基本用不了，特别容易崩溃，这个是老传统了，不能怪skyline，它只是加剧了反应
6. 后面的，待我遇到了再继续补充，（让老夫瞧瞧他那手势系统和动画再来吐槽）

这些坑新来的注意下，基本页面布局问题不大了。
最新更新
我CTNN的skyline
一堆的坑，微信做不来就不要做好嘛，残次品就急忙放出来给人用！！！
7.最重要的一个坑，skyline模式不支持真机调试，请使用预览模式！！！（为了方便调试，我一般用真机，调着调着就发现，这玩意兼容性也太差了，vant1.x版本的组件在这个模式是有兼容问题的，pop底部弹窗组件就有问题，这个组件请使用vant 0.x版本的
8.textarea在这个模式下，直接使用没啥问题，如果是组件内的textarea，bindinput,bindkeyboardHeightChange,bindconfirm等等这些事件是失效的，CTNN的skyline，做不好就不要做！（如果实在想使用组件的方式，就不要用wx:if来控制显隐；可以试着给这个组件position:absolute,bottom:-100%,或者z-index:-1，真正要显示的时候，就bottom:0，或者z-index:999;）
9.这个模式组件最外层默认套了一层view,如果不给这个view写高度，那么这玩意默认就不显示，这点格外注意，都tm什么年代了，还在写fragment，这玩意就是一坨垃圾。

只是他们开发自己意淫多么高效，动画性能多么牛逼，跟手多么流畅，实际上bug一大堆，各种稀奇古怪的bug，很多web组件的api都不支持，input和textarea非要搞原生渲染，这两玩意出了多少bug，官方是没有一点b数是吗？

技术是来解决问题的，不是来制造问题的！为了解决js跟原生层交互的稍微卡顿问题，结果引出一大堆问题，修又修不好，要来何用？

社区论坛一大堆兼容性bug，没人管是吧？都3202年了，零几年的bug还TM挂着呢，至今都有人在下面问。

如果有人要入坑小程序，甚至还要入坑skyline，我都建议直接换个项目，小程序就是垃圾，skyline更是垃圾
勇哥撤回了一碗饭

《skyline 从入门到入土》

这玩意动画性能还可以，也就这点能吹了

相比于这些bug来说，我宁愿不用这个模式，要不是项目需要，碰都不想碰这玩意。

2024-04-15 更新

上面的部分bug(全局wxss引入,元素审查不那么卡了), 但很多问题导致开发者工具依旧很难用

最近在skyline上借助canvas实现图片裁剪, 依旧踩了很多坑,额外花了我一倍的时间成本

1. 最难受的一点, skyline模式下 canvas是不能在开发者工具上直接调试的, 只能预览调试, 鬼知道我打包预览了多少次!
2. 在这个模式下,canvas语法的需要调整, 具体调整戳这里:官方迁移示例 , 这里主要说坑:

// 这是官方示例初始化canvas大小的方法
wx.createSelectorQuery()
    .select('#myCanvas') // 在 WXML 中填入的 id
    .fields({ node: true, size: true })
    .exec((res) => {
        // Canvas 对象
        const canvas = res[0].node
        // Canvas 画布的实际绘制宽高
        const renderWidth = res[0].width
        const renderHeight = res[0].height
        // Canvas 绘制上下文
        const ctx = canvas.getContext('2d')

        // 初始化画布大小
        const dpr = wx.getWindowInfo().pixelRatio
        canvas.width = renderWidth * dpr
        canvas.height = renderHeight * dpr
        ctx.scale(dpr, dpr)
    })

实际上官方示例都TM是错的, 可能出bug了, 根本就拿不到 canvas的node, 只需要这么写就行了,别问为什么, 这里不是十万个为什么,依旧红温了

// 这个获取是异步的, 如果需要同步执行ctx的一些方法,需要把它用promise包装一下,封装个方法
function canvasInit(){
	return new Promise((resolve,reject)=>{
		wx.createSelectorQuery()
	    .select('#myCanvas') // 在 WXML 中填入的 id
	    .node(({ node: canvas }) => {
	        const context = canvas.getContext('2d')
	        // 初始化画布大小
	        const dpr = wx.getWindowInfo().pixelRatio
	        canvas.width = canvas的渲染宽度 * dpr
	        canvas.height = canvas的渲染高度 * dpr
	        ctx.scale(dpr, dpr)
	        resolve({ context, canvas })
	    })
	    .exec()
	})
}
async onLoad(){
	...other
	const { canvas, context } = await canvasInit();
	// context.xxx();
	// 记得保存一下 canvas实例和ctx,方便后续使用
	// this.data.canvas = canvas
	// this.data.ctx = context
}

3. drawImage 这个api没啥改动, 跟着迁移来问题不大
4. canvasToTempFilePath 这个api 注意一下入参: canvasId 没有了 ,需要传入 canvas: this.data.canvas,不然这个api调用的时候会报错: canvas is empty啥的, 导出的图片如果是糊的,destWidth,destHeight 这两个目标像素参数分别乘上个 dpr就行了, 常见问题
5. 重要的一点, 组件内的canvas 获取不到,尽量不在组件内使用, 用了in也不生效 ,这个Bug给我恶心吐了,最后没在组件内用canvas,才能获取到!!! 彻底红温了

wx.createSelectorQuery().in(this).select('#myCanvas') // 在 WXML 中填入的 id
	    .node(({ node: canvas }) => {
			// canvas is undefined
		}
))

综上就能正常使用了

这里着重说一下drawImage这个api

官方文档里面 这段话

“CanvasContext 是旧版的接口，新版 Canvas 2D 接口与 Web 一致 从基础库 2.9.0 开始，本接口停止维护，请使用
RenderingContext 代替”

别被它唬住, 之前已经是用的新版canvas2d了, ctx也就是RenderingContext,不用切换,正常用就行了

官方文档TMD该说明的地方惜字如金, 一些模凌两可的地方,废话一大堆,生怕你不被误导

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 这个api一堆参数

这些参数组合起来天生适合裁剪功能, 前四个参数(sx,sy,sw,sh)和后四个参数(dx,dy,dw,dh)是原图片的取值范围(x,y坐标和宽高)和目标canvas数据的渲染范围(x,y坐标和宽高)
常见的drawImage(image, sx, sy, sw, sh) 只传入这五个参数,后四个参数很少传,但它的默认值是(0,0,canvas.w,canvas.h) ,后面四个参数很适合做缩放

说了堆没用的,以上就是目前遇到的