微信小程序Taro框架搭建和使用

1,822 阅读6分钟

一、Taro脚手架搭建

1、版本要求

Taro目前已经是3.x以上版本,本人在搭建时使用了3.1.1版本。从使用效果看,并没有发现版本问题或兼容性问题,推荐使用。使用3.x以上需要node版本在12.0.0以上,本人使用了14.9.0的node版本

2、安装步骤

  • 首先安装@tarojs/cli工具

安装脚本如下:

Bash收起

# 使用 npm 安装 CLI$ npm install -g @tarojs/cli# OR 使用 yarn 安装 CLI$ yarn global add @tarojs/cli# OR 安装了 cnpm,使用 cnpm 安装 CLI$ cnpm install -g @tarojs/cli
  • 使用taro命令初始化项目

$ taro init myApp

taro init myApp command screenshot

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

使用 yarn 安装依赖

$ yarn

或使用 cnpm 安装依赖

$ cnpm install

或使用 npm 安装依赖

$ npm install进入项目目录开始开发,目前已经支持 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序、H5 等端的代码转换,针对不同端的启动以及预览、打包方式并不一致

  • 启动项目

本人是用taro开发微信小程序,所以启动只需要使用微信小程序启动命令即可。但是一般不会输入启动命令直接启动,而是把命令集成在package.json的script脚本中,后面会详细介绍启动脚本

3、查看版本信息

$ taro info

二、启动脚本优化

如果只是单纯启动项目,那么只需要写taro启动命令就可以了。但很多逻辑也需要在启动的同时设定,比如判断是否为测试环境,比如打测试包或线上包时appid的指定等

1、判断测试环境

通过node里的环境变量判断,即process.env.NODE_ENV。本地开发使用taro build --type weapp --watch启动,process.env.NODE_ENV值为development(taro判断如果启动命令有--watch,NODE_ENV就为development),测试环境和线上打包使用taro build --type weapp启动,process.env.NODE_ENV为production。问题来了,测试环境和线上的启动命令一致,测试环境怎么判断。

解法:安装cross-env,在启动阶段,指定当前环境

cross-env的作用就是在process.env中添加自己定义的参数和参数值。比如在进宝分销小程序中,就是添加了PROJECT_ENV参数。命令添加完参数后,还要在小程序config/index.js下引入该参数

在使用后端接口判断使用测试环境域名还是线上域名时,就可以使用PROJECT_ENV参数进行判断

2、动态配置小程序appid

开发小程序另一个比较麻烦的地方,就是每次打包发布线上,都要切换为线上的appid。如果忘记了,或者切错了,就可能出现测试环境代码误发到线上的情况。人工操作费力易出问题,就考虑可以在启动脚本中动态修改。当然这也是建立在已经能成功判断是否为测试环境的前提下。

脚本大致逻辑,判断当前打包环境是否为线上,如果为线上,就使用Node的fs模块读取并修改appid属性。脚本如下:

三、辅助工具

1、开启css module

2、设置设计稿和屏幕显示比例

Taro 默认以 750px 作为换算尺寸标准,如果设计稿不是以 750px 为标准,则需要在项目配置 config/index.js 中进行设置,例如设计稿尺寸是 640px,则需要修改项目配置 config/index.js 中的 designWidth 配置为 640:

/config/index.js

const config = {

projectName: 'myProject',

date: '2018-4-18',

designWidth: 640,

....

}

目前 Taro 支持 750、 640 、 828 三种尺寸设计稿,他们的换算规则如下:

const DEVICE_RATIO = {

'640': 2.34 / 2,

'750': 1,

'828': 1.81 / 2

}

建议使用 Taro 时,设计稿以 iPhone 6 750px 作为设计尺寸标准。

如果你的设计稿是 375 ,不在以上三种之中,那么你需要把 designWidth 配置为 375,同时在 DEVICE_RATIO 中添加换算规则如下:

const DEVICE_RATIO = {

'640': 2.34 / 2,

'750': 1,

'828': 1.81 / 2,

'375': 1 / 2

}

3、设置相对路径

用于配置目录别名,从而方便书写代码引用路径。

例如,使用相对路径书写文件引用如下:

import A from '../../componnets/A'

import Utils from '../../utils'

import packageJson from '../../package.json'

import projectConfig from '../../project.config.json'

为了避免书写多级相对路径,我们可以如下配置 alias:

通过上述配置,可以将 src/components 和 src/utils 目录配置成别名,将根目录下的 package.json 和 project.config.json 文件配置成别名,则代码中的引用改写如下:

import A from '@/components/A'

import Utils from '@/utils'

import packageJson from '@/package'

import projectConfig from '@/project'

为了让编辑器(VS Code)不报错,并继续使用自动路径补全的功能,需要在项目根目录下的 jsconfig.json 或者 tsconfig.json 中配置 paths 让编辑器认得我们的别名,形式如下:

{

"compilerOptions": {

"baseUrl": ".",

"paths": {

"@/components/*": ["./src/components/*"],

"@/utils/*": ["./src/utils/*"],

"@/package": ["./package.json"],

"@/project": ["./project.config.json"],

}

}

}

建议别名使用 @/ 开头而非仅用 @ 开头,因为有小概率会与某些 scoped 形式的 npm 包(形如:@tarojs/taro, @babel/core)产生命名冲突。

4、源设置

.npmrc和.yarnrc中设置

四、初始化参数

1、获取跳转参数

小程序可以通过二维码或者url点击打开。后端在生成的二维码或者跳转链接时,可以携带参数,也就是初始化参数。

获取初始化参数,就需要借用taro的一个应用级生命周期函数componentDidShow,其实能得到初始化参数的生命周期函数不止一个,还有onLaunch函数。但是不建议在onLaunch函数中获取,因为onLaunch只在小程序初始化的时候运行,当小程序已经初始化过了,隐藏在小程序后台,再通过我的小程序打开时不会运行。如果有参数变化就无法获取

还有一点值得注意,通过二维码扫码和url点击跳转,参数是不一样的。同样在componentDidShow函数中,假设参数名叫params,通过二维码扫码,参数是params.query.scene中,通过url点击跳转,参数是params.query中。为了统一,我们统一处理下,都放在了全局变量appParams中,代码如下:

2、获取自定义navigationBar必要值

有些时候,我们需要定制化的顶部导航栏,比如在制作沉浸式页面的时候。自定义navigationBar的方法很简单。

在自定义小程序的navigationBar时,经常会遇到不同手机需要的navigationBar高度不一致的问题,不能写死。要动态获取高度。wx提供了safearea的方法,但不是很好用,在低版本苹果机的表现很不好。所以这里我还是推荐使用getSystemInfoSync以及getMenuButtonBoundingClientRect方法,获取手机顶部状态栏高度,以及小程序右上角的菜单按钮位置信息,综合计算得到

计算方法:

navigationBar的高度 = 蓝色框高度 * 2 + 菜单按钮高度

推荐在小程序onLaunch函数内执行,即首次初始化的时候执行,避免重复执行,代码如下:

tips: 写样式的时候,注意小程序的盒模型是content-box,即高度不包括padding html样式如下:

五、总结

至此,一个应用级的taro项目基本搭建完成。剩下的就是业务代码的填充。小程序发展非常迅速,也有很多地方存在“坑”。比如input组件输入时的抖动问题。但是总的来说,坑已经越来越少了。有了taro的帮助,让已经习惯了react或者vue框架开发的同学,上手小程序开发不再那么“难受”!希望大家在taro项目使用的过程中多提意见,共同成长~