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 (
    
  )
}

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. 根据单位名称、地址、坐标实现地图导航
    • 使用微信小程序第三方插件腾讯位置服务路线规划
      • 注册:小程序管理后台 → \rightarrow 设置 → \rightarrow 第三方设置 → \rightarrow 插件管理 → \rightarrow 添加插件 → \rightarrow 腾讯位置服务路线规划
      • 申请腾讯位置服务申请的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 {} → \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
  1. 图片上传使用Taro.uploadFile无法成功(微信小程序可行)使用my.uploadFile

你可能感兴趣的:(前端练习)