mpvue开发小程序demo

在本文中，我们将介绍如何使用mpvue框架开发微信小程序，并提供一个基本的示例以便学习。mpvue是一个基于Vue.js框架开发小程序的扩展库，可以让开发者使用Vue.js来开发小程序。

一、安装

首先安装Vue脚手架，用于创建项目

```

npm install -g vue-cli

```

然后使用Vue脚手架创建一个新的项目

```

vue init mpvue/mpvue-quickstart my-project

```

进入项目根目录并安装依赖

```

cd my-project

npm install

```

二、目录结构

在mpvue中，开发者大多数时间都会在/src目录中编写代码，所以/src目录才是本项目的主要部分。此外，项目还包括了一个dist文件夹，用于编译成小程序适合的代码；static文件夹用于存放静态资源。

```

├── build // 构建脚本

├── dist // 编译后的文件

├── node_modules

├── src

│ ├── components // 组件

│ ├── pages // 页面

│ ├── App.vue // 根组件

│ ├── main.js // 入口文件

│ └── router.js // 路由配置

├── static // 静态资源

└── package.json

```

三、基本结构

1、App.vue

```

```

2、main.js

```

import Vue from 'vue'

import App from './App'

import router from './router'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({

router,

...App

})

app.$mount()

```

四、创建组件

mpvue中的组件开发与Vue.js的开发方式相同，可以直接复用组件库中的Vue.js组件。

示例

在/src/components/目录下创建一个Button.vue文件

```

```

五、创建页面

在mpvue中，页面与组件的区别就在于它们有专属的生命周期函数。

1、页面的生命周期

- onLoad: 页面加载时触发，一个页面只会调用一次，可以在 onLoad 中获取页面的 query 参数。

- onReady: 页面渲染完毕后触发，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互，如调用页面组件。

- onShow: 页面显示时触发，每次打开页面都会调用一次。

- onHide: 页面隐藏时触发。

- onUnload: 页面卸载时触发，如 redirectTo 或 navigateBack 到其他页面时。

2、创建一个页面

在/src/pages/目录下创建Index.vue文件。

```

```

六、路由配置

1、创建路由文件

在/src/目录下创建一个router.js文件，在此文件中定义路由相关信息。

```

import Vue from 'vue'

import Router from 'vue-router'

import Index from '@/pages/Index'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

name: 'Index',

component: Index

}

]

})

```

2、在App.vue中注册router-view

```

```

七、编译和运行

使用命令行 npm run dev 执行编译命令，这将会启动一个本地服务器并监听文件变化。

```

npm run dev

```

然后在微信开发者工具中打开项目，注意要选择dist目录。

至此，一个简单的mpvue小程序就完成了。在实践中，你可以继续扩展学习更多的功能和知识，开发更完善的小程序应用。