【Taro开发】-初始化项目（一）

Taro小程序开发

系列文章的所有文章的目录

【Taro开发】-初始化项目（一）

【Taro开发】-路由传参及页面事件调用（二）

【Taro开发】-taro-ui（三）

【Taro开发】-带token网络请求封装（四）

【Taro开发】-自定义导航栏NavBar（五）

【Taro开发】-formData图片上传组件（六）

【Taro开发】-封装Form表单组件和表单检验（七）

【Taro开发】-tabs标签页及子组件的下拉刷新（八）

【Taro开发】-简易的checkBoxGroup组件（九）

【Taro开发】-页面生成二维码及保存到本地（十）

【Taro开发】-宣传海报，实现canvas实现圆角画布/图片拼接二维码并保存（十一）

【Taro开发】-分享给好友/朋友圈（十二）

【Taro开发】-小程序自动打包上传并生成预览二维码（十三）

【Taro开发】-全局自定义导航栏适配消息通知框位置及其他问题（十四）

---

---

前言

基于Taro的微信小程序开发，主要组件库为Taro-ui
Taro-ui：基于 Taro 开发 UI 组件
一套组件可以在 微信小程序，支付宝小程序，百度小程序，H5 多端适配运行（ReactNative 端暂不支持）
提供友好的 API，可灵活的使用组件

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、初始化

1. 使用yarn/npm安装脚手架

//yarn/node需提前安装
npm install -g @tarojs/cli
yarn global add @tarojs/cli

2. 创建模版

taro init myApp
//根据提示选择相应框架即可，会自动安装依赖

3. 编译启动

cd myApp
npm run dev:h5/weapp/alipay/swan/rn
yarn dev:h5/...
//生成的编译文件在根目录/dist文件下，用相应开发工具打开即可

二、配置

1.h5端修改服务路径

/config/index.js
h5:{
  devServer:{port:4563,host:"localhost"},
    ....
}

2.多端调试

/config/index.js
outputRoot: `dist/${process.env.TARO_ENV}`
//编译生成的文件位于dist下，以各端环境命名h5/weapp/...

对于微信小程序，还需要将project.config.json文件的miniprogramRoot 的值改为 dist/weapp/，这样就可以正常在开发者工具中看到小程序了。

3.alias别名设置

config/index.js
*如果报错：const path = require('path')
const config = {
    ………
     alias: {
        '@/components': path.resolve(__dirname, '..', 'src/components'),
        '@/utils': path.resolve(__dirname, '..', 'src/utils'),
        '@/assets': path.resolve(__dirname, '..', 'src/assets'),
      },
    ………
 }
根目录的jsconfig.json/tsconfig.json//没有时自行创建
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["./src/components/*"],
      "@/utils/*": ["./src/utils/*"],
      "@/assets/*": ["./src/assets/*"],
    }
  }
}