基于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 相关文章推荐
javascript 短路法代码精简
Aug 20 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 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 随机排序广告的实现代码
2011/05/09 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
用javascript作一个通用向导说明
2011/08/30 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
python列表使用实现名字管理系统
2019/01/30 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
Python devel安装失败问题解决方案
2020/06/09 Python
Python如何进行时间处理
2020/08/06 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
python的dict判断key是否存在的方法
2020/12/09 Python
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
佳能法国商店:Canon法国
2019/02/14 全球购物
行政助理岗位职责
2013/11/10 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
房产协议书范本
2014/10/18 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
同学聚会通知书
2015/04/20 职场文书
党员读书活动心得体会
2016/01/14 职场文书
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
Golang 入门 之url 包
2022/05/04 Golang
Python可视化神器pyecharts绘制水球图
2022/07/07 Python