Taro（React）小程序开发基础步骤

检查安装taro

//安装
yarn global add @tarojs/cli

//初始化项目
taro init project_name    //此处安装时候可以选择项目的模板的，选择模板可以向下划，选择taro-ui模板

//安装依赖
cd project_name
yarn

//启动
yarn dev:weapp
//(可配置启动项)
# watch 同时开启压缩
set NODE_ENV=production && taro build --type weapp --watch # CMD
NODE_ENV=production taro build --type weapp --watch # Bash
//dev 模式生成的文件较大，设置环境变量 NODE_ENV 为 production 可以开启压缩，方便预览，但编译速度会下降。

taro项目结构

因为上面在初始化项目的时候选择的是taro-ui模板，所以此处在package.json中可以看到所安装的包

此时，通过yarn dev:weapp即可运行项目，然后打开微信开发者工具（没有的自己去官网下载一个使用），然后新建项目，选择刚才创建的项目，然后填写自己的微信测试号（开发则工具上会提示如何注册使用），然后即可看见启动成功

一般来说，我们还会配置几个底部按钮，代码如下，即在src/app.config.ts文件中添加配置

export default defineAppConfig({
  pages: [
    "pages/index/index",    //此处为页面路由，并未整合，所以如果后续路由比较多，会显得比较杂乱
    "pages/add/index",
    "pages/mine/index",
  ],
  window: {
    backgroundTextStyle: "light",
    navigationBarBackgroundColor: "#fff",
    navigationBarTitleText: "WeChat",
    navigationBarTextStyle: "black",
  },

//tabBar配置，即底部导航栏，最少配置2个，最多不超过5个
  tabBar: {
    list: [
      {
        text: "首页",
        pagePath: "pages/index/index",    //页面路由地址，需要在上面的pages中也添加该路由
        iconPath: "assets/tabbar/home.png",    //底部导航栏图标
        selectedIconPath: "assets/tabbar/home_active.png",    //底部导航栏选中图标
      },
      {
        text: "添加",
        pagePath: "pages/add/index",
        iconPath: "assets/tabbar/add.png",
        selectedIconPath: "assets/tabbar/add_active.png",
      },
      {
        text: "我的",
        pagePath: "pages/mine/index",
        iconPath: "assets/tabbar/customer.png",
        selectedIconPath: "assets/tabbar/customer_active.png",
      },
    ],
  },
});

以上三个路由的页面，就创建最简单的就行

const Index = ()=>{
    return <View>测试测试</View>
}

然后再重新启动编译一下，即可看到

分别点击下面的导航栏可以查看到不同的效果，可以看到顶部的信息为WeChat,此处是因为没有配置，可以在相应的文件夹下添加index.config.js添加配置

export default definePageConfig({
  navigationBarTitleText: 'title name'
})
//也可以在页面中进行配置
Taro.setNavigationBarTitle({
    title: "添加功能",
});

更多的路由跳转api，登录api，等等可以查看官网，有很详细的教程

https://taro-docs.jd.com/docs/apis/about/desc