近日使用Taro框架的一点小心得

1.yarn npm安装的包，跟权限问题有关，与网络也有关

2.Vue框架首先，是解决了view-model的问题，解放开发的双手，使得显示和数据和控制分开

3.当你觉得最近没有技术文章看时，就看收藏的

4.必须熟悉es6的对象、数组拓展，熟悉观察者模式，熟悉lodash

5.浏览器的图片上传限制,同文件无法触发2次上传，改type为其他，再改回为text即可

6.做静态页面时，绝对不要做交互

7.用after和before在一张图上定位，但是无法突破图的边缘限制，解决方法是，外层套View设置为position:relative，即可把突破定位到img边角上

8.看到设计图不要多想，太考虑细节，若注重数据，就不必在页面上下太多功夫，大部分用组件代替

9.MapReduce: Simplified Data Processing on Large Clusters

10.前端处理数据要不要用后端id，可以斟酌的，可以用用前端的数据索引，如：map的index，可以用后端id，配合find() filter()等

11.计算不一定是后端做，可能也需要终端去分担

12.做一个标题样式(前面带有色块)

    <View className='matchDetails-square'>
                    <View className='matchDetails-squareAfter'></View><View className='matchDetails-title'>主办单位</View>
                </View>

.matchDetails-square{
    position: relative;
    padding: 0 50px
}

.matchDetails-squareAfter{
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: #fee471;
    left: 0;
    bottom: 14px;
}

13.分割线

<View className='recheck-line-cover'>
       <View className='recheck-line'></View>
</View>

.recheck-line-cover{
    overflow: hidden;
    margin: 20px 0
}

.recheck-line{
    width: 100%;
    height: 2px;
    background-color: #E8E8E8
}

14.超出换行并居中

换行居中： flex+ text-align: center+width:80%;

15.注意find和map的区别

find 和 filter 都是不改变原数组的方法，但是find只查出第一个符合条件的结果像例子里是直接返回了一个对象而不是数组！

，而filter返回全部结果仍然是数组。（https://blog.csdn.net/qq_39652441/article/details/79248127）

16.不是所有的框架都很灵活的，因此你可以按部就班的用，需要什么，找到相似的，拷贝过来，你只需要打通你自己的逻辑即可，知道你需要什么

17.小程序不支持PATCH

18.Taro.navigateTo 对应到小程序，是有带左上角返回键的，不能用得太多。aro小程序时，多次redirect会产生错误，导致webview叠加过多，所以改为redirect

19.小程序的radio设置color，不可以用rbg

20.async 会对if产生影响

21.编译为weapp时，margin 会泄露，padding就不会，因此用外层设置padding包裹原来要设margin的标签

22.微服务，dva

23.用&&会导致组件被销毁或并未生成，若想做隐藏，可以用三目运算符代替

24.一定要做无效数据的处理：team&&team.id或team&&team.id?team.id:null

25.使用taro.redirect() 来解决页面缓存，页面后退的问题

26.多端开发的h5还是不太适合微信网页开发，调用微信jssdk还是很麻烦

27.移动端不怕计算，就怕渲染

28.排除bug时，必要时可以改源码

picker的bug：选择后无效

29.mobx比redux更松散

30.组件化调试时，有问题不要先看问题，先看代码规范，例如组件名：大写

31.样式没出来，可能是cssloader的问题

32.只有在scss中的px才会被转换,taro-ui某些组件也支持

33.组件名、组件变量，一定要大写

34.disabled一般为 disbaled="disabled"

35.但当条件变得过于复杂，可能就是提取元素抽象成组件的好时机了。

36.在少数情况下，你需要在常规数据流外强制修改子元素:rels

37.注意，jsx列表渲染和筛选一律用高阶函数：filter map find 等，用 a&&语句和三木运算符代替 if else

38.

所以当调用一些 API 需要传入小程序的页面或者组件实例时，可以直接传入 this.$scope，例如 Taro.createCanvasContext(canvasId, this) 这个 API，第二个参数就是自定义组件实例 this，在 Taro 中就可以如下使用

Taro.createCanvasContext(canvasId, this.$scope)

39.

使从父级传过来的样式生效：

使从父级传过来的样式生效：

父
<CustomComp my-class="red-text" />  

子
 static externalClasses = ['my-class']

 render () {
    return <View className="my-class">这段文本的颜色由组件外的 class 决定</View>
  }

40.使外部css或scss的样式对组件内产生影响，而非组件自己的scss文件的样式

static options = {
    addGlobalClass: true
  }

41.

增加一个 UI 库入口文件
需要在 src 目录下添加 index.js 或者 index.ts 来作为 UI 库的入口文件，用于输出 UI 组件，如果有多个 UI 组件，可以如下书写

export { default as A } from './components/A/A'
export { default as B } from './components/B/B'
这样的话，这个组件库使用起来，会是如下的方式

import { A } from 'taro-ui-sample'

<A />
如果只有 UI 组件，也可以如下书写

import A from './components/A/A'

export default A
这样的话，这个组件库使用起来，会是如下的方式

import A from 'taro-ui-sample'

<A />

41.移动端的交互尽量少

42.写代码不要穿插（待续。。。）

43.后端数据返回，有error：string，就要有code：number搭配，方便给出错误提示和进行错误处理，403，404跳转等等

44.项目运行后出现这个问题：