taro基础使用

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