Taro + React + TS + Taro-UI + ECharts + Markdown 开发微信小程序

1、安装 Taro 脚手架工具

npm install -g @tarojs/cli
yarn global add @tarojs/cli

2、taro 初始化项目

taro init taro-app

安装 taro-ui

• cd taro-app
• yarn add taro-ui

全局引入taro-ui样式

import 'taro-ui/dist/style/index.scss'

3、项目路由路径

• page 对应项目路径
• lazyCodeLoading 组件按需注入
• Taro.navigateTo({url: xxx}) 小程序内部跳转

export default {
    "lazyCodeLoading": "requiredComponents",
    pages: [
        'pages/index/index',
        'pages/statistics/index',
        'pages/my/index',
        'pages/about/index',
        'pages/contact/index',
        'pages/webview/index'
    ],
    // ...
}

4、全局添加分享功能

src/app.ts中添加 Taro.showShareMenu

class App extends Component {
    render() {
        Taro.showShareMenu({
            withShareTicket: true,
            // @ts-ignore
            menus: ['shareAppMessage', 'shareTimeline'],
            showShareItems: ['shareAppMessage', 'shareTimeline'],
        });

        // this.props.children 是将要会渲染的页面
        return this.props.children
    }
}

5、引导关注公众号

• OfficialAccount
• 关注/查看

import { OfficialAccount } from '@tarojs/components'
<OfficialAccount />

视图

6、获取用户头像/昵称

• Taro.getUserProfile 获取用户的头像昵称
• Taro.setStorageSync 存储信息 相当于 localStorage.setItem
• Taro.getStorageSync 获取信息 相当于 localStorage.getItem

getUserProfile() {
    Taro.getUserProfile({
        desc: '获取用户昵称、头像',
        success: (res) => {
            Taro.setStorageSync('userInfo', res.userInfo)
            this.setState({ userInfo: res.userInfo })
        },
        fail: () => {
            console.error("您拒绝了请求");
            return;
        }
    })
}

打印 getUserProfile success(res)

7、 封装 WebView 实现跳转公众号内页

封装的webview组件

• getCurrentInstance 获取地址栏/router

import { FC, useEffect, useState } from 'react'
import { View, WebView } from '@tarojs/components'
import { getCurrentInstance } from '@tarojs/taro'

const MyWebView: FC = () => {
    const [hrefURL, setHrefURL] = useState<string>('')

    useEffect(() => {
        const { params } = getCurrentInstance().router ?? {}
        setHrefURL(decodeURIComponent(params?.webUrl ?? ''))
    }, [])

    return (
        <View className='webview' >
            <WebView src={hrefURL} />
        </View>
    )
}
export default MyWebView

打印 getCurrentInstance()

相关页面使用时

跳转的公众号需要是企业认证的，才能配置业务域名，个人公众号暂不支持WebView

handleGridClick(item: itemDTO) {
    Taro.navigateTo({ url: `/pages/webview/index?webUrl=${encodeURIComponent(item.url)}` })
}

跳转

8、ScrollView视图容器组件

• Taro.getSystemInfoSync() 获取设备屏幕高度
• 设置 scrollY、height
• scroll-view视图容器组件各属性含义

const { windowHeight } = Taro.getSystemInfoSync()
const scrollHeight = (windowHeight * windowHeight / 750 - 140)
const scrollStyle = {
    height: scrollHeight + 'px',
}

<ScrollView
    scrollY
    enhanced={true}
    show-scrollbar={false}
    scrollWithAnimation={true}
    enable-back-to-top={true}
    style={scrollStyle}
>
    // ...
</ScrollView>

打印 getSystemInfoSync()

9、数据可视化

• git clone echarts-for-weixin
• 将 ec-canvas拷贝到自己项目中src下
• 需要给 canvas设置宽高

需要在 index.config.ts声明ec-canvas组件

export default {
    navigationBarTitleText: '前端进阶技术栈',
    usingComponents: {
        "ec-canvas": "../../ec-canvas/ec-canvas"
    }
}

index.ts 使用

function getPieChart(canvas, width, height, dpr) {
    const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 像素
    });
    canvas.setChart(chart);

    var option = {
        tooltip: {
            show: true
        },
        legend: {
            top: 'bottom'
        },
        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [35, 110],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: [
                    { value: 56.7, name: 'Vue' },
                    { value: 36.4, name: 'Angular' },
                    { value: 72.5, name: 'React' }
                ]
            }
        ]
    }
    chart.setOption(option);
    return chart;
}

// ...
this.state = {
    ecPie: {
        onInit: getPieChart
    }
}
// ...

<View className="canvas pie">
    <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec={ecPie}></ec-canvas>
</View>

在 global.d.ts 中添加以下内容

declare namespace JSX {
    interface IntrinsicElements {
        'ec-canvas': any,
        ...
    }
}

视图

EChart 相关文档

• echarts-for-weixin
• EChart相关示例
• EChart中options各属性用法示例
• 定制需要的图表类型

10、集成Markdown

• git clone wemark
• 将 wemark 文件拷贝到自己的项目的src目录下

使用前配置

设置编译时复制wemark目录，修改config/index.js，在copy设置项中增加wemark，

copy: {
  patterns: [
    {
      from: 'src/wemark',
      to: 'dist/wemark',
    },
  ],
  options: {
  }
},

设置taro编译时忽略 remarkable.js，继续修改config/index.js

weapp: {
  compile: {
    exclude: [
      'src/wemark/remarkable.js',
    ]
  },
  ...
}

在 global.d.ts 中添加以下内容

declare namespace JSX {
    interface IntrinsicElements {
        'wemark': any
    }
}

封装Markdown文章详情

import { FC, useEffect, useState } from 'react'
import { View } from '@tarojs/components'
import { getCurrentInstance } from '@tarojs/taro'
import './index.scss'
import Taro from '@tarojs/taro'

const Article: FC = () => {
    const [markdown, setMarkdown] = useState<string>('')

    useEffect(() => {
        const { md, title } = getCurrentInstance().router?.params ?? {}
        setMarkdown(decodeURIComponent(md ?? ''))
        Taro.setNavigationBarTitle({
            title: decodeURIComponent(title ?? '前端进阶技术栈')
        })
    }, [])

    return (
        <View className='article'>
            <wemark md={markdown} link={true} highlight={true} type='wemark' />
        </View>
    )
}
export default Article

视图

11、调试打包上传

web端调试

• yarn dev:h5 web端调试

微信内置 API 需要小程序开发工具调试

• yarn build:weapp
• 微信开发者工具 引入 dist文件夹即可