小程序框架和mpvue中的坑由于公司要用刚小程序开发个旧项目。历时一个月，来说说遇到的坑吧。推荐下自己搭的Mpvue+

背景

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

推荐下自己搭的Mpvue+vant的项目模板,github地址。

用到的技术

mpvue
vant(weapp)

1、关于ui框架`weapp`的引入

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

2、app.json

这相当于微信的配置文件，里面可设置增加页面，插件(例如weapp组件的引入)，增加了页面后，每次都要npm run dev，不然不生效。

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

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

4、v-html 无效

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

5、dom问题

小程序内没有dom的概念，所有使用到dom的插件都报错。querySelector,$refs这些都不可以。。

6、父子组件传值问题

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

7、textarea问题

这个是真的操了蛋，textarea内设置了placeholder属性，这个层级是最高的，有弹窗的话，会覆盖这个弹窗。如下图，z-index怎么设置都是无效的。
解决方法：弹窗打开时隐藏这个textarea,关闭时显示这个textarea。

8、图片问题

1、wx.chooseImage

如果是多图片上传，数组操作用.push()无法展现。
用array.concat()解决。

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

9、图片懒加载

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

10、关于web-view

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

11、分包

mpvue分包

12、cookies

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

13、有时候双向绑定失效

this.$set(this.imgList, this.imgList) 重新set一下

13、`computed`问题

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

14、`scss`环境问题之`sass-loader`

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

        npm uninstall sass-loader -D（我的是8.0）

        npm install sass-loader@7.3.1 --save-dev

15、 `scss`全局文件的配置

1、安装sass-resources-loader

    npm sass-resources-loader -D

2、配置build/utils.js

2-1、在cssLoaders 方法内新增

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

2-2、在generateLoaders方法内新增

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

16、小程序不支持`svg`

所以icon-font的多色图标不能使用
推荐插件mini-program-iconfont-cli,类似转换。

17、`mpvue`的`template`中全局变量问题

不支持绑定在vue.prototype上的全局变量，在js内能获取，template模板上就不行。
解决方法:利用computed计算属性来返回绑定在vue上的全局变量。

computed:{
            getDoMain(){ //获取接口域名
                return this.$doMain
            }
        },

18、`mpvue`中两层以上的对象视图无法修改.

用this.$set也是无效。
this.$forceUpdate()刷新也无效。
解决方法：使用深拷贝，重新赋值给这个对象。

19、`mpvue`中添加左右滑动事件

参考

20、`mpvue`中引入腾讯地图`sdk`

1、sdk下载

2、在sdk.js中

module.exports = QQMapWX;
//改为
export default QQMapWX

3、引入 import QQMapWX from 'XXX/qqmap-wx-jssdk.js'

步骤参考

21、`mpvue`中页面重置缓存数据。

onLoad() {
            Object.assign(this.$data, this.$options.data())
        },

22、小程序ios页面可以左右滑动问题

经查阅资料，网上方法：

  overflow-x:hidden;
  width:100%;

经过测试,ios中不支持overflow-x:hidden,只支持overflow:hidden;
最后发现子内容由于overflow-x:hidden不生效，字内容超出了，所以可以滑动；
解决加上box-sizing:border-box

23、swiper高度无法自适应问题

参考地址

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

小程序框架和mpvue中的坑

背景

1、关于ui框架weapp的引入