基于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 相关文章推荐
xml 封装与解析(javascript和C#中)
Jul 26 Javascript
jquery select下拉框操作的一些说明
Apr 02 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
Vue数字输入框组件示例代码详解
Jan 15 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设计模式  Command(命令模式)
2011/06/17 PHP
php使用codebase生成随机数
2014/03/25 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
javascript奇异的arguments分析
2010/10/20 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
Vue组件系列开发之模态框
2019/04/18 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
python文件和目录操作方法大全(含实例)
2014/03/12 Python
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
转党组织关系介绍信
2014/01/08 职场文书
绿色城市实施方案
2014/03/19 职场文书
安全生产标语
2014/06/06 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
入党自荐书范文
2015/03/05 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
大学开学感言
2015/08/01 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
4种方法python批量修改替换列表中元素
2022/04/07 Python