基于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 相关文章推荐
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 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 表单验证实现代码
2009/03/10 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
python读写二进制文件的方法
2015/05/09 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
python的pip有什么用
2020/06/17 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
大专自我鉴定范文
2013/10/01 职场文书
专业销售业务员求职信
2013/11/18 职场文书
离婚协议书样本
2015/01/26 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
python3 字符串str和bytes相互转换
2022/03/23 Python
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript