taro自学笔记：从零开始搞多小程序开发
Author：zhoulujun Date：
跨平台开发
为了更好的实现跨平台开发，Taro 中提供了如下的解决方案
内置环境变量 process.env.TARO_ENV
用于判断当前编译类型，目前有 weapp / swan / alipay / h5 / rn / tt / qq / quickapp 八个取值，可以通过这个变量来书写对应一些不同环境下的代码，在编译时会将不属于当前编译类型的代码去掉，只保留当前编译类型下的代码，例如想在微信小程序和 H5 端分别引用不同资源
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，可以这么写
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 组件的 快应用 版本
四个文件，对外暴露的是统一的接口，它们接受一致的参数，只是内部有针对各自平台的代码实现
import Test from '../../components/test'
<Test argA={1} argA={2} />多端脚本逻辑
例如微信小程序上使用 Taro.setNavigationBarTitle 来设置页面标题，H5 使用 document.title，那么可以封装一个 setTitle 方法来抹平两个平台的差异。
//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 配置如下：
outputRoot: `dist/${process.env.TARO_ENV}`从旧版本迁移到 Taro Next
Taro Next 大部分用法还是和旧版本一样的。更新到 Taro Next 首先需要更新项目依赖：
# 更新 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的版本是
"@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",
现在最新的版本是
"@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