Taro.js 入门教程#

配置环境与项目初始化#

1. 安装Taro.js#

1
npm install taro -g

2. WebStorm新建项目#

3. Taro init创建Taro项目#

1
taro init <ProjectName> //ProjectName为项目名称

项目介绍随意
框架选择:根据喜好
是否使用TypeScript:根据喜好 (y/n)
CSS预处理器:根据喜好
编译工具 5
包管理工具:根据喜好
模板源:建议Gitee
模板:建议默认模板

4. 安装依赖#

1
cd <ProjectName>
2
cnpm install

5. 修改默认缩进空格数(若本身就为2空格则忽略)#

“项目名/.editorconfig” 文件

1
indent_size = 4

6.安装并启用插件#

安装插件#

控制台:

1
   yarn add @tarojs/plugin-html //允许在weapp中使用html元素的插件
2
   yarn add @tarojs/plugin-less //处理less文件的插件

启用插件#

项目名/config/index.ts

1
const baseConfig: UserConfigExport = {
2
    plugins: [
3
        '@tarojs/plugin-html',
4
        '@tarojs/plugin-less',
5
    ],
6
}

7. 启用CSS Modules#

项目名/config/index.ts

1
const baseConfig: UserConfigExport = {
2
     mini:{
3
         postcss:{
4
              cssModules: {
5
                  enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
6
              }
7
         }
8
     },
9
     h5:{
10
         postcss:{
11
              cssModules: {
12
                  enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
13
              }
14
         }
15
     },
16
     rn: {
17
          appName: 'taroDemo',
18
          postcss: {
19
              cssModules: {
20
                  enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
21
              }
22
          }
23
     }
24
}

8. H5同源问题解决#

项目名/config/index.ts

1
const baseConfig: UserConfigExport = {
2
     h5:{
3
         devServer: {
4
             host: 'localhost',
5
             port: 10086,
6
             proxy: {
7
                 '/api/v1': {
8
                     target: 'http://localhost:1145',  // 服务端地址
9
                     changeOrigin: true
10
                 }
11
             }
12
         },
13
     },
14
}

9. 打包路径配置#

项目名/config/index.ts

1
const baseConfig: UserConfigExport = {
2
    outputRoot: `dist/${process.env.TARO_ENV}`,
3
}

10. 打包与调试#

1
npm run dev:h5 //启动H5端的调试
2
npm run dev:weapp //启动微信小程序端的调试
3
npm run build:h5 //打包构建H5端的项目
4
npm run build:weapp //打包构建微信小程序项目

路由配置#

项目名/src/app.config.ts

1
export default defineAppConfig({
2
    pages: [
3
        'pages/home/home' //page的第一个为主页
4
    ],
5
    window: {
6
        backgroundTextStyle: 'light',
7
        navigationBarBackgroundColor: '#fff',
8
        navigationBarTitleText: 'WeChat',
9
        navigationBarTextStyle: 'black'
10
    }
11
})

其他#

微信小程序Title栏透明化#

pages/xxx.config.ts

1
export default definePageConfig({
2
    navigationStyle: "custom"
3
})