Yannis_
Yannis_
  • 发布:2023-11-01 15:41
  • 更新:2023-11-02 09:27
  • 阅读:1165

uniapp编译到微信小程序, 无发使用微信小程序的 Skyline

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 11 家庭版 22621.2428

HBuilderX类型: 正式

HBuilderX版本号: 3.8.4

第三方开发者工具版本号: Stable 1.06.2308310

基础库版本号: 3.1.4

项目创建方式: HBuilderX

示例代码:
  <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 方法

2023-11-01 15:41 负责人:无 分享
已邀请:
zZZ1Ma

zZZ1Ma

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

  • Yannis_ (作者)

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

    hx3.8.4

    2023-11-02 11:04

  • zZZ1Ma

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

    2023-11-02 14:20

  • Yannis_ (作者)

    回复 zZZ1Ma: 感谢

    2023-12-26 10:23

要回复问题请先登录注册