评论

taro学习系列一,环境搭建、项目初始化以及项目目录解读

taro学习系列一,环境搭建、项目初始化以及项目目录解读

前言


taro学习系列一,环境搭建、项目初始化以及项目目录解读

今天是学习taro的第一天,具体任务安排是环境搭建、初始化项目以及搭建一个基于taro的hello world微信小程序


taro学习系列一,环境搭建、项目初始化以及项目目录解读

https://developers.weixin.qq.com/community/develop/article/doc/0000ea6afd0b101b3e7a5c75f5b813



安装taro官方文档如下:


1

2

本地安装:

第一步


第一步:检查node版本

node版本检查,如下图所示,当前mac node版本为12.15.0,所以满足taro开发的node最低版本要求

3

第二步



第二步:安装taro,执行的脚本为


cnpm install -g @tarojs/cli



4

第一次执行失败


5

第二次安装尝试

执行的脚本为


sudo cnpm install -g @tarojs/cli



6

输入密码后,开始正常安装taro

安装成功

第三步


第三步:taro安装成功后,查看其版本

taro当前版本号为2.2.6

完美~


项目初始化



项目初始化

2

第一次执行项目初始化,由于权限问题,执行失败


taro init myApp


3


重新执行


sudo taro init myApp




2

初始化完成

2

项目目录结构

3


4

为方便查看每次代码改动,我把该项目在码云上专门维护了一个仓库。

5

编译完成,新生成的文件如下:

通过该截图可以看到taro编译会将taro代码生成微信小程序原生代码,代码存放于根目录的dist里面

编译后生成的文件在dist目录下,该目录结构如下所示,这就很熟悉了

1、app.js

2、app.json

3、app.wxss

4、project.config.json

5

上述json文件格式化后,如下图所示,已经是原生小程序app.json代码了。

6



微信开发者工具中打开

7

一个基于Taro的hello world小程序已搭建完成。


环境及依赖检测


完美~



推荐官方新出的一个初学者课程

https://5ed4d0957668344d67c1df67--taro-docs.netlify.app/taro/docs/next/guide/


8

最后一次编辑于  2020-06-04  
点赞 1
收藏
评论

9 个评论

登录 后发表内容