关于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后面的‘^’去掉,重新安装依赖即可。

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容

  • 使用手册 mpvue继承自Vue.js,其技术规范和语法特点与Vue.js保持一致。 本文档适用于有一定Vue.j...
    眼镜蛇阅读 2,105评论 0 0
  • 前言 这是我第一次开发小程序,开发的产品是音频类的,在大佬的建议下采用了mpvue,一周时间把功能都做出来,由于不...
    猪猪侠闯天下阅读 460评论 0 2
  • 前言 这是我第一次开发小程序,开发的产品是音频类的,在大佬的建议下采用了mpvue,一周时间把功能都做出来,由于不...
    fengxianqi阅读 2,158评论 0 5
  • 第一章 Vue概述 what? Vue是实现UI层的渐进式js框架,核心库关注视图层,简单的ui构建,复杂的路由控...
    fastwe阅读 645评论 0 0
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,014评论 0 2