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

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

要回复问题请先登录注册

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容