基于mpvue搭建微信小程序项目框架的教程详解
简介:
mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择。mpvue从底层支持 vue.js 语法和构建工具体系,同时再结合相关ui组件库,便可以高效的实现小程序开发
前言:
本文讲述如何搭建完整的小程序项目框架,因为是第一次使用,有不完善的地方请大佬指正。
搭建内容包括:
1、使用scss语法:依赖插件sass-loader 、node-sass
2、像vue一样使用路由:依赖插件 mpvue-entry 和 mpvue-router-patch
3、使用zanui:有赞团队的小程序版ui组件库(github)
4、使用vuex进行状态管理
5、使用flyio进行数据交互:github地址
项目结构:
讲解:
一、使用scss语法
1、安装依赖
cnpm install node-sass sass-loader --save-dev
因为一些不知名的原因导致node-sass经常安装失败,所以采用cnpm方式安装最好
2、在.vue文件中的style节点加上lang=”scss”,这样就可以愉快地使用sass进行开发了,无需再webpack.base.config.js中配置loader,webpack会自动识别.scss文件以及.vue中的scss代码。
二、像vue一样使用路由
在使用mpvue提供的命令 vue init mpvue/mpvue-quickstart my-project 创建项目后,会发现每个页面都要配置main.js 文件,不仅繁琐而且显得多余,所以我们是否可以改造成像vue一样使用路由的方式呢,答案是可以的,需要用到mpvue-entry 和 mpvue-router-patch插件(集中式页面配置,自动生成各页面的入口文件,优化目录结构,支持新增页面热更新)和
mpvue-entry: 集中式页面配置,自动生成各页面的入口文件,优化目录结构,支持新增页面热更新
mpvue-router-patch: 在 mpvue 中使用 vue-router 兼容的路由写法
1、安装依赖
cnpm install mpvue-entry --save-dev cnpm install mpvue-router-patch --save
2、项目src文件夹下创建router文件夹和router.js文件
3、项目引入src下的main.js文件
import vue from 'vue' import mpvuerouterpatch from 'mpvue-router-patch' vue.use(mpvuerouterpatch)
注:main.js的 export default {} 不能为空,不然编译时不生成app.json文件
4、修改webpack.base.conf.js配置文件
const mpvueentry = require('mpvue-entry') module.exports = { entry:mpvueentry.getentry('./src/router/router.js'), ....... }
5、配置router.js 文件
// 首个路由为首页 module.exports = [{ path: 'pages/index', name: 'index', config: { navigationbartitletext: '文章详情', //引入ui组件,后面会讲到 usingcomponents:{ "zan-button": "../dist/btn/index" } } }, { path: 'pages/list/list', name: 'list', config: { navigationbartitletext: 'list详情' } }]
三、使用小程序ui组件
1、将ui组件库克隆到本地
2、将上图中的dist目录拷贝到mpvue项目的输出目录中
3、在router.js文件中引入ui组件
module.exports = [{ path: 'pages/index', name: 'index', config: { navigationbartitletext: '文章详情', //引入ui组件 usingcomponents:{ //组件名和引用路径 "zan-button": "../dist/btn/index" } } }]
4、页面中使用ui组件
<template> <div class="index"> <zan-button type="primary" size="small">确认付款</zan-button> </div> </template>
5、
小程序使用自定义组件:
zanui组件库使用讲解:https://github.com/youzan/zanui-weapp/blob/dev/readme.md
四、使用vuex进行状态管理
1、安装
cnpm install vuex --save
2、引入(main.js文件)
impotr store from './vuex/index' vue.prototrype.$store = store//挂在到vue原型上
五、使用flyio进行数据交互
1、安装
cnpm install flyio --save
2、引入(main.js文件)
const fly = require("flyio/dist/npm/wx")//引入 const fly = new fly vue.prototrype.$fly = fly//挂在到vue原型上
3、使用
add(){ //在add方法中执行接口请求 this.$fly.get('http://******/user?id=133') .then(function (res) { //请求成功 console.log('res',res); }) .catch(function (err) { //请求失败 console.log('err',err); }); }
总结
以上所述是小编给大家介绍的基于mpvue搭建微信小程序项目框架的教程详解,希望对大家有所帮助
推荐阅读
-
mpvue+vant app搭建微信小程序的方法步骤
-
基于mpvue的小程序项目搭建的步骤
-
《微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记1)WePY开发环境的安装
-
微信小程序的mpvue框架快速上手指南
-
微信小程序 wepy框架与iview-weapp的用法详解
-
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
-
微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架
-
详解从0开始搭建微信小程序(前后端)的全过程
-
基于mpvue搭建微信小程序项目框架的教程详解
-
mpvue+vant app搭建微信小程序的方法步骤