微信小程序的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 相关文章推荐
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 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实现链结人气统计
2006/10/09 PHP
php 删除数组元素
2009/01/16 PHP
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
Python正则表达式匹配ip地址实例
2014/10/09 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python实现的字典值比较功能示例
2018/01/08 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
大专生工程监理求职信
2013/10/04 职场文书
酒店总经理助理岗位职责
2014/02/01 职场文书
献爱心倡议书
2014/04/14 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
庆祝教师节标语
2014/10/09 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
刘胡兰观后感
2015/06/16 职场文书
nginx日志格式分析和修改
2022/04/28 Servers
python解析照片拍摄时间进行图片整理
2022/07/23 Python