前言
如果你对之前的Taro小程序框架有了一定的了解,那么接下来学习,就相当于是一次实战,如果还不太了解,建议还是先回去看一下文档,毕竟有些东西,官方出的文档全面得多,下面介绍如何创建taro小程序项目.
先介绍官方项目Demo创建
在创建之前,请大家自行安装配置好npm模块,此处,强烈建议大家使用yarn工具.好处多多,具体请参考点击链接查看.以下教程默认你已配置好环境.
1.安装Taro依赖
# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli
注意:如若安装过程出现了sass异常,请自行安装以下操作,如无,可忽略
$ npm install -g mirror-config-china
2. 初始化项目
$ taro init myApp //初始化项目,如下图所示
创建项目,会自动给我们加上git操作,以及初始化,非常方便
3.梳理目录结构
config目录 -----> 主要存放项目内部的一些配置,
dev.js----> 经常用于配置类似BASE_URL这种全局字段,用于开发阶段,区别于prod index.js---->项目的设计稿,名称以及配置多个编译模块如H5,weapp等 prod.js------>经常用于配置类似BASE_URL这种全局字段,用于上线阶段,区别于devsrc目录 -----> 存放源码的地方
action目录 ------->填写公共方法,操作 constants目录 -------> 用于存放常量文件 pages目录-------> 页面放置的目录 reducers目录------->存放一些方法,用于数据处理和传递 store目录-------> 数据处理文件 app.scss-------> 存放全局样式,适合抽取相同样式,如button等 app.tsx-------> APP页面入口的配置基本都在这里,如微信小程序的超时时间配置等 index.html-------> APP页面入口global.d.ts ------> 配置项
package.json ------> 配置依赖和一些命令
project.config.json ---->配置小程序的APPID,还有一些快捷入口等
tsconfig.json -----> ts模板语法的一些配置
至于其他一些.editorconfig和.eslintrc以及.gitignore都是一些配置文件.与本项目无关,和个人使用的习惯有关, 如统一使用单双引号的设置等. 当然, 可能真实的项目,还可能有其他的模块,比如component目录,用于存放自定义组件等,apis模块,用于接口请求,common模块,存放公共工具类等
值得我们注意的是,我们使用taro框架生成的代码,在经过编译转换成小程序代码之后,和源码不一样,而且和微信小程序的原生代码也不一样, 所以我们需要找异常信息时,需要先找对应编译后的代码,再找到对应源码位置才能定位到错误.
4.理解Taro框架转换代码概念
说实话,我没想到有一些同学对这个转换代码概念产生歧义,这里我给大家简单的解释一下.taro框架主要是为了解决一套代码多端共用的问题, 也就是说,一套代码作用于多个代码, 所有的适配和兼容操作,都在这一套代码中进行,只不过是通过环境判断执行对应代码罢了.而不是在生成的代码中修改. 甚至有人问我,生成代码之后, 每个生成的代码和之前不一样,怎么处理?是解决冲突合并吗?那工作量岂不是很大吗?这就是典型的没有明白转换代码概念.
//环境判断
switch (Taro.getEnv()) {
//以主流三家小程序为例
case Taro.ENV_TYPE.WEAPP:
//干微信支持的事情
break;
case Taro.ENV_TYPE.ALIPAY:
//干支付宝支持的事情
break;
case Taro.ENV_TYPE.SWAN:
//干百度支持的事情
break;
}
关于小程序开发,个人的一些建议(纯属个人一些经验分享)
-
小程序的表单提交,经常会涉及到一些数据判断, 如判空或者判非法等,都需要配置, 而不是用java的思维,直接判断.需要通过一些配置,可直接达到目的,也是一种标准的js写法, 非常建议学习这种做法.
-
关于数据请求,为了统一管理, 所有请求方法都应该放在一个文件中,把网络请求进行封装后, 所有处理都应该走一个入口,方便统一信息返回处理
-
由于微信对小程序限制了大小, 建议所有的图片都放在服务器进行远程访问
-
关于调试,如果开发和测试不在一个地方, 可以使用远程真机调试开发查看数据,测试操作界面. (适用于可能测试有设备,开发没有设备,我个人亲身经历). 调试人员需要有权限访问小程序,可能需要小程序后台添加测试人员的微信.
-
强烈建议搞懂小程序文档中的三个id, AppId,openId,UnionId.并弄清楚小程序登录机制
-
巧用open-data标签获取用户信息,但只能作为展示使用. 不能操作数据.若想操作数据, 还得openId.
-
关于小程序适配问题, 由于Taro框架能够支持一套代码转换多个端源码,但可能在适配和兼容上就没有那么理想了, 思路是,先转换到对应小程序端的源码,执行看效果,如果发现某些功能无法执行,可能是因为适配原因,建议是通过环境判断对应平台,对**特殊的平台(如支付宝等)**API进行适配,可在对应特殊平台官方文档中查找API.
-
在兼容性方面, Taro对标微信小程序, 也就是说Taro框架的所有适配都是优先于微信小程序,毕竟微信小程序是第一个被行业内公认的, 这样也就造成了其他端的小程序需要验证,兼容以及适配.
-
查询API使用,顺序是先从Taro查询是否支持对应API,然后在查对应平台API. 其实我想讲一种情况,就是当微信出现了新的API, 但是Taro还没有同步到,这种情况应该如何处理呢?这种情况,可以直接使用对应平台的关键字调用即可.如例子所示(以微信小程序为例):
//使用之前应该先判断是否是对应平台 wx.request({ //假设是这个方法 //那么问题来了, 有人想说,这个写了不是报错了吗?对的,报错无所谓, 能够执行就行了. //因为编译完成后, 在微信平台依然是可以被识别到的. }) -
Taro版本问题导致编译生成的小程序源码在微信开发者工具中会弹出各种各样的错误问题.举个我亲身经历的例子, 在之前的电脑上编译毫无差错,我换了一台电脑,然后就各种报错,怎么都弄不好,经过多次比对两边环境的版本,才发现,使用了新的库版本会出现一些不兼容的问题, 我在新电脑上安装的是新版本的Taro库,但是在旧电脑上使用的是旧版本,所以我卸载了新版本, 然后安装旧版本, 重新编译,发现成功了.这个问题是一个好例子,非常直观的说明了,前端对于版本的升级,是非常敏感的, 因为版本的迭代,可能很多写法和兼容都存在差异, 所以大家在升级某一个库的时候,如果不是特别了解, 最好对应适配与它相关联的版本.