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-ignoremenus: ['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()

8、ScrollView视图容器组件

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

const { windowHeight } = Taro.getSystemInfoSync()
const scrollHeight = (windowHeight * windowHeight / 750 - 140)
const scrollStyle = {height: scrollHeight + 'px',
}<ScrollViewscrollYenhanced={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文件夹即可

Taro + React + TS + Taro-UI + ECharts + Markdown 开发微信小程序相关推荐

Taro开发微信小程序实现简单的登录退出功能
Taro是由凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架,还有我发现从某度上搜索的结果首页居然看不到Taro框架的任何信息,但是谷歌首页就直接给出了结果,Taro使用文档.我是准备 ...
Taro开发微信小程序（一）
Taro开发微信小程序(一) 技术栈框架:Taro v3.5.1 + React 数据流:redux CSS预处理: SASS 其他库:Taro-UI(目前用到的) 项目初始化 Taro框架搭建参 ...
taro开发微信小程序-播放轨迹(十一)
taro集成了地图后如何实现轨迹播放,暂停,停止呢?本身地图并不具备轨迹播放的能力,但是基于地图api可以实现轨迹播放的效果思路如下: 1.获取所有的轨迹坐标点-最好是数组格式的json 2.定义一 ...
taro开发微信小程序-添加开发者预览,上传测试版本(十四)
taro开发微信小程序,上传测试版本,如果需要访问网络需要打开调试模式,如果配置了https协议的服务,提示对应的服务器证书无效,那么必须正确配置ssl证书,可以在阿里云或者腾讯云申请. 添加开发者预 ...
Taro开发微信小程序遇到的问题和解决方法
Taro开发微信小程序遇到的问题和解决方法参考文章: (1)Taro开发微信小程序遇到的问题和解决方法 (2)https://www.cnblogs.com/wuliujun521/p/114753 ...
taro+vue3 搭建一套框架，适用于微信小程序和H5
这里写taro+vue3 搭建一套框架,适用于微信小程序和H5 Taro+Vue3 搭建适用于微信小程序和 H5 的框架的大致步骤: Taro+Vue3 搭建适用于微信小程序和 H5 的框架的大致步骤 ...
Taro3.x 快速开发微信小程序以及 minidebug 小程序调试工具使用
前言最近公司准备开发一款扫码开票类型的微信小程序,时间紧,任务急.第一反应就是打开小程序开放平台查看开发文档,哦豁,官方的组件也太少了吧,难道要自己手写吗 ? 经过多方调研,了解目前市面上比较流行的 ...
使用VS Code开发微信小程序
使用VS Code开发微信小程序微信开发工具结构缺点 VS Code VS Code 下载插件 Chinese 小程序开发助手 Easy less minapp vscode wxml wech ...
从0到一开发微信小程序（7）—小程序组件库(提高开发效率)
文章目录其他相关文章 1.组件库 1.1.TDesign 引入TDesign 使用 NPM 修改 app.json 使用组件 TDesign的应用 Rate 评分 Sticky 吸顶容器 Toast ...

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

1、安装 Taro 脚手架工具

2、taro 初始化项目

3、项目路由路径

4、全局添加分享功能

5、引导关注公众号

6、获取用户头像/昵称

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

封装的webview组件

相关页面使用时

8、ScrollView视图容器组件

9、数据可视化

10、集成Markdown

使用前配置

封装Markdown文章详情

视图

11、调试打包上传

Taro + React + TS + Taro-UI + ECharts + Markdown 开发微信小程序相关推荐

最新文章

热门文章

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

1、安装 Taro 脚手架工具

2、taro 初始化项目

3、项目路由路径

4、全局添加分享功能

5、引导关注公众号

6、获取用户头像/昵称

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

封装的webview组件

相关页面使用时

8、ScrollView视图容器组件

9、数据可视化

10、集成Markdown

使用前配置

封装Markdown文章详情

视图

11、调试打包上传

Taro + React + TS + Taro-UI + ECharts + Markdown 开发微信小程序相关推荐

最新文章

热门文章

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