Taro + React + TS + Taro-UI + ECharts + Markdown 开发微信小程序-Toy模板网

这篇具有很好参考价值的文章主要介绍了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 + React + TS + Taro-UI + ECharts + Markdown 开发微信小程序

安装 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 />

视图

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

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)

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

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

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

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

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

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,
        ...
    }
}

视图

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

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