Element-ui官网给的方法

getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); },

这种只有在所有子级都被选中的情况下才能获得父级的id，如果不选中所有的子级那么获取得到的id就只有子级的。但是一般提交数据时后台都需要父级id的。

1.找到node_modules/element-ui/lib/element-ui.common.js文件

2.按Ctrl+F搜索TreeStore.prototype.getCheckedKeys这个方法

3.把if(node.checked)改为if (node.checked||node.indeterminate)

#小程序如果less转wxss
如果写成普通 ,会转换失效

.div{
    height: calc(100% - 100rpx);
}

正确的写法

@aaa : 100rpx;
.div{
    height: calc(~"100% - "@aaa);
}

vue的less写法，后面加个/no/，不转换成rem

.div{
        height: calc(100% - 100px);/*no*/
    }

ESLint

不管是多人合作还是个人项目，代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。这所谓工欲善其事，必先利其器，个人推荐 eslint+vscode 来写 vue，绝对有种飞一般的感觉。效果如图：

每次保存，vscode就能标红不符合eslint规则的地方，同时还会做一些简单的自我修正。安装步骤如下：

首先安装eslint插件

安装并配置完成 ESLint 后，我们继续回到 VSCode 进行扩展设置，依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件,添加如下配置

{
"files.autoSave":"off",
"eslint.validate": [
   "javascript",
   "javascriptreact",
   "html",
   { "language": "vue", "autoFix": true }
 ],
 "eslint.options": {
    "plugins": ["html"]
 }，
 "eslint.autoFixOnSave": true,
}

这样每次保存的时候就可以根据根目录下.eslintrc.js你配置的eslint规则来检查和做一些简单的fix。

本文转载至PanJiaChen博客

很坑阿
在vue里面使用jssdk

根据业务场景

1. 首先拿到code
2. 把code发给后端，解析出openId和accessToken
3. 接着把当前页面网址发给后端，申请jsSDK的配置签名
4. 拿到之后再前端配置wx.config
5. 再调用jssdk相关方法

安装jssdk:
npm install weixin-js-sdk --save-dev

只展示部分重要代码

在permission.js文件里 跳转路由的钩子事件里 router.beforeEach

1. 首先拿到code

const openCode = getQueryString('code') ? getQueryString('code') : ''

2. 把code发给后端，解析出openId和accessToken

const tokenPromisr = new Promise((resolve, reject) => {
    checkOpenId({ openCode }).then(res => {
      resolve()
    }).catch(error => {
      reject(error)
    })
  })

3. 接着把当前页面网址发给后端，申请jsSDK的配置签名

**用Promise是因为要等拿到accessToken了再继续**

    tokenPromisr.then(() => {
        jsSDK({
          url
        }).then(res => {
          wechatConfig(res.data)
        })
      })

4. 拿到之后再前端配置wx.config

**暂时只用了分享和支付的权限**

    export function wechatConfig(config) {
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: config.appId, // 必填，公众号的唯一标识
            timestamp: config.timeStamp, // 必填，生成签名的时间戳
            nonceStr: config.nonceStr, // 必填，生成签名的随机串
            signature: config.signature, // 必填，签名，见附录1
            jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          })
        }

5. 接着需要的页面里面去使用 我在首页用了分享 还有在支付页面用了支付

分享

export function groupWechatShare(data, cb, errorCb) {
  const img = data.pictureKeys ? data.pictureKeys[0] : ''
  const wechatState = store.getters.wechatState
  const SHARE_URL = process.env.SHARE_URL
  const IMG_URL = process.env.IMG_URL
  wx.ready(function() {
    // 分享到朋友圈
    wx.onMenuShareTimeline({
      title: data.goodsName, // 分享标题
      link: SHARE_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: IMG_URL + img, // 分享图标
      success: function(res) {
        // 用户确认分享后执行的回调函数
        // cb(res)
      },
      cancel: function(res) {
        // 用户取消分享后执行的回调函数
        // errorCb(res)
      }
    })
    // 分享给朋友
    wx.onMenuShareAppMessage({
      title: data.goodsName, // 分享标题
      desc: '邀请您一起拼团啊', // 分享描述
      link: SHARE_URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: IMG_URL + img, // 分享图标
      type: '', // 分享类型,music、video或link，不填默认为link
      dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
      success: function(res) {
        // 用户确认分享后执行的回调函数
        // cb(res)
      },
      cancel: function(res) {
        // 用户取消分享后执行的回调函数
        // errorCb(res)
      }
    })
  })
}

支付

export function wexinPay(data, cb, errorCb) {
  wx.ready(function() {
    wx.chooseWXPay({
      timestamp: parseInt(data.timeStamp), // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
      nonceStr: data.nonce_str, // 支付签名随机串，不长于 32 位
      package: 'prepay_id=' + data.prepay_id, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
      signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
      paySign: data.paySign, // 支付签名
      success: function(res) {
        // 支付成功后的回调函数
        cb(res)
      },
      fail: function(res) {
        errorCb(res)
      }
    })
  })
  wx.error(function(res) {
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    /* alert("config信息验证失败");*/
  })
}

坑的地方

1. 注意大小写参数 timestamp类似这种写成timeStamp 曾经卡了好几个小时都没检查出来
2. 获取jssdk配置的url 一定要写成 const url = window.location.href.split('#')[0]
3. 配置要配置好 支付目录 js安全目录什么的 杂七杂八的
4. timestamp一定是int类型，后端如果反的string类型的，前端就会报错 调用支付JSAPI缺少参数：sign

什么是Vuex

Vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。

数据丢失

大家在使用Vuex的时候只要浏览器一刷新，Vuex数据就丢失，每次还要手动存在本地缓存里面很不方便，今天找了一下，发现有个小插件可以保持Vuex的持久性

原理大家都懂，就是存localStorage.用法

vuex-persistedstate

vuex-persistedstate 使用浏览器的本地存储（ local storage ）对状态（ state ）进行持久化。这意味着刷新页面或关闭标签页都不会删除你的数据。

vuex-persistedstate GitHub 地址

首先安装

npm install vuex-persistedstate --save

在store文件夹的index.js引入

import createPersistedState from 'vuex-persistedstate'

初始化vuex 加入插件

const store = new Vuex.Store({
  modules: {
    user,
    groupBuying,
    clearance
  },
  getters,
  plugins: [createPersistedState()]
})

默认用的是localStorage的存储方式，因为本项目需求需要改成sessionStorage的存储方式，在配置里面改为，如果有其他配置可以参考官方api

plugins: [createPersistedState(
    { storage: window.sessionStorage }
  )]

使用的是vue2.0框架，现在在做的项目是 hybrid 开发，H5 页面会嵌入到 IOS或者Android 客户端 app 中，于是就涉及到了 H5 与 APP 交互的问题。在这里记录一下项目中用到的交互方式，重点介绍 WebViewJavascriptBridge。

使用 WebViewJavascriptBridge

当 H5 页面与 IOS 端交互比较复杂时，比如页面需要获取 IOS/Android 端传回的返回值，或者 IOS/Android 端需要调用 js 方法。

可以通过第三方库来实现，我们项目用的是 WebViewJavascriptBridge。下面介绍我怎么在 vue 项目中使用 WebViewJavascriptBridge

WebViewJavascriptBridge GitHub 地址

创建 src/utils/webViewJavascriptBridge.js 文件，用于封装 WebViewJavascriptBridge
将以下代码拷贝到 webViewJavascriptBridge.js 文件中
以下代码可区别ios与Android

/**
     * 函数描述：js调用webview事件
 *
 * jsBridge.callHandler(method, data, callBack(response));
 * @param method {string} 方法名
 * @param data {Object} 参数
 * @return {Object} 回调
 */

/**
 * 函数描述：webView调用JS事件
 *
 * jsBridge.registerHandler(method, callBack(response));
 * @param method {string} 方法名
 * @return {Object} 回调
 */

var JsBridge = {
  init: function(callback) {
    var u = navigator.userAgent
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    if (!isiOS) {
      if (window.WebViewJavascriptBridge) {
        callback(window.WebViewJavascriptBridge)
      } else {
        document.addEventListener(
          'WebViewJavascriptBridgeReady',
          function() {
            callback(window.WebViewJavascriptBridge)
          },
          false
        )
      }
    } else {
      if (window.WebViewJavascriptBridge) {
        return callback(window.WebViewJavascriptBridge)
      }
      if (window.WVJBCallbacks) {
        return window.WVJBCallbacks.push(callback)
      }
      window.WVJBCallbacks = [callback]
      var WVJBIframe = document.createElement('iframe')
      WVJBIframe.style.display = 'none'
      WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'
      document.documentElement.appendChild(WVJBIframe)
      setTimeout(function() {
        document.documentElement.removeChild(WVJBIframe)
      }, 0)
    }
  },

  first: function() {
    var u = navigator.userAgent
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    if (!isiOS) {
      var _this = this
      _this.init(function(bridge) {
        bridge.init(function(message, responseCallback) {
          const data = { result: 0 }
          responseCallback(data)
        })
      })
    }
  },

  registerHandler: function(name, fun) {
    var _this = this
    _this.init(function(bridge) {
      bridge.registerHandler(name, fun)
    })
  },

  callHandler: function(name, data, fun) {
    var _this = this
    _this.init(function(bridge) {
      bridge.callHandler(name, data, fun)
    })
  }
}

JsBridge.first()

export default {
  JsBridge
}

引入Bridge

import Bridge from '@/utils/webViewJavascriptBridge.js'
Vue.prototype.$bridge = Bridge.JsBridge

在需要调用客户端方法的组件中（事先需要与客户端同事约定好方法名）

this.$bridge.callHandler('h5ChangeTitle', params, (data) => {
    // 处理返回数据
})

当客户端需要调用 js 函数时,事先注册约定好的函数即可

this.$bridge.registerhandler('JS Echo', (data, responseCallback) => {
  alert('JS Echo called with:', data)
  responseCallback(data)
})

微信官方api
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

这样可以拿到code
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxec30dc48907effc2&redirect_uri=https://h5.ieou.com/h5_ForMobile/h5_group_buying/index.html%23/&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

区别在index后面#/ 不懂事什么坑呀

这样拿不到
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxec30dc48907effc2&redirect_uri=https://h5.ieou.com/h5_ForMobile/h5_group_buying/index.html&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect