后端上手学习taro跨小程序实现方案

前言

taro是对于需要跨多端小程序，快速实现需求的一种解决方案。而且还可以通过react/vue等框架来实现。在此前又有了React的基础，现在使用taro就更好上手了。就此我们可以不再去额外掌握微信/支付宝/抖音等等等的小程序的原生开发。对只会react的还是比较友好的。此次实操还是只针对微信小程序来实现。

前期工具准备

微信开发者工具

去微信开发文档中下载微信开发者工具，主要在开发中需要用于调试小程序和开发者工具等内容操作，还有一些版本发布和配置等内容。

准备测试账号

去微信小程序申请测试号，主要用于在微信公众平台可以通过登录自己申请的测试号，在微信开发者工具者也可以登录自己的测试号。

taro的配置和相关信息

安装taro快速开始

taro文档：docs.taro.zone/docs/GETTIN...

java 复制代码

// 安装
npm install -g @tarojs/cli

此时有了npm的相关环境变量配置，安装了全局的命令taro即可使用了。

csharp 复制代码

// 初始化项目
taro init {项目名称}

此时在初始化项目的过程中，会遇到选择对应的语言框架，css，打包配置等信息，一一选择完后就会创建成功，此时就可以通过微信开发者工具打开项目。此时你可以通过微信开发者工具进行开发或者通过比较熟悉的可以使用vscode来进行开发。

还有一些常用的编译运行打包测试等命令

arduino 复制代码

// 运行项目，修改taro项目代码实时更新
yarn dev:weapp  
// 压缩打包编译项目
yarn build:weapp

微信开发者工具注意如下设置哦

需要设置关闭 ES6 转 ES5 功能，开启可能报错
需要设置关闭上传代码时样式自动补全，开启可能报错
需要设置关闭代码压缩上传，开启可能报错

项目目录的大致结构

docs.taro.zone/docs/folder

pages ：对应的页面
- index ：首页
- 自定义页面文件夹
app.{后缀} ：对应的项目的总的信息
config：对应的是编译配置

快速创建一个新页面

通过命令快速生成一个页面组件，可以通过指定文件夹名称，生成指定的页面和样式，还有配置文件

lua 复制代码

taro create --name {文件夹名称}

自定义页面的具体文件

xxx.scss : 样式内容
xxx.jsx / xxx.tsx ：组件内容
xxx.config.js ：配置信息

注意：增加一个页面，需要同时在app.config.js 增加一条配置页面路径

vbnet 复制代码

pages: [
    'pages/index/index',
    'pages/xx/index',
  ],

每个页面对应的配置

对应的文档： docs.taro.zone/docs/page-c...

navigationBarTitleText : 导航栏标题文字内容
navigationStyle : 可以设置导航栏为自定义 custom
enablePullDownRefresh : 是否开启下拉自动刷新
onReachBottomDistance : 页面上拉触底事件触发时距页面底部距离，单位为 px

常用的Hook

useLoad : onLoad的生命周期，页面加载一开始
useReady : onReady的生命周期，页面加载完成
useDidShow : 页面显示/切入前台时触发
useDidHide : 页面隐藏/切入后台时触发
useUnload : onUnload的生命周期，页面卸载时候

还有一些其他的hook操作，可以参考文档，docs.taro.zone/docs/hooks ，对应react也有自己一套的hook，也可以自由的配合着使用即可

样式组件库的选择

在样式的选择上，taro封装微信的组件库，可以直接调用。可以直接选择taroui或者京东NutUI是来直接做样式组件库。也许你也可以选择组件更丰富的有赞的vantweapp来做样式的组件库，这个尤其是针对react的版本，强烈推荐 Vant Weapp 社区衍生库 @antmjs/vantui

安装样式依赖

bash 复制代码

npm install @antmjs/vantui

然后通过文档的描述进行按需引入你的组件库内容，然后你测试下引入Button来判断是否引入成功，里面有很多丰富的组件，基本上都有，可以完全引入在二创修改下基本都能满足需求。

针对图标

可以使用阿里的iconfont加入你喜欢的图标内容。

taro有个开源图标的批量引入软件，可以对你的图标进行一个快速的引入使用。github.com/iconfont-cl...

按照里面的步骤，一步一步的按照文档可以实现。会自动在save_dir路径上，使用的时候直接通过 <IconFont name="alipay" /> , name可以通过IconNames选择指定图标

路由的使用

定义tabbar

第一种：可以通过微信小程序定义自定义tabbar，通过文档来实现。可以参照案例来实现，大致的流程步骤如下

下载对应的图标文件images
自定义tabbar组件，定义选中的图标和没被选中的图标
定义app.config.js文件中配置pages和tabbar等相关信息
定义不同页面组件，设置页面被选择时候setSelected的标记

第二种：通过@antmjs/vantui组件库定义，不需要通过路由

通过点击切换不同页面内容, 主要是通过react来渲染页面

xml 复制代码

<View>
  <View>{active==0 ?<Home/>:<My></My>}</View>
  <Tabbar
    active={active}
    onChange={(e) => {
      setActive(e.detail)}

    }
    safeAreaInsetBottom={true}
  >
    <TabbarItem icon="home-o">标签</TabbarItem>
    <TabbarItem icon="search">标签</TabbarItem>
  </Tabbar>
</View>

Taro的小程序页面的路由跳转

跳转路径： Taro.navigateTo ，指定url，同时支持可以传递参数，保留当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
返回页面： Taro.navigateBack , 指定返回数目，关闭当前页面，返回上一页面或多级页面
打开页面：Taro.reLaunch 指定url, 关闭当前页面，返回上一页面或多级页面
重定向页面：Taro.redirectTo

跳转中携带的参数，可以通过Taro.getCurrentInstance().router.params 来获取，注意页面初始化保存Taro.getCurrentInstance()减少调用api结果。

css 复制代码

Taro.navigateTo({ url: '/pages/page/path/name?id=2&type=test#a=1&b=2', })
Taro.navigateBack({delta:数目})
Taro.reLaunch({url:...})
Taro.redirectTo({url:....})

请求封装

跨端请求库的封装，我们通过安装如下依赖

sql 复制代码

yarn add @tarojs/plugin-http
yarn add axios

再通过配置plugin插件

arduino 复制代码

// config/index.js  
config = {  
// ...  
plugins: ['@tarojs/plugin-http'],  
}

此时我们就可以使用axios来做请求数据

小程序分包

微信小程序分包功能，需要在pages下定义分包的moduleA和moduleB，来实现不同的子包。然后再在app.config.js 定义申明。

如果下图是对应的小程序的目录

lua 复制代码

├── config
├── src
|   ├── pages
|   |   └── index
|   ├── moduleA
|   |   └── pages
|   |       ├── rabbit
|   |       └── squirrel
|   ├── moduleB
|   |   └── pages
|   |       ├── pear
|   |       └── pineapple
|   ├── app.css
|   ├── app.json
|   └── app.js
└── package.json

这时我们说明我们分的包有moduleA和moduleB，下面文件夹下有着各自pages，此时再指定independent 字段声明对应分包为独立分包。

json 复制代码

{
  "pages": [
    "pages/index"
  ],
  "subpackages": [
    {
      "root": "pages/moduleA",
      "pages": [
        "rabbit/index",
        "squirrel/index"
      ]
    }, {
      "root": "pages/moduleB",
      "pages": [
        "pear/index",
        "pineapple/index"
      ],
      "independent": true
    }
  ]
}

注意哦，此时你跳转分包的路径也不一样了，如果要跳转到moduleA包下的路径，则路径指定需要增加moduleA这个路径

css 复制代码

Taro.navigateTo({ url: "/pages/moduleA/rabbit/index" })

相关API常用

对应的文档内容路径： docs.taro.zone/docs/apis/a...

判断当前的环境 `Taro.getEnv()`

ini 复制代码

const env = Taro.getEnv();  // WEAPP 微信小程序， ALIPAY 支付宝小程序

提供消息机制 `Event`

javascript 复制代码

const events = new Events()  
  
// 监听一个事件，接受参数  
events.on('eventName', (arg) => {  
// doSth  
})
// 触发一个事件，传参  
events.trigger('eventName', arg)
// 取消监听一个事件  
events.off('eventName'

获取系统的信息 `# Taro.getSystemInfoSync()`

包括屏幕总的/可用的大小，底部的安全区域大小，还有其他有关系统的信息。

ini 复制代码

const systemInfo = Taro.getSystemInfoSync();
systemInfo.screenHeight
systemInfo.windowHeight
systemInfo.safeArea

获取右上角的胶囊按钮的布局信息

用于布局的时候上面导航栏自定义的情况，需要计算胶囊的位置

ini 复制代码

const capsuleInfo = Taro.getMenuButtonBoundingClientRect();
capsuleInfo.top
capsuleInfo.right

设置页面滚动 `Taro.pageScrollTo`

用于操作页面的滚动到指定的元素上

php 复制代码

Taro.pageScrollTo({  
    scrollTop: 0,  
    duration: 300  
})

下载文件 `Taro.downloadFile`

下载当临时文件，不能被写入和修改，只能配合小程序api后续操作

常见的用于场景

播放音频
图片预览
文件上传

如果真的需要可以通过saveFile将其保存

javascript 复制代码

Taro.downloadFile({
  url: 'https://example.com/audio/123', //仅为示例，并非真实的资源
  success: function (res) {
    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
    if (res.statusCode === 200) {
      Taro.playVoice({
        filePath: res.tempFilePath
      })
    }
  }
})

选择图片 `Taro.chooseImage`

从本地相册选择图片或使用相机拍照 , 如果有选择视频的需求，可以使用Taro.chooseMedia/Taro.chooseVideo这两者也可以

javascript 复制代码

Taro.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头
  success: function (res) {
    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
    var tempFilePaths = res.tempFilePaths
  }
})

图片上传 `Taro.uploadFile`

将本地资源上传到服务器 , 临时文件的上传，一般会配合chooseImage一起使用。

Taro.chooseImage({ 复制代码

  success (res) {
    const tempFilePaths = res.tempFilePaths
    Taro.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success (res){
        const data = res.data
        //do something
      }
    })
  }
})

管理缓存 `Storage`

Taro.setStorage将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容.除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用

php 复制代码

Taro.setStorage({
  key:"key",
  data:"value"
})

Taro.getStorage 从本地缓存中异步获取指定 key 的内容

javascript 复制代码

Taro.getStorage({
  key: 'key',
  success: function (res) {
    console.log(res.data)
  }
})

Taro.clearStorage 清除缓存

scss 复制代码

Taro.clearStorage()

获取节点对象实例 `Taro.createSelectorQuery`

返回一个 SelectorQuery 对象实例 , 当我们想从某个节点获取高度位置等信息

javascript 复制代码

const query = Taro.createSelectorQuery()
query.select("#the-id").boundingClientRect().exec((res) => console.log(res, 'res'))

注意：一般配合 useReady使用，在页面加载完成后才能获取到页面DOM节点

taro实战踩坑

不同机型会有对应的底部有安全区域，需要通过调用Taro.getSystemInfoSync() 来进行计算获取得到，一次获取之后可以保存在缓存中，避免后续多次重复调用
有固定页面宽/高，来实现内部滚动，可以使用scrollView ,要注意设置总的宽/高
- 注意设置横向滚动的时候，要对内容进行css设置元素不换行，和display:inline-block 即可
- 设置纵向滚动的时候，需要对页面配置设置为不滚动，disableScroll: true,
在绘制某一部分组件的时候，会时常配置高度或者宽度，需要灵活的应用100%/100vh等信息，然后通过计算calc来计算高度
如果写的代码底部tabbar不是通过路由来实现切换，而是通过点击底部tabbar来实现页面上的组件切换，借助state的是选择性激活，那么要注意切换路由时候，注意首页的一些生命周期内容不会再执行。

后端上手学习taro跨小程序实现方案

前言

前期工具准备

微信开发者工具

准备测试账号

taro的配置和相关信息

安装taro快速开始

微信开发者工具注意如下设置哦

项目目录的大致结构

快速创建一个新页面

每个页面对应的配置

常用的Hook

样式组件库的选择

安装样式依赖

针对图标

路由的使用

定义tabbar

Taro的小程序页面的路由跳转

请求封装

小程序分包

相关API常用

判断当前的环境 Taro.getEnv()

提供消息机制 Event

获取系统的信息 # Taro.getSystemInfoSync()

获取右上角的胶囊按钮的布局信息

设置页面滚动 Taro.pageScrollTo

下载文件 Taro.downloadFile

选择图片 Taro.chooseImage

图片上传 Taro.uploadFile

管理缓存 Storage

获取节点对象实例 Taro.createSelectorQuery

taro实战踩坑

判断当前的环境 `Taro.getEnv()`

提供消息机制 `Event`

获取系统的信息 `# Taro.getSystemInfoSync()`

设置页面滚动 `Taro.pageScrollTo`

下载文件 `Taro.downloadFile`

选择图片 `Taro.chooseImage`

图片上传 `Taro.uploadFile`

管理缓存 `Storage`

获取节点对象实例 `Taro.createSelectorQuery`