基于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 相关文章推荐
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
原生js实现轮播图特效
May 04 Javascript
vue组件系列之TagsInput详解
May 14 Javascript
JS遍历树层级关系实现原理解析
Aug 31 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
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
vue params、query传参使用详解
2017/09/12 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
Python深入学习之内存管理
2014/08/31 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
详解django.contirb.auth-认证
2018/07/16 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
代理协议书范本
2014/04/22 职场文书
英语系毕业生求职信
2014/07/13 职场文书
教师群众路线心得体会
2014/11/04 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
小马王观后感
2015/06/11 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS