初识MpVUE开发微信小程序踩坑记录

安装预览的时候,不是用浏览器打开输入:localhost:8080。


而是打开微信开发者工具,把项目根目录导入进去。

坑一:不支持Vue-router

之前vue项目直接移入,同步生成小程序不能使用vue-router

坑二:eslint连vue和js后缀文件都有严格校验

初识MpVUE开发微信小程序踩坑记录

      找到build目录的webpack.base.conf.js把器rule注释掉。

 // {
      //   test: /.(js|vue)$/,
      //   loader: ‘eslint-loader‘,
      //   enforce: ‘pre‘,
      //   include: [resolve(‘src‘), resolve(‘test‘)],
      //   options: {
      //     formatter: require(‘eslint-friendly-formatter‘)
      //   }
      // },

坑三.相对路径的图片不显示,比如

<img src="../../images/LOGO.png"> 

解决是:把路径import进来,或者是把图片放在static目录下引用,然而作为css background-image引用时,只能选择引用远程图片,或者相对目录小于8k(webpck配置有关)的图片,不然编译器会报错

<template> <div> <div class="test"></div> <img :src="imgUrl"> </div></template><style>.test{ width: 48rpx; height: 48rpx; background-image: url("../../img/a.png");}</style><script>import imgUrl from ‘@/img/a.png‘export default { data() { return { imgUrl }}</script>

 

坑四.原生组件引入的问题:

  • ready 为异步获取数据。
  • 为 init 添加接收 options 传参
  • page目录下main.js需要添加 usingComponents: {‘ec-canvas‘: ‘../../../static/ec-canvas/ec-canvas‘}
  • 需要放在static目录下

 

相关文章