【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/*"],
    }
  }
}
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

-雾里-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值