快速上手小程序框架Taro,安装及使用教程(一)

简介: 快速上手小程序框架Taro,安装及使用教程(一)

前言:

这个小程序框架已经出现了很久了,而且自从微信小程序出现之后,流心观察都可以发现,百度小程序,支付宝小程序,字节跳动小程序,QQ 小程序,京东小程序也越来越多,也越来越有用了。所以,掌握一个多端统一开发解决方案是一个很重要的事情。


介绍:

Taro 是由京东 - 凹凸实验室打造的一套开放式跨端跨框架解决方案。支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5 等应用。


步骤

Taro 项目基于 node,请确保已具备较新的 node 环境(>=12.0.0)

检查node 版本

1:安装node

端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/en/,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错。


2:查看node的版本号

下载好node之后,以管理员身份打开cmd管理工具,,输入 node -v ,回车,查看node版本号,出现版本号则说明安装成功。

输入命令: node -v

3:安装

CLI 工具安装,打开cmd,右键以管理员身份运行

cnpm install -g @tarojs/cli

4:项目初始化

使用命令创建模板项目

先进入d盘,然后执行创建命令

taro init myApp

然后一路回车键(如果你不想使用TypeScript的话,可以在是否需要使用 TypeScript的这一行里面选择No)

在创建完项目之后,Taro 会默认开始安装项目所需要的依赖,安装使用的工具按照 yarn>cnpm>npm 顺序进行检测,一般来说,依赖安装会比较顺利,但某些情况下可能会安装失败,这时候你可以在项目目录下自己使用安装命令进行安装

打开D盘查看一下吧,可以看见新建的项目目录和自动安装的依赖,我这里是成功的哟。

如果依赖没有自动安装成功,那就手动输入一下,我一般习惯使用这个命令cnpm install

5:运行


接下来的操作就是运行一下啦,Taro 需要运行不同的命令,将 Taro 代码编译成不同端的代码,然后在对应的开发工具中查看效果。

我这里是编译成微信小程序微信小程序编译预览及打包,要使用的命令,是这个样子的:

$ npm run dev:weapp
$ npm run build:weapp

首先cd进入了我的项目里面,然后运行

这里就成功的看到了

如果你要编译成, 百度小程序,支付宝小程序,字节跳动小程序,QQ 小程序,京东小程序,可以直接去官方给的文档上查看一下命令哟

相关文章
|
14天前
|
存储 监控 小程序
TP6+Uni-app框架下,圈子系统小程序的快速上线开发步骤
社交圈子系统多端运营级应用,融合了推荐匹配、语音聊天、IM即时通讯、动态发布、一键约聊、同城交友、附近的人、充值提现、邀请推广等功能,为平台运营提供更多的盈利变现方式。程序源码开源,支持二次开发,根据客户不同应用场景需求,定制个性化解决方案。
44 9
|
8天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
2月前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
4月前
|
XML 小程序 前端开发
小程序制作教程
小程序制作教程
113 3
小程序制作教程
|
5月前
|
小程序 JavaScript 前端开发
小程序常见的UI框架
小程序常见的UI框架
361 60
|
4月前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
205 2
|
5月前
|
小程序 JavaScript 前端开发
微信小程序安装和使用 Vant Weapp 组件库
本文介绍了如何在微信小程序中安装和使用Vant Weapp组件库,包括通过npm安装、构建npm、修改配置文件以及在小程序中使用Vant Weapp提供的组件。
微信小程序安装和使用 Vant Weapp 组件库
|
6月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
本文介绍了Taro中`useShareAppMessage`的使用方法,需在页面配置`enableShareAppMessage: true`并重新编译。
194 0
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
|
6月前
|
小程序 数据安全/隐私保护
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
在 `src/http` 目录下创建 `request.ts` 文件,并配置 Taro 的网络请求方法 `Taro.request`,支持多种 HTTP 方法并处理数据加密。
219 0
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
|
6月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件
本文介绍如何在Taro项目中使用Nut UI的`<nut-uploader/>`组件实现图片上传功能,并通过示例代码展示了自定义上传逻辑的方法。
159 0
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件