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.html 和 https://mp.weixin.qq.com/debug/wxadoc/dev/component/radio.html 。如果你仔细观察的话,可以看到基本和value有关的组件都是可以这么用的,在detail中可以拿到当前组件的 输入/选中 的值。
在我们的mpvue中,对这一点做出了一些不一样的封装
在mpvue中,我们得用@ 去替换我们的 bind。然后我们去看下打印结果
image.png
细心的你会发现,detail 替换 成了 target ,所以这点是一定要记住的,不然自己被自己坑了,找谁说理去。