小程序框架mpvue中的坑

背景

    因为公司要用刚小程序开发个旧项目。历时一个月，来讲说遇到的坑吧。

用到的技术

• mpvue
• vant(weapp)

一、关于ui框架weapp的引入

    

• a、下载vant静态文件，再从app.json配置。
• b、 npm 下载 vant 模块，再从app.json配置。 看官网连接官网教程。

二、app.json

• 这至关于微信的配置文件，里面可设置增长页面，插件(例如weapp组件的引入)，增长了页面后，每次都要npm run dev，否则不生效。

三、mpvue,没有路由这个概念。

• 若要使用，请装mpvue-router-patch，这个插件。
• router.push({ path: '/pages/news/list', reLaunch: true }),只能跳转7次(或者5次，具体忘了)，可改用$router.replace(但此项不支持微信原生的tab的跳转。)

四、v-html 无效

• html内想解析'<p>213</p>'字符串标签,用v-html，无效。
• 解决方法：利用mpvue-wxparse这个插件。

五、dom问题

• 小程序内没有dom的概念，全部使用到dom的插件都报错。querySelector,$refs这些都不能够。。

六、父子组件传值问题

• 父->子，props传值，子组件的html内渲染时能拿到这个值。
• 在onShow(),mounted()方法内是拿不到的，在methods的方法内能够拿到。（生命周期问题）
• 解决方法：vuex,watch这个参数。

七、textarea问题

• 这个是真的操了蛋，textarea内设置了placeholder属性，这个层级是最高的，有弹窗的话，会覆盖这个弹窗。以下图，z-index怎么设置都是无效的。

  

• 解决方法：弹窗打开时隐藏这个textarea,关闭时显示这个textarea。

八、图片问题

一、wx.chooseImage

• 若是是多图片上传，数组操做用.push()没法展示。
• 用array.concat()解决。

二、须要图片根据源文件宽度大小时，在img标签上加上mode='widthFix'。 三、加载本地图片须要放在static目录下，wx.previewImage没法预览本地图片，哎、

九、图片懒加载

• vue-lazyload 这货不支持。
• mpvue-img-load用着个。

---

十、关于web-view

• 只要页面引入了web-view，全部其它html页面都是无效的。
• 头部只会出现微信自带的组件navigation,可配置背景颜色...

十一、分包

• mpvue分包

十二、cookies

• 小程序不支持 cookies,请用插件weapp-cookie

1三、有时候双向绑定失效

• this.$set(this.imgList, this.imgList) 从新set一下

1三、computed问题

• mpuve 不支持computed闭包的传参写法，return不回去。

1四、scss环境问题之sass-loader

• 最近试着搭小程序mpvue模板环境，发现mpvue不支持高版本的sass-loader真tm坑。

npm uninstall sass-loader -D（个人是8.0）

        npm install sass-loader@7.3.1 --save-dev
复制代码

1五、 scss全局文件的配置

一、安装sass-resources-loader

npm sass-resources-loader -D
复制代码

二、配置build/utils.js

2-一、 在cssLoaders 方法内新增

var sassResourceLoader = {
    loader: 'sass-resources-loader',
    options: {
      resources: [
        //修改相应路径
        path.resolve(__dirname, '../src/scss/entrance.scss'),
      ]
    }
  }
复制代码

2-二、 在generateLoaders方法内新增

// 使用sass-loader时，添加sassResouceLoader
    if ('sass' === loader) {
      loaders.push(sassResourceLoader)
    }
复制代码

我也刚刚入手，若有问题，欢迎指出。