微信小程序的mpvue框架快速上手指南


Posted in Javascript onMay 15, 2019

一.什么是mpvue框架?

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心(所以建议熟练掌握vue再使用mpvue框架,否则还是建议去使用原生框架去写小程序),mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

二.必要的开发基础

① 熟练掌握vue.js(未曾使用过vue这个框架的话,建议vue的官方文档进行学习:https://cn.vuejs.org/v2/guide/)

② 微信开发者工具(这个工具是开发、调试和模拟运行微信小程序的最核心的工具了,下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)

③ Visual Studio Code(一个轻量级代码编辑器,拥有非常多好用的辅助开发插件,下载地址:https://code.visualstudio.com)

④ node.js(前端工具链现在基本都依赖Node.js,下载地址:https://nodejs.org/en/download/)

⑤ vue-cli (vue专用的项目脚手架工具,打开cmd,输入命令:npm install --global vue-cli

三.初始化项目

1.打开cmd,快捷键win+R;

2.检查node.js是否安装成功,输入命令:

node -v

微信小程序的mpvue框架快速上手指南

出现版本号即为成功;

3.检查vue-cli是否安装成功,输入命令:

vue -V

微信小程序的mpvue框架快速上手指南

出现版本号即为成功;

4.然后我们执行以下命令,将npm的下载源切换到国内淘宝的镜像,以提高下载时的速度和成功率;

npm set registry https://registry.npm.taobao.org/

微信小程序的mpvue框架快速上手指南

5.进入你想保存项目的文件夹(比如d盘,就先输入命令d:),创建一个基于 mpvue-quickstart 模板的新项目:

vue init mpvue/mpvue-quickstart wxvueshop

接着我们选择或填写项目的配置信息,不知道的你就回车(依次是,项目名称,小程序appid,项目介绍,作者,然后是否安装vuex等等,你想安装就写yes,否则no)

微信小程序的mpvue框架快速上手指南

这个时候你就能看见d盘有一个wxvueshop的项目文件了。

6.不急,我们这时候进入这个文件夹,输入命令:

cd wxvueshop

7.然后,我们进行依赖库的安装,输入命令:

npm install

微信小程序的mpvue框架快速上手指南

8.安装完成后,我们运行一下,输入命令:

npm run dev

随着运行成功的运行之后,可以看到本地wxvueshop多了个dist目录,这个目录里就是生成的小程序相关代码,这个时候我们就成功初始化项目了。跑起来了...

微信小程序的mpvue框架快速上手指南

四.运行查看项目

打开微信web开发者工具,选择新增项目,打开我们刚刚创建的项目,如图:

微信小程序的mpvue框架快速上手指南

点击“确定”按钮,进入小程序开发主界面,在左边的小程序模拟器中就能看到wxvueshop小程序的执行结果了:

微信小程序的mpvue框架快速上手指南

五.编写代码

如上图,我们新创建的项目有生成默认页面,现在我们把它全部去掉,具体如下:

1.删掉src/componentssrc/pagessrc/utils三个目录下的所有代码文件;

2.将src/App.vue文件中的内容重置成:

<script>
/* 这部分相当于原生小程序的 app.js */
export default {
 created () {
  console.log('miniapp created!!!')
 }
}
</script>

<style>
/* 这部分相当于原生小程序的 app.wxss */
.container {
 background-color: #cccccc;
}
</style>

3.将src/main.js文件中的内容重置成:

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue(App)
app.$mount()
export default {
 config: {
  pages: [
    '^pages/login/main'
  ],
  window: {
   backgroundTextStyle: 'light',
   navigationBarBackgroundColor: '#fff',
   navigationBarTitleText: '我的小程序',
   navigationBarTextStyle: 'black'
  }
 }
}

现在,我们的代码就成了一个小程序页面都没有的初始状态。

4.新建页面,以后的每一个mpvue页面组件都会拥有如下图片这样的结构。

微信小程序的mpvue框架快速上手指南

页面写法如下:

login.vue:

<template>
 <div class="container" @click="clickHandle">
  <div class="message">{{msg}}</div>
 </div>
</template>
<script>
export default {
 data () {
  return {
   msg: 'login'
  }
 },
 methods: {
  clickHandle () {
   this.msg = 'yes!!!!!!'
  }
 }
}
</script>
<style scoped>
.message {
 color: red;
 padding: 10px;
 text-align: center;
}
</style>

main.js:

import Vue from 'vue'
import App from './login'
const app = new Vue(App)
app.$mount()
export default {
  config: {
   // 注意,页面级可配置属性相当于只是`src/main.js`中配置里的`window`部分
   "navigationBarBackgroundColor": "#3dc1c7",
   "navigationBarTitleText": "登录",
   "navigationBarTextStyle": "white"
  }
 }

5.我们在src里面用vue写法创建页面的时候,小程序的页面会自动创建和代码转化,文件夹为dist,图片如下:

微信小程序的mpvue框架快速上手指南

就这样我们已经初步了解mpvue框架了,之后有时间会写进阶版,上面内容如果有出错的地方,麻烦大佬们指正,谢谢!

总结

以上所述是小编给大家介绍的微信小程序的mpvue框架快速上手指南,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jquery中each方法示例和常用选择器
Jul 08 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
九种原生js动画效果
Nov 11 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 #Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 #Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 #Javascript
小程序绑定用户方案优化小结
May 15 #Javascript
pm2发布node配置文件ecosystem.json详解
May 15 #Javascript
JQuery常见节点操作实例分析
May 15 #jQuery
JS算法题之查找数字在数组中的索引位置
May 15 #Javascript
You might like
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
php 运行效率总结(提示程序速度)
2009/11/26 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
php获取微信openid方法总结
2019/10/10 PHP
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
药剂专业学生求职信范文
2013/12/28 职场文书
高一历史教学反思
2014/01/13 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
太太口服液广告词
2014/03/20 职场文书
婚前保证书范文
2015/02/28 职场文书
具结保证书范本
2015/05/11 职场文书
初中语文教学随笔
2015/08/15 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android
python实现简单的三子棋游戏
2022/04/28 Python
Redis 限流器
2022/05/15 Redis