taro自学笔记：从零开始搞多小程序开发

2023-05-14 22:50:11 浏览数 (2)

跨平台开发

为了更好的实现跨平台开发，Taro 中提供了如下的解决方案

内置环境变量 process.env.TARO_ENV

用于判断当前编译类型，目前有 weapp / swan / alipay / h5 / rn / tt / qq / quickapp 八个取值，可以通过这个变量来书写对应一些不同环境下的代码，在编译时会将不属于当前编译类型的代码去掉，只保留当前编译类型下的代码，例如想在微信小程序和 H5 端分别引用不同资源

代码语言：javascript复制
if (process.env.TARO_ENV === 'weapp') {
  require('path/to/weapp/name')
} else if (process.env.TARO_ENV === 'h5') {
  require('path/to/h5/name')
}
render () {
  return (
    <View>
      {process.env.TARO_ENV === 'weapp' && <ScrollViewWeapp />}
      {process.env.TARO_ENV === 'h5' && <ScrollViewH5 />}
    </View>
  )
}
app.js 中使用不同的 pages

根据不同环境返回不同的 pages，可以这么写

代码语言：javascript复制
let pages = []
if (process.env.TARO_ENV === 'weapp') {
  pages = [
    '/pages/index/index'
  ]
}
if (process.env.TARO_ENV === 'swan') {
  pages = [
    '/pages/indexswan/indexswan'
  ]
}
export default {
  pages
}

多端组件

开发者可以通过将文件修改成 原文件名 端类型 的命名形式，不同端的文件代码对外保持统一接口，而引用的时候仍然是 import 原文件名的文件，Taro 在编译时，会跟根据需要编译平台类型，将加载的文件变更为带有对应端类型文件名的文件，从而达到不同的端加载对应文件的目的。

假如有一个 Test 组件存在微信小程序、百度小程序和 H5 三个不同版本，那么就可以像如下组织代码

  • test.js 文件，这是 Test 组件默认的形式，编译到微信小程序、百度小程序和 H5 三端之外的端使用的版本
  • test.h5.js 文件，这是 Test 组件的 H5 版本
  • test.weapp.js 文件，这是 Test 组件的 微信小程序 版本
  • test.swan.js 文件，这是 Test 组件的 百度小程序 版本
  • test.qq.js 文件，这是 Test 组件的 QQ 小程序 版本
  • test.quickapp.js 文件，这是 Test 组件的 快应用 版本

四个文件，对外暴露的是统一的接口，它们接受一致的参数，只是内部有针对各自平台的代码实现

代码语言：javascript复制
import Test from '../../components/test'
<Test argA={1} argA={2} />
多端脚本逻辑

例如微信小程序上使用 Taro.setNavigationBarTitle 来设置页面标题，H5 使用 document.title，那么可以封装一个 setTitle 方法来抹平两个平台的差异。

代码语言：javascript复制
//set_title.h5.js
export default function setTitle (title) {
  document.title = title
}
// set_title.weapp.js
import Taro from '@tarojs/taro'
export default function setTitle (title) {
  Taro.setNavigationBarTitle({
    title
  })
}
// 调用的时候，如下使用
import setTitle from '../utils/set_title'
setTitle('页面标题')

多端同步调试

，可以在 dist 目录下创建一个与编译的目标平台名同名的目录，并将结果放在这个目录下，例如编译到微信小程序，最终结果是在 dist/weapp 目录下，这样做的好处是，各个平台使用独立的目录互不影响，从而达到多端同步调试的目的，在 config/index.js 配置如下：

代码语言：javascript复制
outputRoot: `dist/${process.env.TARO_ENV}`

从旧版本迁移到 Taro Next

Taro Next 大部分用法还是和旧版本一样的。更新到 Taro Next 首先需要更新项目依赖：

代码语言：javascript复制
# 更新 CLI
$ npm i -g @tarojs/cli@next
# 在项目目录更新项目依赖
$ npm i @tarojs/runtime@next @tarojs/mini-runner@next @tarojs/components@next @tarojs/taro@next
$ npm i react @tarojs/react@next # 如果使用 React
$ npm i nervjs # 如果使用 Nerv
# CLI 命令和以前一模一样
$ taro build --type weapp --watch

区别

类组件 ——属于框架本身的 API 从框架自己的包中引入，其它的 API 仍然从 @tarojs/taro 引入。

  • 旧：import Taro, { Component } from '@tarojs/taro'
  • 新：import React, { Component }  from 'react' // Component 是来自于 React 的 API

问题

taro-ui报错

1、taro-ui TypeError: Super expression must either be null or a function

"@tarojs/taro": "3.3.9"，就会报这个错误 npm i —save taro-ui，会安装2.3.0，就报这个错 使用 npm i —save taro-ui@next，安装 "taro-ui": "^3.0.0-alpha.10"，就不报错了 而且使用2.3.0，按需引入scss，也报错

具体如下：https://github.com/NervJS/taro-ui/issues/1185#issuecomment-937624436

eslint报错

Error: Failed to load plugin '@typescript-eslint/eslint-plugin' declared in '--config » eslint-config-taro/react#overrides[0]': Cannot find module '@typescript-eslint/eslint-plugin' Require stack:

搜索了一下，网上都说，安装这个两个包：

 "@typescript-eslint/eslint-plugin": "^5.0.0",

"@typescript-eslint/parser": "^5.0.0",

实际并没有卵用

解决问题是：降级eslint，从eslint6.8.0，降级到6.1.0

https://github.com/webpack-contrib/eslint-loader/issues/287#issuecomment-547864352

微信小程序中使view占满整个屏幕高度的实现方法

微信小程序中使view占满整个屏幕高度的实现方法 https://blog.csdn.net/houruoyu3/article/details/108363254

@tarojs/taro": "3.3.9对echarts 周边生态不兼容

就是taro-echarts不兼容最新版本的。各种头疼

"techarts": "^3.0.3" 对于demo的版本是

代码语言：javascript复制
"@tarojs/cli": "3.0.7",
"@tarojs/components": "3.0.7",
"@tarojs/react": "3.0.7",
"@tarojs/runtime": "3.0.7",
"@tarojs/taro": "3.0.7",

现在最新的版本是

代码语言：javascript复制
"@babel/runtime": "^7.7.7",
"@tarojs/components": "3.3.9",
"@tarojs/react": "3.3.9",
"@tarojs/runtime": "3.3.9",
"@tarojs/taro": "3.3.9",

最的新版本，techarts 图表不展示

换成 echarts-for-taro3 还是报错

taro3.0.7与3.3.9最新版的坑爹之处

在3.0.7 ，如要想运行h5成功，则需要在组件中导入React （react实际没有用，而eslint报错)

import React, { Component } from "react";

在最新版本的3.3.9，则不需要

import { Component } from "react";

转载本站文章《taro自学笔记：从零开始搞多小程序开发》, 请注明出处：https://www.zhoulujun.cn/html/webfront/AppDev/taro/8686.html

taro 微信小程序

0 人点赞