导航

    Taro 社区

    Taro

    • 注册
    • 登录
    • 搜索
    • 版块
    • 最新
    • 话题
    • 热门
    • 群组
    1. 主页
    2. minzojian
    M
    • 资料
    • 关注
    • 粉丝
    • 主题
    • 帖子
    • 最佳
    • 群组

    minzojian

    @minzojian

    0
    声望
    6
    帖子
    1347
    资料浏览
    0
    粉丝
    0
    关注
    注册时间 最后登录

    minzojian 关注

    minzojian 发布的帖子

    • Taro.createCanvasContext(canvasId, this) 在H5编译下,会发现找不到对应canvas的ref引用

      我有一个组件,组件里有个canvas

      render() {
          return (
            <View className="canvas-holder" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;">       
              <Canvas canvas-id='draw-canvas' disable-scroll="true" style="position:absolute;top:-1000px;width: 512px; height: 512px;transform-origin:left top;transform:scale({{canvasScale}})" ></Canvas>
            </View>
          )
        }
      

      然后代码中想要去执行

      Taro.createCanvasContext('draw-canvas', this) 
      

      会发现报错

      createCanvasContext.js?3ef4:13 Uncaught (in promise) TypeError: Cannot read property 'vnode' of undefined
          at createCanvasContext (createCanvasContext.js?3ef4:13)
      

      跟踪代码至
      webpack:///../node_modules/@tarojs/taro-h5/src/api/canvas/createCanvasContext.js?3ef4

      /**
      * 创建 canvas 的绘图上下文 CanvasContext 对象
      * @param {string} canvasId 要获取上下文的 <canvas> 组件 canvas-id 属性
      * @param {Object} componentInstance 在自定义组件下,当前组件实例的this,表示在这个自定义组件下查找拥有 canvas-id 的 <canvas> ,如果省略则不在任何自定义组件内查找
      */
      const createCanvasContext = (canvasId, componentInstance) => {
        const refId = `__taroref_${canvasId}`
        const component = findRef(refId, componentInstance)
      
        /** @type {HTMLCanvasElement} */
        const canvas = component.vnode.dom.querySelector(`[canvasId=${canvasId}]`)
      ...
      

      锁定findRef方法,进到webpack:///../node_modules/@tarojs/taro-h5/src/api/utils/index.js?c547

      const findRef = (refId, componentInstance) => {
        if (componentInstance.isRoute) return
        return componentInstance[refId] || findRef(refId, componentInstance.vnode._owner)
      }
      

      发现一开始执行createCanvasContext所传的第二个参数this,对应的.vnode._owner里并没有我上边那个canvas的ref定义,按代码里的逻辑,就是找不到__taroref_draw-canvas

      后来我修改了一下createCanvasContext

      const createCanvasContext = (canvasId, componentInstance) => {
      //  const refId = `__taroref_${canvasId}`
      //  const component = findRef(refId, componentInstance)
      
        /** @type {HTMLCanvasElement} */
        const canvas = componentInstance.vnode.dom.querySelector(`[canvas-id=${canvasId}]`);//把canvasId换成了canvas-id
      ...
      

      便能够正常找到canvas了.
      所以,是我用法不正确?还是我发现了一个BUG?

      PS:我用同样的代码编译小程序的时候,createCanvasContext第二个参数传的是this.$scope,一切倒也正常

      发布在 H5
      M
      minzojian
    • RE: 编译H5提示,提示找不到'@tarojs/components', 小程序能正常编译

      有可能我自己环境的问题吧,我切到UBUNTU系统下,倒是能正常编译
      我为了节省系统盘的开销,把YARN的cache和global移到另外的盘符了.
      平时用起来也没啥问题,不知道是不是taro有什么特殊用法,不能应对我这种使用方式.
      我正考虑要不要重新安装yarn,把全局安装的包还是扔回去
      这是我的.yarnrc

      registry "https://registry.yarnpkg.com"
      "--global-folder" "D:\\YarnGlobal\\Data\\global"
      cache-folder "d:\\YarnCache"
      disturl "https://npm.taobao.org/dist"
      global-folder "D:\\YarnGlobal\\Data\\global"
      lastUpdateCheck 1559741915878
      prefix "D:\\YarnGlobal"
      "registry=https://registry.yarnpkg.com" true
      sass_binary_site "https://npm.taobao.org/mirrors/node-sass"
      

      补充
      经过重新安装yarn,让全局目录恢复回系统盘,然后又重新安装@tarojs/cli后, 编译成功了,汗...

      发布在 H5
      M
      minzojian
    • RE: 编译H5提示,提示找不到'@tarojs/components', 小程序能正常编译

      不得行哦
      而且我后边测试的两个工程都是新建立的,新安装的依赖,按说应该不存在问题啊.有没什么办法看到详细的错误内容,类似webpack --display-error-details之类的

      发布在 H5
      M
      minzojian
    • RE: 编译H5提示,提示找不到'@tarojs/components', 小程序能正常编译

      我开始以为是因为我选择的是云开发模板的原因,后来我又换成默认模板又试了一次,这次的报错就和我之前的一样了,找不到'@tarojs/components'

      PS D:\projects\tarotest> taro init test2
      👽 Taro v1.3.0-beta.6
      
      Taro即将创建一个新项目!
      Need help? Go and open issue: https://github.com/NervJS/taro/issues/new
      
      ? 请输入项目介绍!
      ? 是否需要使用 TypeScript ? Yes
      ? 请选择 CSS 预处理器(Sass/Less/Stylus) Less
      ? 请选择模板 默认模板
      
      ✔ 创建项目: test2
      ✔ 创建配置目录: test2/config
      ✔ 创建源码目录: test2/src
      ✔ 创建页面目录: test2/src/pages
      ✔ 创建页面 JS 文件: test2/src/pages/index/index.tsx
      ✔ 创建页面 LESS 文件: test2/src/pages/index/index.less
      ✔ 创建文件: test2/src/app.tsx
      ✔ 创建文件: test2/src/app.less
      ✔ 创建文件: test2/src/index.html
      ✔ 创建文件: test2/config/index.js
      ✔ 创建文件: test2/config/dev.js
      ✔ 创建文件: test2/config/prod.js
      ✔ 创建文件: test2/.editorconfig
      ✔ 创建文件: test2/.gitignore
      ✔ 创建文件: test2/package.json
      ✔ 创建文件: test2/.eslintrc
      ✔ 创建文件: test2/project.config.json
      创建项目 test2 成功!
      请进入项目目录 test2 开始工作吧!😝
      PS D:\projects\tarotest> cd test2
      PS D:\projects\tarotest\test2> npm run build:h5
      
      > test2@1.0.0 build:h5 D:\projects\tarotest\test2
      > taro build --type h5
      
      👽 Taro v1.3.0-beta.6
      
      开始编译项目 test2
      创建  发现文件  src\app.less
      创建  发现文件  src\app.tsx
      创建  发现文件  src\index.html
      创建  发现文件  src\pages\index\index.less
      创建  发现文件  src\pages\index\index.tsx
      
      🙅   Failed to compile.
      
      ./.temp/pages/index/index.js
      Module not found: Can't resolve '@tarojs/components' in 'D:\projects\tarotest\test2\.temp\pages\index'
      
      npm ERR! code ELIFECYCLE
      npm ERR! errno 1
      npm ERR! test2@1.0.0 build:h5: `taro build --type h5`
      npm ERR! Exit status 1
      npm ERR!
      npm ERR! Failed at the test2@1.0.0 build:h5 script.
      npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
      
      npm ERR! A complete log of this run can be found in:
      npm ERR!     C:\Users\Kent\AppData\Roaming\npm-cache\_logs\2019-06-06T03_44_59_037Z-debug.log
      
      发布在 H5
      M
      minzojian
    • RE: 编译H5提示,提示找不到'@tarojs/components', 小程序能正常编译

      这是通过taro init test创建的一个干净的工程,使用的是云开发模板,然后yarn install相关依赖后,直接执行npm run build:h5提示报错的情况,看起来情况有些相似啊

       taro init test
      👽 Taro v1.3.0-beta.6
      
      Taro即将创建一个新项目!
      Need help? Go and open issue: https://github.com/NervJS/taro/issues/new
      
      ? 请输入项目介绍!
      ? 是否需要使用 TypeScript ? Yes
      ? 请选择 CSS 预处理器(Sass/Less/Stylus) Less
      ? 请选择模板 云开发模板
      
      创建项目 test 成功!
      请进入项目目录 test 开始工作吧!😝
      PS D:\projects\tarotest> cd test
      PS D:\projects\tarotest\test\client> yarn install
      ......
      PS D:\projects\tarotest\test\client> npm run build:h5
      
      > test@1.0.0 build:h5 D:\projects\tarotest\test\client
      > taro build --type h5
      
      👽 Taro v1.3.0-beta.6
      
      开始编译项目 test
      创建  发现文件  src\app.less
      创建  发现文件  src\app.tsx
      创建  发现文件  src\components\login\index.weapp.tsx
      创建  发现文件  src\pages\index\index.less
      创建  发现文件  src\pages\index\index.tsx
      
      🙅   Failed to compile.
      
      ./.temp/pages/index/index.js
      Module not found: Can't resolve '../../components/login/index' in 'D:\projects\tarotest\test\client\.temp\pages\index'
      
      npm ERR! code ELIFECYCLE
      npm ERR! errno 1
      npm ERR! test@1.0.0 build:h5: `taro build --type h5`
      npm ERR! Exit status 1
      npm ERR!
      npm ERR! Failed at the test@1.0.0 build:h5 script.
      npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
      
      npm ERR! A complete log of this run can be found in:
      npm ERR!     C:\Users\Kent\AppData\Roaming\npm-cache\_logs\2019-06-06T03_26_49_162Z-debug.log
      
      发布在 H5
      M
      minzojian
    • 编译H5提示,提示找不到'@tarojs/components', 小程序能正常编译

      已经在GITHUB上提了一个ISSUE了
      https://github.com/NervJS/taro/issues/3337

      我的需求是
      因小程序的画布支持很多BUG,我就打算另外在H5页面中实现画布相关的功能,再由小程序的WEBVIEW包进来使用.
      为了保证相同的风格,我决定另外的H5页面的工程,也采用TARO来编译,也用到了TARO-UI的组件,但是尴尬的是,编译H5的时候,提示找不到'@tarojs/components'
      从.temp文件夹中看到的编译结果文件来看,确实没有把@tarojs相关的代码拷贝进来(小程序会有个npm文件夹,里边是依赖的一些东西),所以这个.temp只是临时使用的,如果编译正常,最后会把编译好包含taro内容的文件一并扔到dist目录中么?(猜测)

      我的备选方案

      如果taro编译H5一时解决不了,我的备选方案就是使用标准版的create-react-app来建立一个普通的react工程,那就会引入一个新话题,如何在普通的react工程中,使用taro以及taro-ui组件,不知道有没有这样的专题介绍?

      发布在 H5
      M
      minzojian