微信小程序（2）

前提：最近因为被派去别的组，开发微信小程序，遇到了很多坑，记录一下

一、框架

    1. mpvue  2. vant-ui

二、踩过的坑

1.  分包

    因为有一次提交的时候，提示主包文件过大，不能超过2M，所以就需要将代码分包

    需要注意的是：tabBar标签所需要的路由链接，都必须写在主包里面，packageA和packageB必须在pages文件下

    app.json

  "pages": [
    "pages/login/main",
    "pages/index/main",
    "pages/my/main",
    "pages/exam/main",
    "pages/cultivate/main"
  ],
  "subPackages": [
    {
      "root": "pages/packageA",
      "pages": ["register/main", "registerAnswer/main", "registerFinish/main"]
    },
    {
      "root": "pages/packageB",
      "pages": [
        "cultivateInfo/main",
        "material/main",
        "beforeExam/main",
        "examInfo/main",
        "password/main",
        "mockExam/main",
        "addMockExam/main",
        "startMockExam/main",
        "mockExamTitle/main",
        "myInfo/main",
        "invigilate/main",
        "addScore/main",
        "comment/main",
        "commentInfo/main",
        "calendar/main"
      ]
    }
  ]

2. tabBar 导航标签

    app.json

  "tabBar": {
    "color": "#999999",
    "selectedColor": "#1663A7",
    "list": [
      {
        "selectedIconPath": "/static/images/tab_active1.png",
        "iconPath": "/static/images/tab1.png",
        "pagePath": "pages/index/main",
        "text": "首页"
      },
      {
        "selectedIconPath": "/static/images/tab_active2.png",
        "iconPath": "/static/images/tab2.png",
        "pagePath": "pages/cultivate/main",
        "text": "培训"
      },
      {
        "selectedIconPath": "/static/images/tab_active3.png",
        "iconPath": "/static/images/tab3.png",
        "pagePath": "pages/exam/main",
        "text": "测评"
      },
      {
        "selectedIconPath": "/static/images/tab_active4.png",
        "iconPath": "/static/images/tab4.png",
        "pagePath": "pages/my/main",
        "text": "我的"
      }
    ]
  }

3. 文件下载

wx.downloadFile({
   url: url, //仅为示例，并非真实的资源
   success (res) {
       // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
       const filePath = res.tempFilePath
       that.downloadFile(filePath)
   },
   fail: function(res) {
       wx.showToast({
          title: '下载失败',
          icon: 'error',
          duration: 2000
       })
   }
})

下载完之后打开文件

wx.openDocument({
  filePath: filePath,
  success: function(res) {
    console.log('打开文档成功')
  },
  fail: function(res) {
    console.log('打开失败')
    console.log(res)
  },
  complete: function(res) {
    console.log(res)
  }
})

4. 日历组件 https://www.npmjs.com/package/mpvue-calendar

    找到合适的日历组件mpvue-calendar  各种点击时间，标记日期

    a、npm i mpvue-calendar

    b、代码

<Calendar
   ref="calendar"
   :events="events"
   :now="false"
   clean
   @select="select"
/>

events: {} // 有监考事件的日期 格式{'2018-10-7': '内容'}

select(val, info) {
  if (this.jkInfo[info.date]) {
     this.chooseJkInfo = this.jkInfo[info.date]
     console.log(this.chooseJkInfo)
  } else {
     this.chooseJkInfo = null
  }
},

5. 路由跳转 navigateTo 和 redirectTo的区别

    navigateTo: （navigate中文意思是导航），可以想象成目录的那种结构，从父页面导航到下一个子页面，然后还可以再回退到父目录

    redirectTo： （redirect重新定向）在当前页面直接重定向到另一个页面，所以也不存在回退到原页面的情况。

6. vant 双向绑定问题 value

    van-field input框改变内容，value对应的数据并没有改变。要用自己在失去焦点的时候手动改变

<van-field
    v-model="userInfo.sfzhm"
    :error-message="rules.sfzhm"
    label="身份证"
    placeholder="请输入身份证"
    input-align="right"
    @blur="onChange('sfzhm', $event)"
/>

onChange(type, event) {
   // 修改
   this.userInfo[type] = event.mp.detail.value 
},

7. van-popup  下拉弹框

<van-popup :show="showBMPicker" position="bottom">
  <van-picker
     show-toolbar
     :columns="bmList"
     @cancel="showBMPicker = false"
     @confirm="submitBM"
  />
</van-popup>