uni-app编译到微信小程序无法使用微信小程序的Skyline

uni-app编译到微信小程序无法使用微信小程序的Skyline

示例代码：

<template>  
  <view class="content">  
    <view id="moved-box"></view>  
    <view id="btn" bind:tap="tap">点击驱动小球移动</view>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      title: 'Hello'  
    };  
  },  

onLoad() {  
  console.log(this);  
  const offset = wx.worklet.shared(0);  
  this.applyAnimatedStyle('#moved-box', () => {  
    'worklet';  
    return {  
      transform: `translateX(${offset.value}px)`  
    };  
  });  
  this._offset = offset;  
},  
  methods: {  
    tap() {  
      // 点击时修改 sharedValue 值，驱动小球移动  
      this._offset.value = Math.random();  
    }  
  }  
};  
</script>

操作步骤：

微信小程序开启 Skyline 渲染模式:

pages.json:

{  
    "path": "pages/index/index",  
    "style": {  
      "navigationStyle": "custom",  
      "renderer": "skyline",  
      "disableScroll": true,  
      "componentFramework": "glass-easel"  
    }  
}

manifest.json:

"appid" : "",  
"setting" : {  
    "urlCheck" : false,  
    "es6" : true  
},  
"usingComponents" : true,  
"lazyCodeLoading" : "requiredComponents",  
"rendererOptions" : {  
    "skyline" : {  
        "defaultDisplayBlock" : false,  
        "defaultContentBox" : false  
    }  
}

微信开发者工具, 开启Skyline 渲染调试

预期结果：

成功调用 this.applyAnimatedStyle 方法, 且点击按钮能使小球移动

实际结果：

控制台报错:

vendor.js? [sm]:4023 [Vue warn]: Error in onLoad hook: "TypeError: this.applyAnimatedStyle is not a function"  

(found in pages/index/index.vue)(env: Windows,mp,1.06.2308310; lib: 3.1.5)

bug描述：

uniapp vue2 编译到微信小程序, 开启微信小程序的Skyline, 无法调用 this.applyAnimatedStyle 方法


更多关于uni-app编译到微信小程序无法使用微信小程序的Skyline的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

写法不对，具体可参考此issue五楼附件wxSkylineDemo.zip

更多关于uni-app编译到微信小程序无法使用微信小程序的Skyline的实战教程也可以访问 https://www.itying.com/category-93-b0.html


下载了Demo进行调试, index.vue 中的 this.applyAnimatedStyle 依然会报错undefined. 使用wxcomponents不会报错. hx3.8.4

回复 Yannis_: this.$scope.applyAnimatedStyle()

回复 zZZ1Ma: 感谢

在 UniApp 中编译到微信小程序时，如果无法使用微信小程序的 Skyline 渲染引擎，可能是以下原因导致的。以下是一些排查和解决方法：

1. 确认 UniApp 版本

  • Skyline 渲染引擎是微信小程序的新特性，UniApp 可能需要更新到最新版本才能支持。
  • 检查你的 UniApp 版本是否为最新版本，如果不是，请升级 UniApp：
    npm update @dcloudio/uni-app

2. 检查项目配置文件

  • 在 manifest.json 中，确保微信小程序的配置正确，并且启用了 Skyline 渲染引擎。
  • 示例配置：
    "mp-weixin": {
  "appid": "你的小程序AppID",
  "setting": {
    "useSkyline": true
  }
}

3. 确认微信开发者工具版本

  • Skyline 需要微信开发者工具的最新版本支持。请确保你使用的是最新版本的微信开发者工具。
  • 下载最新版本：微信开发者工具下载地址

4. 检查 Skyline 的兼容性

  • Skyline 目前仍处于实验阶段，可能存在兼容性问题。确保你的代码和组件支持 Skyline 渲染引擎。
  • 如果你使用的是自定义组件或第三方库，可能需要对 Skyline 进行适配。

5. 编译和调试

  • 在微信开发者工具中，检查编译日志，查看是否有与 Skyline 相关的错误提示。
  • 如果编译失败，可以尝试禁用 Skyline，检查是否是 Skyline 导致的问题：
    "mp-weixin": {
  "setting": {
    "useSkyline": false
  }
}
回到顶部