taro官网:Taro 介绍 | Taro 文档
首先,你需要使用 npm 或者 yarn 全局安装 @tarojs/cli
,或者直接使用 npx:
# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
定义路由
export default defineAppConfig({
pages: [
'pages/index/index',
'pages/my/index',
'pages/list/index',
'pages/order/index',
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
},
})
路由跳转
// 跳转到目的页面,打开新页面
Taro.navigateTo({
url: '/pages/page/path/name',
})
// 跳转到目的页面,在当前页面打开
Taro.redirectTo({
url: '/pages/page/path/name',
})
路由传参
// 传入参数 id=2&type=test
Taro.navigateTo({
url: '/pages/page/path/name?id=2&type=test',
})
定义底部tabBar
export default defineAppConfig({
pages: [
'pages/index/index',
'pages/my/index',
'pages/list/index',
'pages/order/index',
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
},
tabBar: {
list: [
{
pagePath: 'pages/index/index',
text: '首页',
iconPath: 'images/homeIcon.38e684fdba59c557ddb6f49937ba8876.png', // 未选中图标
selectedIconPath: 'images/homeIconActive.575e37d79cf0087f4524225a0e1acec0.png', // 选中图标
},
{
pagePath: 'pages/list/index',
text: '订单',
iconPath: 'images/info.b329a2bd01a1f918596d105a412dd7a2.png', // 未选中图标
selectedIconPath: 'images/orderIconActive.f24cb56e4a1d05a9a564675d4c713dc6.png', // 选中图标
},{
pagePath: 'pages/my/index',
text: '我的',
iconPath: 'images/myIcon.0ed3d3e93002c7a5ee8a3f68687b45f7.png', // 未选中图标
selectedIconPath: 'images/myIconActive.25487663e57872cc469b158e34ae5e0e.png', // 选中图标
},
],
},
})
使用react中的hook
import { useState, useEffect, useMemo } from 'react'
使用redux
import { createStore } from 'redux'
let list={
name:'你们好'
}
function reducer(state = list, action) {
let { type, payload } = action;
if(type=='name'){
state.name=payload;
console.log(state.name);
}
return state;
}
export default createStore(reducer);
请求
import Taro from '@tarojs/taro'
Taro.request({
url: 'http://localhost:8080/test',
data: {
foo: 'foo',
bar: 10
},
header: {
'content-type': 'application/json'
}
})
.then(res => console.log(res.data))
启动项目:npm run dev:h5