[JavaScript知识库]Taro3.x实战

Taro init：

Taro 项目基于 node，node 版本需要>=12.0.0，下列步骤基于mac系统，初始化步骤如下:

1. 全局安装，可通过npm或者yarn安装，指令如下

# 使用 npm 安装 CLI
npm install -g @tarojs/cli

# OR 使用 yarn 安装 CLI
yarn global add @tarojs/cli

# OR 安装了 cnpm，使用 cnpm 安装 CLI
cnpm install -g @tarojs/cli

2. 初始化新建项目

taro init projectname
// 项目配置: 1.是否使用typescript 2.css预处理器选择 3.模版源选择 4.框架选择

3. 项目运行

yarn or npm install
// 微信小程序运行
yarn dev:weapp or taro build --type weapp --watch
// 若包超过2m无法预览或真机调试使用生产环境命令运行
NODE_ENV=production taro build --type weapp --watch

路由配置及分包：

在src/app.config.js文件下配置路由, 例子如下

export default {
  pages: [
    'pages/index/index',
    'pages/thread_detail/thread_detail'
  ]
}

当小程序打包超过2m时，可进行分包策略.底部菜单页面路由必须在pages里面注册，其他页面根据页面路径注册，不同包注册的页面之间相互引用会报错。

export default {
    pages: ['pages/ShowScreen/index', 'pages/myScreen/index'],
    subPackages: [
        {
            root: 'pages/myScreen/',
            pages: ['info/index', 'good/index'],
        },
    ],
}

eslint配置：

在项目初始化过程中eslint配置完成，但是不生效，执行eslint命令后发现缺少依赖eslint-plugin-html,eslint和prettierrc文件配置如下：

Iconfont图标配置：

1. 在scr/components/iconfont/icon.scss文件中配置iconfont官网项目中最新的Uniode, 以及配置prefixClass的名称;

2. 在icon.scss文件中配置相应图标的名称及content，例如图标编码 &#xe832 需去掉 &#x;

3. 使用iconfont需引入taro ui的AtIcon， 示例代码如下

<AtIcon prefixClass='fa' value='news2' size='30' color='#F00'></AtIcon>

4. icon.scss文件示例

echarts组件库:

1. 在src/app.config.js文件引入组件路径

export default {
    ...xxxx,
    usingComponents: {
        'ec-canvas': './components/ec-canvas/ec-canvas', // 书写第三方组件的相对路径
    },
}

2. 进入https://github.com/ecomfe/echarts-for-weixin项目地址，将ec-canvas文件夹下的文件拷贝至src/components/ec-canvas下

3. 示例

import React, { useCallback, useEffect, useRef } from 'react'
import * as echarts from '@/components/ec-canvas/echarts'

const Test = () => {
    const codeChart = useRef(null)
    const init = useCallback((ref, option) => {
        ref &&
            ref.init((canvas, width, height, dpr) => {
                const chart = echarts.init(canvas, null, {
                    width: width,
                    height: height,
                    devicePixelRatio: dpr,
                })
                canvas.setChart(chart)

                chart.showLoading({
                    text: '加载中...',
                    color: '#5B6FFF',
                    textColor: '#333',
                    maskColor: 'rgba(255, 255, 255, 0.2)',
                    zlevel: 0,
                })
                setTimeout(() => {
                    // setOption前隐藏loading事件
                    chart.hideLoading()
                    chart.setOption(option)
                }, 1000)
                return chart
            })
    }, [])

    useEffect(() => {
        codeChart.current = page.selectComponent('#mychart-dom')
        const option = {} // 图表配置项
        init(codeChart.current, option)
    }, [init])

    return (
        <View className="test-container">
            <ec-canvas id={`mychart-dom`} ec={{ lazyLoad: true }} ref={codeChart.current} />
        </View>
    )
}

export default Test