1、安裝 Taro 腳手架工具
npm install -g @tarojs/cliyarn global add @tarojs/cli
2、taro 初始化項(xiàng)目
taro init taro-app
安裝 taro-ui
cd taro-appyarn add taro-ui
全局引入taro-ui樣式
import 'taro-ui/dist/style/index.scss'
3、項(xiàng)目路由路徑
-
page對(duì)應(yīng)項(xiàng)目路徑 -
lazyCodeLoading組件按需注入 -
Taro.navigateTo({url: xxx})小程序內(nèi)部跳轉(zhuǎn)
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 是將要會(huì)渲染的頁面
return this.props.children
}
}
5、引導(dǎo)關(guān)注公眾號(hào)
OfficialAccount- 關(guān)注/查看
import { OfficialAccount } from '@tarojs/components'
<OfficialAccount />
視圖
6、獲取用戶頭像/昵稱
-
Taro.getUserProfile獲取用戶的頭像昵稱 -
Taro.setStorageSync存儲(chǔ)信息 相當(dāng)于localStorage.setItem -
Taro.getStorageSync獲取信息 相當(dāng)于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 實(shí)現(xiàn)跳轉(zhuǎn)公眾號(hào)內(nèi)頁
封裝的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()
相關(guān)頁面使用時(shí)
跳轉(zhuǎn)的公眾號(hào)需要是企業(yè)認(rèn)證的，才能配置業(yè)務(wù)域名，個(gè)人公眾號(hào)暫不支持
WebView
handleGridClick(item: itemDTO) {
Taro.navigateTo({ url: `/pages/webview/index?webUrl=${encodeURIComponent(item.url)}` })
}
跳轉(zhuǎn)
8、ScrollView視圖容器組件
-
Taro.getSystemInfoSync()獲取設(shè)備屏幕高度 - 設(shè)置
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、數(shù)據(jù)可視化
- git clone
echarts-for-weixin - 將
ec-canvas拷貝到自己項(xiàng)目中src下 - 需要給
canvas設(shè)置寬高
需要在
index.config.ts聲明ec-canvas組件
export default {
navigationBarTitleText: '前端進(jìn)階技術(shù)棧',
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 中添加以下內(nèi)容
declare namespace JSX {
interface IntrinsicElements {
'ec-canvas': any,
...
}
}
視圖
EChart 相關(guān)文檔
- echarts-for-weixin
- EChart相關(guān)示例
- EChart中options各屬性用法示例
- 定制需要的圖表類型
10、集成Markdown
- git clone
wemark - 將
wemark文件拷貝到自己的項(xiàng)目的src目錄下
使用前配置
設(shè)置編譯時(shí)復(fù)制wemark目錄，修改
config/index.js，在copy設(shè)置項(xiàng)中增加wemark，
copy: {
patterns: [
{
from: 'src/wemark',
to: 'dist/wemark',
},
],
options: {
}
},
設(shè)置taro編譯時(shí)忽略
remarkable.js，繼續(xù)修改config/index.js
weapp: {
compile: {
exclude: [
'src/wemark/remarkable.js',
]
},
...
}
在 global.d.ts 中添加以下內(nèi)容
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 ?? '前端進(jìn)階技術(shù)棧')
})
}, [])
return (
<View className='article'>
<wemark md={markdown} link={true} highlight={true} type='wemark' />
</View>
)
}
export default Article
視圖
11、調(diào)試打包上傳
web端調(diào)試文章來源：http://www.zghlxwxcb.cn/news/detail-441678.html
-
yarn dev:h5web端調(diào)試
微信內(nèi)置 API 需要小程序開發(fā)工具調(diào)試文章來源地址http://www.zghlxwxcb.cn/news/detail-441678.html
yarn build:weapp- 微信開發(fā)者工具 引入
dist文件夾即可
到了這里，關(guān)于Taro + React + TS + Taro-UI + ECharts + Markdown 開發(fā)微信小程序的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
