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 $\rightarrow$ rpx
• h5 px $\rightarrow$ 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. 圖片默認沒有長寬鎖定, 要使用widthFix

轉H5

1. 多端開發不要使用& > view {} & > image {} & > text {}
   • 突然接到將微信小程序轉h5, 然後就炸了
   • 沒想到什麼好方案，用的全局替換
     • & > view {} $\rightarrow$ & > view, & > div {}
     • & > image {} $\rightarrow$ & > image, & > img {}
     • & > text {} $\rightarrow$ & > 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