Taro实践和踩坑

Taro实践

从临时接到任务要做一个答题微信小程序，为什么快速上手选用Taro到现在实践了3个小程序，也算是有些经验和总结，在此记录一下

选择原因

• 基于React语法规范，上手几乎0成本，满足基本开发需求
  • 支持TS，支持ES7/ES8或更新的语法规范
  • 支持CSS预编译器，Sass/Less等
  • 支持Hooks(日常开发几乎不需要redux场景)
  • 支持状态管理，Redux/MobX
• 一套代码多端运行，开发成本低
• Taro UI基于Taro开发的UI组件
  • 支持多端wechat小程序 、alipay小程序、tt小程序、H5
  • 组件丰富，API、文档友好

---

开发准备

# >=8.0.0
$ yarn global add @tarojs/cli
$ taro init myApp
$ yarn

编译配置

• alias

// config/index
alias: {
  "@/components": "src/components",
  "@/utils": "src/utils",
  "@/styles": "src/styles",
  "@/apis": "src/apis",
  "@/store": "src/store",
  "@/images": "src/assets/images"
}

• 多端调试

// config/index
outputRoot: `dist/${process.env.TARO_ENV}`

• Taro-UI

// config/index
h5: {
  esnextModules: ['taro-ui']
}

• CSS Module

// 小程序
mini: {
  postcss: {
    // css modules 功能开关与相关配置
    cssModules: {
      enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
      config: {
        namingPattern: 'module', // 转换模式，取值为 global/module，下文详细说明
        generateScopedName: '[name]__[local]___[hash:base64:5]'
      }
    }
  }
}

// h5
h5: {
  postcss: {
    // css modules 功能开关与相关配置
    cssModules: {
      enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
      config: {
        namingPattern: 'module', // 转换模式，取值为 global/module，下文详细说明
        generateScopedName: '[name]__[local]___[hash:base64:5]'
      }
    }
  }
}

// import styles from './style.scss'
<Text className={styles.name} />

样式

设计稿及尺寸单位

• 默认750px为设计稿标准，可在config/index
• weapp px $\to$ rpx
• h5 px $\to$ rem

覆盖主题

// custom-variables.scss

/* 改变主题变量，具体变量名可查看 taro-ui/dist/style/variables/default.scss 文件 */

$color-brand: #6190E8;
/* 引入 Taro UI 默认样式 */
@import "~taro-ui/dist/style/index.scss";

css预编译器

默认支持sass

styled-component

• 不支持, 有点难受

---

字体图标

Iconfont

阿里图标

地址

Iconfont-阿里巴巴矢量图标库

插件

• GitHub - iconfont-cli/taro-iconfont-cli

配置

• 将icon 添加到仓库
• 获取Symbol链接
• 更新iconfont.json

{
    "symbol_url": "//at.alicdn.com/t/font_1707845_k4b717hruv.js", // Symbol url
    "save_dir": "./src/components/iconfont",
    "use_typescript": false,
    "platforms": "*",
    "use_rpx": true,
    "trim_icon_prefix": "icon",
    "default_icon_size": 18,
    "component_name": "IconFont"
}

// npx iconfont-taro 
// 更新 @/component/iconfont

使用

• pages

import Taro from "@tarojs/taro"

import IconFont from ""@/components/iconfont"

const Check = () => {
  return (
    <IconFont name="check" color="red" size={30}/>
  )
}

export default Check;

.icon {
  &::before {
    font-family: "iconfont";
    content: "\e687";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
  }
}

AtIcon

Taro UI | Icon

---

踩坑

1. SPA页面间样式互相影响，采用CSS Module
2. 获取小程序原生作用域this.$scope，使用命名函数或者class, 不能使用箭头函数
3. 父组件向子组件传递函数，函数名以on开头
4. Taro.navigateBack无法传参
   • 场景
     • 通用平面图拾取页面，拾取成功将数据返回上个页面
   • 解决方案：
     • 使用getCurrentPages

       // this page
       const pages = Taro.getCurrentPages()
       const pre = pages[pages.length - 2]
       pre.setData(myData)
     
       // pre page
       // useDidShow
       const page = Taro.getCurrentPages().pop()
       console.log(page.data)
     

     • 维护一个全局变量，如存在Redux
5. Object.fromEntries支持不完善

转wechat微信小程序

1. 获取坐标，转换为百度坐标系BD09，wx默认支持WGS84, 支持GCJ02
   • GitHub - hujiulong/gcoord: 地理坐标系转换工具，支持WGS84/GCJ02/BD09等常用坐标系互转
2. 根据单位名称、地址、坐标实现地图导航
   • 使用微信小程序第三方插件腾讯位置服务路线规划
     • 注册：小程序管理后台 $\to$ 设置 $\to$ 第三方设置 $\to$ 插件管理 $\to$ 添加插件 $\to$ 腾讯位置服务路线规划
     • 申请腾讯位置服务申请的KEY
     • 注册：src/app.tsx

     config = {
       permission: {
         'scope.userLocation': {
           desc: '你的位置信息将用于创建单位的位置采集'
         }
       },
       plugins: {
         routePlan: {
           version: "1.0.5",
           provider: "wx50b5593e81dd937a" // 腾讯位置服务路线规划appid
         }
       },
     }
     

     • 使用

       Taro.requirePlugin('routePlan');
       const key = KEY;  //使用在腾讯位置服务申请的key
       const referer = MINI NAME;   //调用插件的app的名称
       const endPoint = JSON.stringify({  //终点
         name,
         longitude,
         latitude,
       });
       Taro.navigateTo({
         url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
       });
     

     • 能实现功能：步行、公交、驾车路径规划
     • 缺点：不能进行导航
   • 使用wx.openLocation拉起内置地图，点击地图导航按钮，拉起第三方地图软件
3. 图片默认没有长宽锁定, 要使用widthFix

转H5

1. 多端开发不要使用& > view {} & > image {} & > text {}
   • 突然接到将微信小程序转h5, 然后就炸了
   • 没想到什么好方案，用的全局替换
     • & > view {} $\to$ & > view, & > div {}
     • & > image {} $\to$ & > image, & > img {}
     • & > text {} $\to$ & > text, & > span {}
2. 默认没有头部导航

转alipay支付宝小程序

1. 获取元素高度

onst query = Taro.createSelectorQuery();
query.select('.conatiner')
  .boundingClientRect(function (rect) { 
    setbase({ img: e.detail, container: rect }) // wechat
  })
  .exec(rects => setbase({ img: e.detail, container: rects[0] })); // alipay

2. 图片上传使用Taro.uploadFile无法成功（微信小程序可行）使用my.uploadFile