海创软件组-20200628-vue使用vue-json-excel-小程序跳转tabBar界面所遇到的问题-解决mpVue嵌套遍历报错-mpvue引入iview weapp的组件库

vue使用vue-json-excel将后台的json数据导出excel表格

最近帮老师做一个毕业调查报告的东西，要求讲学生填写情况以excel表格文件导出本地。
因为是临时要加的，时间也不太够，就没有采取xlsx去弄，打算用简单容易上手的vue-json-excel实现这个功能。

一：安装依赖

npm install vue-json-excel

---

二：在项目文件入口main.js全局引入

//excel表格
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

---

三：相关配置文档

---

四：在组件中使用
注意：因为我的json_data数据是通过请求从后台获取的，所以data里面声明的只是空数组

<template>
	<download-excel
       class = "export-excel-wrapper"
       :data = "json_data"
       :fields = "json_fields"
       title="毕业要求达成情况定性评价模型——基于应届毕业生毕业要求达成度调查问卷"
       name = "毕业要求达成情况定性评价模型.xls">
       <el-button type="primary" size="small" style="right: 30px;position: absolute;">导出EXCEL</el-	button>
     </download-excel>
</template>

<script>
  export default {
		data () {
		      return {
		        moXings:[],   //模型数据
		        json_fields: {
		          "毕业要求": "ord",
		          "指标点": "ord1",
		          "NA": "na", 
		          "NB": "nb", 
		          "NC": "nc",
		          "ND": "nd",
		          "NE": "ne", 
		          "达成情况评价值": "estimate",
		        },
		        json_data:[],    //导出表格数据
		        json_meta: [
		          [
		            {
		              " key ": " charset ",
		              " value ": " utf- 8 "
		            }
		          ]
		        ]
		      }
		    },
 	}
</script>

经过请求获取数据后进一步处理后打印输出json_data数据：

效果图：

自从，一个简单的将json数据以表格文件导出本地的功能就完成了。

---

vue使用vue-json-excel将后台的json数据导出excel表格

因为刚接触小程序开发，在开发小程序过程中，我对于界面的跳转都是习惯于用wx.navigateTo或者wx.redirectTo，
两者的区别就是：
前者wx.navigateTo保留当前页面再去跳转新界面，而后者wx.redirectTo则是先关闭当前界面再去跳转新界面。就类似与vue中的路由跳转，push和replace，一个可回退，一个不可回退。

但最近在开发的过程中需要使用全局配置tabBar界面，这时我再使用上述两种方法去跳转则报错：

这是我定义的tabBar

"tabBar": {
    "list": [
      {
        "pagePath": "pages/personal/main",
        "text": "个人中心",
        "iconPath": "/static/imgs/tabs/me.png",
        "selectedIconPath": "/static/imgs/tabs/me-active.png"
      }
    ]
  }

这是我使用的跳转方法：

wx.navigateTo({
         url: '/pages/personal/main'
      })

---

打开开发文档，找到原因是微信官方定义了，跳转tabBar界面只能通过wx.switchTab

解决方法：将navigateTo改为switchTab即可。

wx.switchTab({
       url: '/pages/personal/main'
     })

---

解决mpVue嵌套遍历报错

最近刚学用mpvue开发小程序，因为之前有过vue开发经验，所以mpvue感觉不难，只是刚上手做东西，发现还是蛮多坑的。

就好比嵌套v-for遍历了：
用vue的时候即使嵌套遍历的index是一样的也不会报错：

<div class="biYeListsDiv" v-show="evaluates.length>0">
    <ul v-for="(evaluate,index) in evaluates" :key="index">
      <p class="biYeLiTitle">
        <span style="font-weight: bold;">毕业要求{{evaluate.ord}}：</span>
        {{evaluate.name}}
      </p>
      <li v-for="(val,index1) in evaluate.evasmallVoList" :key="index1">
        <div class="biYeLi">
          {{evaluate.ord}}.{{index1+1}}：&nbsp;&nbsp;{{val.name}}
        </div>
        <div class="biYeRadio">
          <el-radio-group v-model="val.chice" @change="uploadByOne(val)">
            <el-radio :label="gra" v-for="(gra,index) in val.grade" :key="index">{{gra}}</el-radio>
          </el-radio-group>
        </div>
      </li>
    </ul>
  </div>

但在mpvue中却给我显示：

这让我百思不得其解，这不是很正常吗？为何会报错？？但无奈也只能跟着提示去改了，就是将每一层遍历的index声明为不同的名字就可以解决了：

<div class="biYeListsDiv" v-show="evaluates.length>0">
    <ul v-for="(evaluate,index) in evaluates" :key="index">
      <p class="biYeLiTitle">
        <span style="font-weight: bold;">毕业要求{{evaluate.ord}}：</span>
        {{evaluate.name}}
      </p>
      <li v-for="(val,index1) in evaluate.evasmallVoList" :key="index1">
        <div class="biYeLi">
          {{evaluate.ord}}.{{index1+1}}：&nbsp;&nbsp;{{val.name}}
        </div>
        <div class="biYeRadio">
          <el-radio-group v-model="val.chice" @change="uploadByOne(val)">
            <el-radio :label="gra" v-for="(gra,index2) in val.grade" :key="index2">{{gra}}</el-radio>
          </el-radio-group>
        </div>
      </li>
    </ul>
  </div>

改完后一切正常：

总结一下：虽然mpvue和vue的语法等等基本一样，所以之前有了vue开发经验的我在使用mpvue开发小程序过程中的确比较顺手，但也因为之前的经验，导致了开发过程中犯了一些不必要的错误，这次的v-for循环就是个鲜明的例子。vue和mpvue固然有很多共同点，但肯定也存在一些差异，所以我们不能因为熟悉vue之后就不再用心关注mpvue，一切都需要自己多去实践，多踩坑才能真正去熟悉使用mpvue。希望之后自己能更快熟悉掌握mpvue吧。

---

mpvue中引入iview weapp

mpvue中引入iview weapp步骤
（一）从github官网下载iview weapp 文件
（二）将dist文件夹下所有文件，复制到项目文件中的static文件夹中

这里我在static文件夹中将dist文件命名为iview，你们可以随意起名。

（三）在要使用的组件中，新建main.json文件，在json文件中引入相应组件

{
  "navigationBarTitleText": "首页",
  "navigationBarBackgroundColor": "#000",
  "usingComponents": {
    "i-card": "../../../static/iview/card/index",
    "i-steps": "../../../static/iview/steps/index",
    "i-step": "../../../static/iview/step/index",
    "i-button": "../../../static/iview/button/index",
    "i-divider": "../../../static/iview/divider/index",
    "i-panel": "../../../static/iview/panel/index",
    "i-toast": "../../../static/iview/toast/index",
    "i-message": "../../../static/iview/message/index",
    "i-icon": "../../../static/iview/icon/index",
    "i-cell-group": "../../../static/iview/cell-group/index",
    "i-cell": "../../../static/iview/cell/index",
    "i-grid": "../../../static/iview/grid/index",
    "i-grid-item": "../../../static/iview/grid-item/index",
    "i-grid-icon": "../../../static/iview/grid-icon/index",
    "i-grid-label": "../../../static/iview/grid-label/index",
    "i-row": "../../../static/iview/row/index",
    "i-col": "../../../static/iview/col/index",
    "i-tag": "../../../static/iview/tag/index",
    "ec-canvas": "../../../static/ec-canvas/ec-canvas"
  }
}

（四）然后在页面中使用标签就可成功调用

<i-button bind:click="handleClick"
      type="primary">Primary</i-button>
<i-button bind:click="handleClick"
      type="ghost">Ghost</i-button>
<i-button bind:click="handleClick"
      type="info">Info</i-button>