关于mpvue的几个坑点

发布时间:2019-06-14 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了关于mpvue的几个坑点脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

微信小程序的框架众多,而现在我只想记录一下mpvue的几个点...祝你采坑成功。

微信小程序在语法规范、API、组件外,因为多了个可组件化component,主要点始终落在app.json、app.wxss、app.js和每个页面和组件的配置上,都是相似雷同的事情,详情移步官方文档

相对而已,mpvue是在vue基础上加入了微信小程序的支持,在loader和编译方面多做支持,编码规范以vue为标准。

使用

现在已vue-cli生成mpvue/mpvue-quickstart模板深入

相对于原生小程序,mpvue在代码目录主要维护:

  • App.vue: 作为小程序的创建点和挂载点
  • main.js
  • app.json
  • vue模型的组件页

配置每页导航栏信息

v1.1.1以下

找到每页的的main.js,添加export default对应内容

import Vue From 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
export default {
  // v1.12后不再使用config为到场app.json
  config: {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTITleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

v1.1.1以上

直接使用

  • main.js
  • main.json

动态替代方案

wx.setNavigationBarTitle({
  title: '关卡'
})

FAQS

报错mpvue 未找到入口 app.JSON 文件

正常情况:

npm run dev

执行一下mpvue的编译

在dist目录下会自动产生一个app.json

题外话:安装依赖包的时候或者npm run dev的时候提示缺少依赖的话,直接把node_modules 下面的文件全部删掉,然后重新npm intall 简单粗暴解决问题

分析: 因为缺乏依赖而没自动生成app.json

解决之道: 只需要把packpage.json里的mpvue-loade后面的‘^’去掉,重新安装依赖即可。

@H_126_143@npm install
npm run dev

npm run dev 无法编译成功

情况如下:

$ npm run dev
> color-life@1.0.0 dev /home/happy/Dev/coding/color-life
> node build/dev-server.js

尝试如下也无法解决:

1.npm run dev不行
2.删除module重装也不行
3.重新初始化项目也不行

这主要是编译时遇到代码缺失

解决:

如果有组件只有纯template,加上即可:

<script>
  export default {}
</script>

v-show使用失效

分析v-show的特点:

  • v-show只能简单的切换元素的css属性 display
  • 不支持 <template> 元素
  • 不支持 v-else

使用v-show时,很容易将v-show直接下载创建的组件上,如

<template>
    <components v-show="isShow"></components>
</template>

因此组件的显隐状态无法根据isShow响应状态

解决:

只需要在组件外包括一层元素进行控制

<template>
    <div v-show="isShow"> 
        <components></components>
    </div>
</template>    

科普:v-if直接是创建-销毁组件

拥有slot的组件无法自动编译成功

只需要关闭编译重新运行

npm run dev

脚本宝典总结

以上是脚本宝典为你收集整理的关于mpvue的几个坑点全部内容,希望文章能够帮你解决关于mpvue的几个坑点所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。