Taro 如何开始微信小程序的开发(taroui开发小程序)

  • 代码: https://github.com/ikuokuo/start-taro

前提准备

yarn global add @tarojs/cli

创建项目

taro init my-app

输出信息:

 Taro v3.0.16Taro 即将创建一个新项目!Need help? Go and open issue: https://tls.jd.com/taro-issue-helper? 请输入项目介绍!? 请选择框架 React? 是否需要使用 TypeScript ? Yes? 请选择 CSS 预处理器(Sass/Less/Stylus) Sass? 请选择模板源 Gitee(最快)✔ 拉取远程模板仓库成功!? 请选择模板 taro-ui✔ 创建项目: my-app...✔ cd my-app, 执行 git init✔ 安装成功...创建项目 my-app 成功!请进入项目目录 my-app 开始工作吧!

运行程序

微信小程序

下载并打开微信开发者工具,然后导入 my-app 项目:

Taro 如何开始微信小程序的开发(taroui开发小程序)

编译预览:

❯ yarn dev:weappyarn run v1.22.10$ npm run build:weapp -- --watchnpm WARN lifecycle The node binary used for scripts is /var/folders/d3/gg88014s28j41dgh6dznfp7h0000gn/T/yarn--1605187598317-0.7594031278537579/node but npm is using /usr/local/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.> my-app@1.0.0 build:weapp /Users/ikuokuo/start-taro/my-app> taro build --type weapp "--watch" Taro v3.0.16Tips: 预览模式生成的文件较大,设置 NODE_ENV 为 production 可以开启压缩。Example:$ NODE_ENV=production taro build --type weapp --watch生成  工具配置  /Users/ikuokuo/start-taro/my-app/dist/project.config.json编译  发现入口  src/app.ts编译  发现页面  src/pages/index/index.tsx✅  编译成功监听文件修改中...

Taro 如何开始微信小程序的开发(taroui开发小程序)

编译打包:

❯ yarn build:weappyarn run v1.22.10$ taro build --type weapp Taro v3.0.16生成  工具配置  /Users/ikuokuo/start-taro/my-app/dist/project.config.json编译  发现入口  src/app.ts编译  发现页面  src/pages/index/index.tsx✅  编译成功Hash: 3e1757774efcf01a6850Version: webpack 4.42.0Time: 6089msBuilt at: 11/12/2020 9:46:51 PM                           Asset       Size  Chunks             Chunk Names                          app.js     77 KiB       3  [emitted]  app              app.js.LICENSE.txt  500 bytes          [emitted]                        app.json  177 bytes          [emitted]                        app.wxss    0 bytes       3  [emitted]  app                       base.wxml   66.9 KiB          [emitted]                         comp.js   72 bytes       5  [emitted]  comp                       comp.json   54 bytes          [emitted]                       comp.wxml   84 bytes          [emitted]            pages/index/index.js    150 KiB       6  [emitted]  pages/index/indexpages/index/index.js.LICENSE.txt   1.21 KiB          [emitted]          pages/index/index.json   71 bytes          [emitted]          pages/index/index.wxml   82 bytes          [emitted]          pages/index/index.wxss   1.44 KiB       6  [emitted]  pages/index/index                      runtime.js   1.46 KiB       0  [emitted]  runtime                         taro.js   94.4 KiB       1  [emitted]  taro                       utils.wxs  981 bytes          [emitted]                      vendors.js   13.5 KiB       2  [emitted]  vendors          vendors.js.LICENSE.txt  295 bytes          [emitted]Entrypoint app.config = runtime.jsEntrypoint pages/index/index.config = runtime.jsEntrypoint app = runtime.js taro.js vendors.js app.wxss app.jsEntrypoint comp = runtime.js taro.js vendors.js comp.jsEntrypoint pages/index/index = runtime.js taro.js vendors.js pages/index/index.wxss pages/index/index.js✨  Done in 11.08s.

基础教程

根据创建项目时的选择,继续阅读教程。例如本文的选择,请阅读:

  • React
  • Taro UI

参考

  • taro
  • Taro Docs
  • Taro UI

结语

欢迎关注 GoCoding 公众号,分享日常 Coding 中实用的小技巧、小知识!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月9日 下午1:00
下一篇 2024年5月9日 下午1:11

相关推荐

  • 五大项目管理

    五大项目管理: 现代项目管理中的核心概念 项目管理是现代商业中至关重要的一环。在商业活动中,项目涉及到各种不同类型的活动,如建筑、制造、软件开发、市场营销等。为了确保项目的成功,项…

    科研百科 2024年7月14日
    35
  • 安徽医科大学科研项目公示名单(安徽医科大学科研项目公示)

    安徽医科大学科研项目公示 为加强科研项目管理,提高科研水平,安徽医科大学科研管理部门对近期的科研项目进行了公示。本次公示包括了科研项目的名称、负责人、研究内容、研究进度、经费预算等…

    科研百科 2024年4月3日
    83
  • 项目进度管控工具

    项目进度管控工具是项目管理中不可或缺的工具,可以帮助项目经理有效地跟踪项目的进度,确保项目按时完成。本文将介绍一些常见的项目进度管控工具,包括项目管理计划、项目进度表、甘特图、里程…

    科研百科 2024年9月28日
    24
  • 企业车间现场管理的五大基本方法(企业车间现场管理的五大基本方法是什么)

    生产现场管理是制造型企业的管理核心内容,能否实施有效的生产现场管理,是影响企业竞争力的关键因素之一。 生产现场管理的方法与工具,主流的有现场OJT、现场5S管理、现场目视管理、现场…

    科研百科 2022年7月29日
    287
  • 如何夯实基层党建工作基础(如何夯实基层党建工作基础)

    基础不牢,地动山摇。党的基层组织是党执政的组织基础,担负着直接教育党员、管理党员、监督党员和组织群众、宣传群众、凝聚群众、服务群众等重要职责。党的基层组织是确保党的路线方针政策和决…

    科研百科 2023年10月21日
    67
  • 跨域通办!企业登记“通”字诀展现赣榆新作为

    近日,家住连云港市赣榆区的王先生在赣榆区政务服务中心顺利领取其注册地址在日照市岚山区的公司营业执照,这也意味着王先生在无需跨省跑动的情况下完成了企业登记注册。享受到企业登记“苏鲁跨…

    科研百科 2023年10月17日
    123
  • 协同办公软件一线品牌

    协同办公软件一线品牌:提升工作效率的关键 随着数字化时代的到来,协同办公软件已经成为了企业日常运营中不可或缺的一部分。在协同办公软件的选择中,一线品牌已经成为了许多人的首选。本文将…

    科研百科 2025年1月5日
    0
  • 大学生科研项目奖金多少钱大学生科研项目奖金多少钱

    大学生科研项目奖金多少钱 大学生科研项目奖金是许多大学生追求学术成就和职业发展的重要来源。随着科技的发展和教育水平的提高,大学生科研项目的奖金也在逐步增加,但具体的金额仍然因人而异…

    科研百科 2024年7月4日
    35
  • 加州大学13条审核标准

    加州大学13条审核标准 加州大学是美国最知名的大学之一,其学术水平和声誉在全球范围内都享有盛誉。然而,为了保证其学术质量和声誉,加州大学制定了一套严格的审核标准,以确保学生和教师的…

    科研百科 2024年10月28日
    4
  • 档案及合同管理

    档案及合同管理的重要性 档案和合同管理是一个非常重要的工作,涉及到企业和个人的未来发展。一个完善的档案和合同管理程序可以提高企业的信誉和声誉,保护企业和员工的权益,减少纠纷和风险。…

    科研百科 2024年9月24日
    18