Taro使用及遇到的问题

用户3377781622124
464 阅读2分钟
  1. API调用：wx =》 Taro

例如：wx.showToast() =》Taro.showToast()

  1. vue: div => view、 span => text ；直接书写均默认为行内元素；

  2. react: 需要先从 Taro 标准组件库 @tarojs/components 引用组件，再进行使用，例如使用 View、 Text 组件，而 Vue 我们则无需引入;

  3. taro适配问题

    taro-cli 内置移动端设备比deviceRatio配置，以750px为基准宽

    如果设计稿是 375 ，那么需要把 designWidth 配置为 375，同时在 DEVICE_RATIO 中添加换算规则

    designWidth: 750, // 375
deviceRatio: {
  640: 2.34 / 2,
  750: 1,
  828: 1.81 / 2,
  375: 2 / 1
},

  4. @touchmove.stop.prevent 遮罩层打开时防止上下滑动

  5. 组件问题

    vant  
vant-weapp （支持小程序）

   在本地下载vant-weapp源码，讲源码文件复制到项目中；
   需要在index.config.js中配置所用组件

    taro-ui（无虚拟列表组件） Trao文档中相对更推荐Vue3和Nut UI4.0组件库 nutui.jd.com/#/

  1. 长列表问题

    1. <scroll-view 滚动方法不生效，可能是因为组件不是引入导致

    2. 是未引入组件，导致Taro样式不生效【已验证】

      import { ScrollView } from "@tarojs/components；

    3. <virtual-list Taro文档-进阶指南-性能优化-长列表渲染

    参考位置： 1、taro-docs.jd.com/docs/virtua… 2、taro-docs.jd.com/blog/2021-0…

  2. vue-infinite-loading 第三方插件

    1. import InfiniteLoading from "vue-infinite-loading";
    2. 虚拟列表-引入、注册、使用
    3. ref、distance滚动位置、infinite循环方法
    4. 参考位置：blog.csdn.net/qq_53472371…
 Taro官方文档API参照了小程序官方文档API，大多均可直接调用，但需参考Taro文档是否支持所用平台（小程序、H5、叮叮、飞书等）

9. 动态图片渲染

相对地址，动态渲染时需要通过require()包裹， www.taodudu.cc/news/show-4… 或参考vue官方文档-处理静态资源

  1. 环境配置及打包

  1. Taro配置了dev和prod环境（test环境暂未配置成功），因此开发和测试环境暂使用dev，生产环境仍是prod
"dev": "NODE_ENV=development npm run build:h5",
"prod": "NODE_ENV=production npm run build:h5"
  1. h5、小程序如何通过taro转换

使用taro-cli生成的项目是可以通过运行命令npm run dev:weapp\npm run dev:h5运行项目。

将已有小米项目（h5）直接运行小程序命令npm run dev:weapp 则无法启动，应需根据文档进行配置（待实现）

同时开发多个端需要先确保已经正确配置了项目的相关设置和依赖项，然后可以使用 npm run dev:weapp -- --env mini（其中 weapp 可以替换为任意小程序端的名称）来启动开发服务器

更多问题持续补充...

avatar
文章
阅读
粉丝