mpvue记录

1.mpvue用vue init的方式初始化的基本结构中,假设版本为1.0.0的版本,会有扩展运算符失效(报错)的问题,在1.0.1的版本中已经解决了次问题。一般情况下可以升级mpvue的版本至1.0.1,同样的mpvue-loader、mpvue-template-compiler等都要升级,这里不建议用户自己一个个去升级,因为总会难免出现纰漏,建议直接init新版本的结构进行使用。这里说一个被我升级过程中遗忘的问题,就是当你要升级对应的依赖的时候,去你的page.json去删掉对应的配置信息,不然安装依赖的时候会按照你的配置信息去下载对应的版本。这里普及一点对npm指令不太熟悉的几个小点 -D : --save-dev (不参与项目打包) -S : --save
举个例子:

//  安装css-loader 和 style-loader 
//  为啥安装css-loader 和style-loader ?css-loader: 加载.css文件,style-loader:使用<style>将css-loader内部样式
//  注入到我们的HTML页面
   cnpm install --save-dev style-loader css-loader

同样的,如果想在你的项目组件中写入less语法的样式或者外部引入less文件,你也需要安装loader去添加webpack对less的支持。注意:建议在安装less-loader的同时也去安装css+style的loader

cnpm install less,less-loader --save-dev

这里有两种情况的建议引用方式
情况一: 在特定组件中引用


image.png

情况二:在全局中进行引用


image.png

第二个问题就图片了
我们在项目中肯定会使用图片,这里建议大家把图片放到我们的static目录下,引入图片的时候以dist的为准


image.png

不过一般说起来,在开发过程中应该是不用担心这个问题的,只是怕个别情况会这样,所以在这里提个醒。因为在1.0.0的时候引入tabBar里面的图片会有这个问题。


这里说一个场景值的问题。我们知道'原生小程序'里面的周期函数可以拿到一些场景值,直接在周期函数中传参就可以拿到,在我们的mpvue框架中也可以拿到,只不过方式要改变一下,这里我直接截图了官方的介绍


image.png

因为这个经常被新的伙伴们忽略,所以我这里重点提醒一下


这里使用过vue的伙伴们会使用绑定属性的方式去给一个标签绑定一个类名,在vue中我们一般使用三元表达式去做这个事情,但是在版本 1.0.0-1.0.1的时候,这个写法是不被支持的,所以在这俩版本里推荐使用computed的写法去做这个事情。请看下面对应写法以及编译结果截图


image.png

这里说个需要注意的地方,原来在mpvue版本(1.0.0-1.0.2)中是不支持在类中写三元表达式的,但是在版本1.0.3已经修复了这个问题,所以推荐我们可以愉快的这么写

    <div class="cc" :class="1===1?'cOne':'cTwo'">
      test class
    </div>

现在很多开发人员都会用Mock.js去模拟我们的接口数据以便前后端分离开发的时候,不用等待后端的数据,自己就可以先模拟数据完成开发。不知道Mock是啥的同学请自己去看github上的文档哈,这里我们不赘述。
下面看代码

      let Mock = require('mockjs')
      let data = Mock.mock({
        'dataArr|5': [{
          'id|+1': 1,
         'name': '@name'
        }]
      })
      return data.dataArr

上面的代码中在我们的其他项目中是可以正常运行的,但是在mpvue中会报个语法错,所以我们要加点小东西,请看代码

      let Mock = require('mockjs')
      let data = Mock.mock({
        'dataArr|5': [{
          'id|+1': 1,
         'name': '@name(true)'
        }]
      })
      return data.dataArr

这样就不会报错了,这里感谢我们的网友@军的贡献。


这里记录一点区分
在我们的原生事件中,事件处理函数可以传一个event参数,这个参数里面有我们的事件信息。事件信息是一个对象,在这个对象里面包含了一个很有用的东西 - detail 。比如一个表单提交组件中点击提交的时候,我们可以在对应事件函数的事件对象中拿到表单里面的信息,具体例子请看这里 : https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.htmlhttps://mp.weixin.qq.com/debug/wxadoc/dev/component/radio.html 。如果你仔细观察的话,可以看到基本和value有关的组件都是可以这么用的,在detail中可以拿到当前组件的 输入/选中 的值。
在我们的mpvue中,对这一点做出了一些不一样的封装

image.png

在mpvue中,我们得用@ 去替换我们的 bind。然后我们去看下打印结果
image.png

细心的你会发现,detail 替换 成了 target ,所以这点是一定要记住的,不然自己被自己坑了,找谁说理去。

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

推荐阅读更多精彩内容