Taro/TraoUI框架使用过程中的一些坑

使用Taro-cli创建的项目，install依赖出现sass错误

问题描述
在执行 npm install的时候，有的开发者电脑上会出现sass和Python的错误，具体错误信息如下

问题解决
这是因为没有安装 mirror-config-china的原因（具体请见官网说明），按照下方代码进行安装

$ npm install -g mirror-config-china

依赖安装完成后可以正常执行npm install了，如下图

小程序调试

想在微信开发者工具中也像浏览器一样可以输入路由并加载开发页面为首页，有三种方式：

1. 修改app.js（app.jsx）入口文件，将需要加载为首页的放到最前边（缺点，不能讲分包目录中的页面放到page中当做首页）
2. 在app.js的钩子函数中进行Taro.navigator路由跳转（缺点，在微信开发者工具中总是加载慢或者不跳转）
3. 最好的办法是在微信开发者工具中选择添加编译模式，不管是pages下的页面还是modules中的页面，都可以配置为首页，下图为方法
   
   
   添加编译模式，分别录入模式名称和启动页面即可

page中外层容器高度不是百分百

问题描述
使用taro框架建立页面时，虽然给page的最外层View设置了高度100%，但是还是撑不开
问题解决
这是因为taro的路由区域的容器高度不是百分百，我们只需要给taro的page容器高度设置100%即可，h5的page容器是class为taro_page的div，而小程序的则是名称为page的组件，所以在page的scss中加入以下代码即可

.taro_page, page { height: 100%; }

---

生产环境发现的问题：html，body, #app 高度都不是100%（这个问题貌似跟页面路径有问题，如果是page下的二级目录，比如pages/myOrder/orderDetail/orderdetail.js, 就会出现这种问题，如果是直接是pages/myOrder/myOrder.js就不会有问题），所以如果生产环境页面出问题，首先看路径，如果发现是二级以上目录，且出现了和dev环境展示不一样的情况，请在当前页面的css中添加以下代码

html, body, #app, .taro_page, page { height: 100%; }

编译环境条件渲染（jsx & css）

问题描述
我们在书写页面的时候，有时候会根据不同的编译环境渲染不同的代码，这时候就需要用到条件渲染
问题解决

1. jsx
   在react的jsx语法中，我们通过process.env.TARO_ENVl来判断编译环境，不同的编译环境变量如下（h5, weapp, rn, alipay …）,渲染的时候代码就可以像下边这样

const env = process.env.TARO_ENV; 
return (
 {  env === 'h5' ? <View> h5</View > : <View> else</View >}
 )

再或者，可以通过文件后缀实现不同编译环境下的不同加载，这里以header组件为例，不同环境加载不同的js文件

在其他地方引入的时候，只需要引入不带修饰符的文件路径即可

import Header from '../../header/header

2.css
同样，我们可以使用不同编译环境添加后缀来识别和代码中if渲染
添加后缀方式：
我们可以在同个文件夹下创建不同环境的css，如：

index.scss
index.rn.scss
index.h5.scss

引入的时候只需要按照不带编译环境修饰符的格式引入即可在不同的编译环境下有不同的样式文件

import './index.scss'

另外一种方式，我们可以通过在scss中使用if判断(多个平台之间可以使用空格隔开)

指定平台保留：

/*  #ifdef  %PLATFORM%  (h5, weapp, rn, alipay ...) */
样式代码
/*  #endif  */

指定平台剔除：

/*  #ifndef  %PLATFORM%  (h5, weapp, rn, alipay ...) */
样式代码
/*  #endif  */

使用TaroUI组件 @import样式不好使 / 不能够覆盖样式问题

问题描述
当我们在某个组件中使用TaroUI的组件，在组件的scss中引入（@import）TaroUI组件样式时，小程序端不好使；或者在组件中不能够覆盖taroUI组件的样式，即使使用了!important和高优先级的选择器也不好使具体代码和效果如下（这里以floatLayout组件为例，项目中在一个组件中引用到floatLayout，将css引入和样式覆盖写到这个组件中），h5端是没有问题的，但是到了小程序端样式全部错乱


问题解决
这是因为我们在使用taroUI组件的时候，没有将TaroUI组件样式引入到page页中，而是引入到了我们的自定义组件当中，解决办法就是将所有TaroUI组件的样式全部引入到page页的scss中，并且将需要覆盖的样式写到page页的scss中才会在小程序端生效；
衍生问题
在调试此bug的时候，还发现了一个问题，就是我们使用taroUI的floatLayout组件的时候，将我们的弹窗代码写到FloatLayout中，在h5端组件的HTML嵌套关系是正常的，但是到了小程序端，我们的HTML代码层级就会错乱，这样如果使用scss嵌套书写css的话会出现不生效的bug ---- 在写内部组件样式的时候，尽量单独再嵌套一个自己的容器，将样式代码写到自己容器的class中，不要与TaroUI的类名嵌套，代码如下

Textarea 组件层级穿透问题

问题描述
页面中如果存在Textarea，并且需要某些组件覆盖在Textarea之上，则会出现textarea层级穿透问题：以我的代码为例，当前页面中有input也有textarea，当页面出现弹窗的时候，textarea会穿透当前弹窗显示:

解决办法
在弹窗出现的时候让textarea隐藏（如果你的弹窗完全遮住了textarea）或者用一个View或者Text显示出textarea的value或者placeholder

给容器设置了overflow: auto在小程序端不能滚动

问题解决
小程序端设置overflow auto是不生效的，我们需要使用ScrollView组件来实现，通过传入scrollX和scrollY参数来实现滚动效果