大纲
复习在react中使用mobx
在taro中如何使用echarts
在taro中如何使用 高德地图微信小程序api
where git
ssh keys
同一台电脑生成两个git账号，gitLab和gitHub账号分开
.gitignore规则
如何查看npm 全局安装的包
JSON.stringify()第二三个参数
vscode中的 => jsconfig.json 和 tsconfig.json
targetWindow.postMessage发送 // window.addEventListener('message')接收

1. 复习在react中使用mobx

1. 依赖安装
- @babel/plugin-proposal-decorators   装饰器插件，proposal是提案的意思
- mobx
- mobx-react



2. 装饰器插件如何配置
- 可以在.babelrc中配置，还可以在package.json中配置
- 在package.json中配置babel配置项
 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [ 
      // plugin是一个数组
      // 具体的每一个插件也可以配成一个数组
      ["@babel/plugin-proposal-decorators", {
        "legacy": true
      }]
    ]
  },



3. 
- 如何建立全局store，以及module的概念
- 如何在组件中注入module，注入后就能在组件中使用module中的action,computed,observable等

// ----------------------------------------------------------------- store/home.js 【就是一个module】
import { observable, action, computed } from 'mobx'
class Home {
    @observable name = 'wang' // 可观测的数据
    @action changeName = (name) => { // action
        this.name = name 
    }
    @computed get getName() { // 计算属性
        return this.name + this.name + 3
    }
}
const home = new Home()
export default home // 实例化后导出

// ----------------------------------------------------------------- store/index.js
import home from './modules/home' // 一个module
const store = {
    home, // 这里导入每一个module到store，导出
}
export default store

// ----------------------------------------------------------------- 入口文件，用mobx-react中的Provider实现context
import { Provider } from 'mobx-react'
import store from './store/index'
ReactDOM.render(
    <Provider {...store} >
        <App />
    </Provider>        
    , document.getElementById('root'));

// ----------------------------------------------------------------- 在组件中注入module
import React from 'react';
import { observable } from 'mobx'
import { observer, inject } from 'mobx-react'


@inject('home') // 注入home这个moduel
@observer // 用mobx-react把组件包装成观察者
class Home extends React.Component {
    @observable count = 0
    changeCount() {
      console.log(1111111111111)
      this.count = this.count + 1
      this.props.home.changeName('zhang')
    }
    componentDidMount() {
      console.log(this.count)
      console.log(this.props.home.name, 'home') // 通过this.props.home获取module中的 name 属性
      console.log(this.props.home.getName, 'computed') // 获取action

    }
    render() {
        return (
            <div className="App">
              <div onClick={this.changeCount.bind(this)}>count++</div>
              <div>{this.count}</div>
              <div>{this.props.home.name}</div>
            </div>
          );
    }
}
export default Home;

全局store https://www.jianshu.com/p/0b500e044911
不同的modules https://blog.csdn.net/qq_40816649/article/details/100656796

2. taro中如何使用 echarts

1. 下载 echarts-for-weixin 项目到本地
2. 复制里面的 ec-canvas 文件夹到你的项目
3. 在你的page中做如下配置
import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'
import * as echarts from '../../ec-canvas/echarts.js' // 引入echarts源码
import './echarts.less'

class Echarts extends Component {
  config = {
    navigationBarTitleText: '首页',
    component: true, // 使用自定义组件
    usingComponents: { // 使用自定义组件
        'ec-canvas': '../../ec-canvas/ec-canvas'
    }
  }
  state = {
    ec: { // 设置ec属性，提供<ec-canvas/>的ec属性消费
        lazyLoad: true
    }
  }
  componentDidMount() {
    this.initChart()
  }
  initChart = () => {
    // 获取ec-canvas的dom 
    // init方法获取回调的各个参数
    this.chartRef.init((canvas, width, height) => {
        console.log(canvas, width, height)
        const chart = echarts.init(canvas, null, { // 初始化echarts实例
            width: width,
            height: height
          })
          // canvas.setChart(chart)
          var option = {.....echarts配置项}
          chart.setOption(option) // 实例配置项
          return chart
    })
  }
  componentWillReceiveProps (nextProps) {
    console.log(this.props, nextProps)
  }
  setChartRef = node => this.chartRef = node    // ref设置
  render () {
    return (
      <View className='echarts'>
        <View><Text>echarts</Text></View>
        <ec-canvas 
            id="canvas"
            canvas-id="canvas_id" 
            ec={this.state.ec}
            ref={this.setChartRef}
        ></ec-canvas>
      </View>
    )
  }
}e'ce'c
export default Echarts


4. echart的一些基本配置
var option = {
        tooltip: {// 提示框,黑色模态框
          show: false, // 是否显示
          trigger: 'item', // 触发类型item axis none，item是饼图，散点图中显示
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: { // 底部的图示说明
          orient: 'horizontal',
          // align: 'top',
          x: '26%',
          y: '80%',
          padding: [20, 0, 0, 0],
          data:['闭眼','急刹车','遮挡物'],
          itemWidth: 18,
          itemHeight: 18,
          selected: { // 图列的选中情况
            '闭眼': true,
            '急刹车': true,
            '遮挡物': true
          }
        },
        title:{
          text: `${Math.floor(Math.random() * 300)}`, // 主标题
          textStyle: { // 主标题样式
            color: '#666666',
            width: 100,
            height: 100,
            fontWeight: 500,
            fontSize: 30,
          },
          subtext: '风险预警',  // 副标题
          subtextStyle: { // 副标题样式
            color: '#989898',
          },     
          itemGap: 6, // 主副标题之间的距离
          textAlign: 'center', // 文字对齐      
          left:"48%", // 整个文字的位置
          top:"42%",
          z: 999,
          // zlevel: 3, // 层级
        },
        series: [
          {
            name:'访问来源', // 用于tooltip时的title等
            type:'pie', // 饼图
            radius: ['40%', '52%'], 
            avoidLabelOverlap: false,
            hoverAnimation: false, // hover时的放大动画是否显示
            label: {
              align: 'left', 
              normal: {
                show: false,
                position: 'outside',
                formatter: '{b}: {c}'
                // formatter: function() {
                //   return '  200 \r\r\n 风险预警'
                // },
                // textStyle: {
                //   fontSize: 20,
                //   color: '#555555'
                // }
              },
              emphasis: { // 点击时候出现的详细内容
                show: true,
                textStyle: {
                  fontSize: '14',
                  fontWeight: 'bold'
                }
              },
            },
            labelLine: { // 连接线
              normal: {
                show: false,
                length: 2, // 第一段链接线的长度
                length2: 2, // 第二段链接线的长度
              }
            },
            data:[
              {value:700, name:'闭眼'},
              {value:200, name:'急刹车'},
              {value:100, name:'遮挡物'},
            ],
            color: [
              '#eecb5f',
              '#e3935d',
              '#e16757'
            ]
          }
        ]
      }

echarts-for-weixin https://github.com/ecomfe/echarts-for-weixin

3. 在taro中如何使用 高德地图微信小程序api

• 注意：在微信小程序中
• 注意：要真机预览地图中能定位的话，需要在公众平台中设置 request
• 在 "设置"－>"开发设置" 中设置 request 合法域名，将 https://restapi.amap.com 中添加进去
• 注意：获取位置信息时，高德给的地理位置小程序的show-location无法显示，需要用微信的wx.getLocation获取数据，在taro中使用Taro.getLocation
• 注意：微信小程序不能导航，因为小程序代码最多是1M，运行内存最多10M
• 注意：cover-view做阴影

(1) 使用高德地图微信小程序api获取数据
1. 获取appkey
2. 下载小程序 sdk
3. 设置安全通信域名  //  "设置"－>"开发设置" 中设置 request 合法域名，将 https://restapi.amap.com 中添加进去
4. 引入amap-wx.js   //  import AmapFile from '@/lib/amap-wx.js'
5. 在componentDidMount()中实例化  // new AmapFile.AMapWX({key})
6. 获取实例上的各种方法获取数据   // myAmapFun.getRegeo(success: res => .....)


(2) 获取位置信息
wx.getLocation   // Taro.getLocation({success: res => ...})然后即可赋值给Map组件的longitude，latitude


(3) 报错 authorize:fail auth deny
- 如果用户拒绝授权后，短期内调用不会出现弹窗，而是直接进入 fail 回调。
- 如果是开发环境，请点击开发工具左侧 缓存-清除授权数据；编译再授权
- 如果是手机，请进入小程序后点击右上菜单-关于xx-右上角菜单-设置中进行权限的手动设置，或删除小程序后重新添加。



(4) 打开地图显示位置
wx.chooseLocation(Object object)

高德for微信api教程： https://lbs.amap.com/api/wx/gettingstarted
show-location显示位置信息： https://blog.csdn.net/weixin_42123532/article/details/82968123
微信小程序如何获取地理位置和进行地图导：https://www.jianshu.com/p/dbe555ad1d8c
打开地图显示位置：https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.chooseLocation.html
cover-view如何做阴影：（coverImage代替）https://juejin.im/post/5b1a104a5188257d9f24c7f9#heading-7

3.1 taro中的动画

import Taro, { Component } from '@tarojs/taro'
import { View, Picker, Text, ScrollView } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import * as echarts from '../../ec-canvas/echarts.js'
import RiskListDialog from './risk-list-dialog/index'

import './riskwaring.scss'

class RiskWaring extends Component {
  state = {
    screenHeight: 0,
    cardTop: 420,
    animationData: {}
  }
  getDate = () => {
    console.log(this.pickDom)
  }

  setRefPicker = (dom) => this.pickDom = dom;
  setBarRef = (dom) => this.barDom = dom;

  touchStart = (e) => {
    const { pageY } = e.changedTouches[0]
    this.setState({
      startPageY: pageY
    })
  }
  onTouchEnd = (e) => {
    // endPargeY 表示触摸结束的y坐标
    // offsetTop 偏移的距离（距离顶部的值）
    const { changedTouches: [{ pageY: endPargeY}], currentTarget: { offsetTop }} = e
    const { startPageY } = this.state
    let animation = Taro.createAnimation({
      duration: 200,
      timingFunction: "ease-in-out",
    })
    endPargeY < startPageY 
      ? animation.translateY(-offsetTop).step() 
      : animation.translateY(0).step()
    this.setState({
      animationData: animation.export()
    })
  }

  render() {
    const { animationData } = this.state
    const styleCard = {
      width: '100%', 
      height: `${screenHeight}px`, 
      background: 'white',
      // position: 'absolute',
      // top: `${cardTop}px`,
      // zIndex: 9999,
      // bacground: 'red'
    }
    const scrollViewStyle = {
      height: `${screenHeight}px`, 
    }
 
    return (
      <View 
        className='risk'
        style={scrollViewStyle}
      >
        <CoverView  
          className="dialogCard" 
          style={styleCard} 
          ref="cardDialog"
          animation={animationData}
          onTouchStart={e => this.touchStart(e)}
          onTouchEnd={e => this.onTouchEnd(e)}
        >
          <RiskListDialog />
        </CoverView>
      </View>
    )
  }
}
export default RiskWaring

4. where git

where git
- where git 命令能够显示 git 的安装路径

5. ssh keys

1. 如何查看是否存在 ssh-keys
- 在c盘用户的主目录下看是否存在 .ssh 文件夹
- 存在.ssh文件夹后，看里面是否存在 (id_rsa) 和 (id_rsa.pub) 文件 
- // id_rsa.pub 就是github或者gitlab需要的ssh-keys
- // 请确保可以浏览隐藏文件
- // 如：C:\Users\Administrator.PC-20191119DSKG\.ssh



2. 如何没有，使用在cmd中输入以下命令
- $ssh-keygen -t rsa -C "youremail@example.com"
- $ssh-keygen -t rsa -C "youremail@example.com" -f ~/.ssh/filename 生成多个ssh-key
// ( !!!!不加-f filename就会覆盖 )
-t 指定密钥类型，默认是 rsa ，可以省略。 // type 类型
-C 设置注释文字，比如邮箱。// commont 注释
-f 指定密钥文件存储文件名。


3. 如果在cmd中输入 ssh-keygen 不是系统内部命令，则需要配置环境变量
- 需要把ssh-keygen所在的文件路径添加到环境变量的 Path 中
- 可以使用 where git 查看git的安装路径
- // C:\Program Files\Git\usr\bin       默认路径

https://www.jianshu.com/p/6dbcbe9fd02e

6. 同一台电脑生成两个git账号，gitLab和gitHub账号分开

同一台电脑生成两个git账号，gitLab和gitHub账号分开


1. 设置golbal和local的user.name和user.email
github:
  git config --global user.name '...' && git config --global user.email '...' 
gitlab:
  git config --local user.name '...' && git config --local user.email '...' 


2. 生成ssh key
github
  ssh-keygen -t rsa -C '...'
gitlab
  ssh-keygen -t rsa -f C:/Users/Administrator.PC-20191119DSKG/.ssh/id_rsa.gitlab -C 'xia.wu@ideacome.com'."

7 .gitignore规则

# 规则说明
# #号：表示git会忽略该行的所有内容，即不生效，相当于注释
#  /:  结尾的斜杠表示 忽略的是 ( 目录 )
#  !:  表示 ( 不忽略 )

# 其他的和正则差不多
#  "*"：  星号匹配零个或多个任意字符
#  []：   匹配任何一个列在方括号中的字符，如[ab]匹配a或者匹配b
#  "?"：  问号匹配零个或者一个任意字符
#  [n-m]：匹配所有在这两个字符范围内的字符，如[0-9]表示匹配所有0到9的数字

https://www.jianshu.com/p/1c74f84e56b4

8. 如何查看npm 全局安装的包

• 全局安装的包
• 本地/远程包版本号

npm list -g --depth 0   查看本地全局安装过的包
npm uninstall -g xxx   卸载本地全局安装包
npm outdated -g --depth=0  查看需要更新的全局包

npm view xxxx versions   查看远程所有版本号
npm view xxxx version     查看远程最新的版本号
npm info xxxx version    查看远程所有版本号
// info是最全面的   有三种命令
// npm info xxxx
// npm info xxxx version
// npm info xxxx versions


npm ls xxxx 查看本地安装的版本号
npm ls xxxx -g 查看全局安装的包的版本号

9. JSON.stringify()第二三个参数

(1) 基本用法
- 如果参数是一个字符串，为了让JSON.parse()得到一个字符串，所以JSON.stringify()会在字符串外面再加一层双引号
- 参数是对象，对象的 ( 属性值 ) 是 ( undefined, function, xml ) 都会被JSON.stringify()过滤
- 参数是数组，数组成员是 （ undefined, function, xml ）会被JSON.stringify()转成 ( null )
- JSON.stringify()会忽略不可遍历的属性，即通过 enumerable 设置的对象
JSON.stringify('abc')  // ""abc""
JSON.stringify([1, "false", false])  // '[1,"false",false]'
var obj = {    // "{}"
  a: undefined,
  b: function () {}
}; 
var arr = [undefined, function () {}];  // "[null,null]"


(2) 第二个参数
- JSON.stringify() 的第二个参数可以是 ( 数组或函数 )
- 数组：指对象参数中，需要转成字符串的key值，相当于数组白名单，注意只对对象参数有效
- 函数：用来更改JSON.stringify的返回值

- 函数：用来更改JSON.stringify的返回值
- 注意递归的是所有的key，如果参数对象嵌套，每一个层都会遍历
- 如果处理函数返回的是undefine或者没有返回值，则该值会被忽略
function f(key, value) { // 第一个参数是参数对象的key值，第二个是value值
  if (typeof value === "number") {
    value = 2 * value;
  }
  return value; // 需要返回value值
}
JSON.stringify({ a: 1, b: 2 }, f)
// '{"a": 2,"b": 4}'


(3) 第三个参数：增加可读性
-JSON.stringify还可以接受第三个参数，用于增加返回的 JSON 字符串的可读性。
- 如果是数字，表示每个属性前面添加的空格（最多不超过10个）；
- 如果是字符串（不超过10个字符），则该字符串会添加在每行前面。




!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 第二个参数的应用  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
const a = {
  add: function() {}, // 函数会直接被忽略掉，那么怎么使函数能不被忽略掉??????
  arr: [undefined, 1], // 数组中的undefined会被转成null
  obj: { name: 'woow-wu', age: undefined}, // 对象中的undefined会被直接忽略掉
}
const string = JSON.stringify(a)
console.log(string);
以上代码转化的结果是： {"arr":[null,1],"obj":{"name":"woow-wu"}}
---
注意：函数被忽略掉了，如何不让JSON.stringify忽略掉函数？用第二个参数可以做到
const string = JSON.stringify(a, function(key, value) {
  if (typeof value === 'function') {
    return `${value}` // 将函数转成一个字符串，可以用eval去执行
  }
  return value
})
结果：{"add":"function() {}","arr":[null,1],"obj":{"name":"woow-wu"}}

(10) vscode中的 => jsconfig.json 和 tsconfig.json

[ vscode中 ]

(1) jsconfig.json
- 目录中存在jsconfig.json文件表示该目录是JavaScript项目的根目录。
- jsconfig.json文件指定根文件和JavaScript语言服务提供的功能选项。
- jsconfig.json源于tsconfig.json，是TypeScript的配置文件。jsconfig.json相当于tsconfig.json的“allowJs”属性设置为true。


(2) jsconfig.json的作用：
  - JavaScript项目是通过jsconfig.json文件定义的。 目录中存在此类文件表示该目录是JavaScript项目的根目录。 
  - 文件本身可以选择列出属于项目的文件，要从项目中排除的文件，以及编译器选项

(3)
- exclude
- include
- Using webpack aliases: 需要指定global模式的 paths

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { // 使 IntelliSense 使用 webpack的别名
      "ClientApp/*": ["./ClientApp/*"]
    }
  }
// import Something from 'ClientApp/foo'
// 或 import Something from '@/foo'

https://segmentfault.com/a/1190000018013282?utm_source=tag-newest

postMessage

• 可以实现跨域信息交互
• 两个web浏览器标签页之间的通信，IFrame通信等
• otherWindow.postMessage(message, targetOrigin, [transfer]);
• 注意：在targetWindow.open()后，要等到目标页面加载完成后才能进行 postMessage 跨域通信，但是在跨域的情况下，无法对目标窗口进行onload监听，所以能用setTimeou延时。对于iframe同理

otherWindow.postMessage(message, targetOrigin, [transfer]);

(1) otherWindow
- otherWindow：其他窗口的一个引用
- 1. iframe 的 contentWindow 属性
- 2. window.open() 返回的窗口对象
- 3. 命名过或数值索引的 window.frames
- 4. 两个窗口之间，a -> b, otherWindow是b窗口； b -> a，otherWindow是a窗口，即 ( top ) 或者 ( parent )。
(2) message
- message：简要发送给其他窗口的数据
- message会被序列化，所以无需自己序列化
! (3) targetOrigin // 一个字符串，可以是 '*'表示无限制
- targetOrigin：通过窗口的origin属性来指定哪些窗口能接收到消息事件
- 在发送消息的时候，如果目标窗口的协议域名端口任意一项不满足 targetOrigin 提供的值，消息就不会发送
- 三者全部匹配才会发送
(4) transfer 
- transfer 是一串和message同时传递的 Transferable 对象. 
- 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。




---------------------------------------------
发消息： otherWindow.postMessage(message, targetOrigin, [transfer]);
收消息： window.addEventListener("message", (data) => receiveMessage(data), false);
- 在接收端的监听函数的参数中，注意：orgin 和 source
- origin: 发送方的协议域名端口组成的字符串
- source: 发送方窗口对象的引用
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
  // For Chrome, the origin property is in the event.originalEvent
  // object. 
  // 这里不准确，chrome没有这个属性
  // var origin = event.origin || event.originalEvent.origin; 
  var origin = event.origin
  if (origin !== "http://example.org:8080")
    return;

  // ...
}



---------------------------------------------
安全问题：
- 当您使用postMessage将数据发送到其他窗口时，始终指定精确的目标origin，而不是*
- 使用origin和source属性验证发件人的身份



---------------------------------------------
代码：
- a页面
function App() {
  var bb = null
  return (
    <div>
      <div>app</div>
      <Home />
      <Profile />
      <div onClick={() => { bb = window.open('http://localhost:3000')}}>a - 打开b的tab</div>
      <div onClick={() => { bb.postMessage('a给b的消息', '*') }}>a - 发送消息给b</div>
    </div>
  )
}

- b页面
  componentDidMount() {
    window.addEventListener('message', (res) => {
      console.log(res) // 注意res中的 origin 和 source
    })
  }

QQ截图20191207225540.jpg

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

https://juejin.im/entry/57d7c8005bbb50005bd0de1e