微信小程序的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 相关文章推荐
html数组字符串拼接的最快方法
Sep 16 Javascript
JavaScript 学习技巧
Feb 17 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
详解Vue-axios 设置请求头问题
Dec 06 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
package.json中homepage属性的作用详解
Mar 11 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
解决微信小程序云开发中获取数据库的内容为空的方法
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
星际实力自我测试
2020/03/04 星际争霸
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
jQuery实现查看图片功能
2020/12/01 jQuery
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
python encode和decode的妙用
2009/09/02 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
2014全国两会大学生学习心得体会
2014/03/10 职场文书
经管应届生求职信范文
2014/05/18 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
python正则表达式re.search()的基本使用教程
2021/05/21 Python
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python