基于mpvue搭建微信小程序项目框架的教程详解


Posted in Javascript onApril 10, 2019

简介:

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文件

基于mpvue搭建微信小程序项目框架的教程详解

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组件库克隆到本地

基于mpvue搭建微信小程序项目框架的教程详解

2、将上图中的dist目录拷贝到mpvue项目的输出目录中

基于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、

小程序使用自定义组件:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

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搭建微信小程序项目框架的教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 Javascript
javascript闭包的理解
Apr 01 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
js实现图片懒加载效果
Jul 17 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
Vue项目中使用Vux的安装过程
May 01 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 #Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 #Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 #Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 #Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 #Javascript
小程序分享模块超级详解(推荐)
Apr 10 #Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 #Javascript
You might like
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
PHP模块化安装教程
2016/06/01 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
理清apply(),call()的区别和关系
2011/08/14 Javascript
JS画线(实例代码)
2013/11/20 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
javascript实现点击星星小游戏
2019/12/24 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
python程序封装为win32服务的方法
2021/03/07 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
python实现批量文件重命名
2019/10/31 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
python中round函数保留两位小数的方法
2020/12/04 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
写给老师的表扬信
2014/01/21 职场文书
售后服务经理岗位职责
2014/02/25 职场文书
停车场管理协议书范本
2014/10/08 职场文书
秋季运动会加油词
2015/07/18 职场文书
python绘制箱型图
2021/04/27 Python
详解Java实践之适配器模式
2021/06/18 Java/Android
Android中的Launch Mode详情
2022/06/05 Java/Android
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS