taro自学笔记：从零开始搞多小程序开发
原创
跨平台开发
为了更好的实现跨平台开发，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
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。