【mpvue】使用Mpvue撸一个简单的小程序

 

1、快速建立一个mpvue项目

 

• 全局安装 vue-cli

 

（若是有就不须要装了）

• 建立一个基于mpvue-quickstart模板的新项目，记得选择安装vuex

vue init mpvue/mpvue-quickstart mpvue-demo

 

 

是否须要vuex →是

• 安装fly

npm i flyio --save

 

 

 

 

• 安装依赖

cd mpvue-demo cnpm i

 

 

 

• 启动

npm run dev

有时候Npm run dev会报不少error，删除node_modules从新安装依赖便可

• 这是咱们生成的Mpvue目录

 

 

2、编写页面，还原

当咱们写组件的时候，和小程序有不少属性和方法在vue是识别不出来的，有的有对应的属性和方法

• 表单

1. checkbox、radiobox、switch　　　

 

 

<checkbox-group/>中选中项发生改变是触发change事件，mp.detail={value:[选中的checkbox的value数组]}

其中开关选择器switch、radio用法相同

划重点：1. bindchange鞋城@change="" 2.change返回选中值获取方法为e.mp.detail.value

2. 图片上传和预览

 

 

图片上传和预览的实现主要使用了微信原生API wx.chooseImage(OBJECT) wx.previewImage(OBJECT)

• 组件

 

1. picker

bindchange →@change,以及一下要绑定的属性要写成:value的形式

能够经过indexPicker的值从而能够自定义picker初始化要显示的值

 

 

 

2. swiper

 

 

属性和事件：除了bind改成了@以外，其余用法基本同样

（还有其余一些组件，待整理...）

3、vuex，flyio请求服务

 

mpvue请求服务，咱们用flyio插件进行处理

因为须要登陆传token的操做，因此须要对flyio进行一次请求封装

在api.js文件调用fly请求服务

 

 

在main.js引入store

import store from './store'

Vue.prototype.$store = store

而后咱们就能够在vue中使用vuex同样编写代码了

以日志列表为例

 

 

大功告成～～～

如今咱们看子组件是怎么编写的

 

看看显示的页面

 

 

 

 

 

接下来就须要咱们改改样式就好了。