微信小程序的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 相关文章推荐
google 搜索框添加关键字实现代码
Apr 24 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
jQuery表单验证插件解析(推荐)
Jul 21 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
详解vue3中组件的非兼容变更
Mar 03 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
php 分页原理详解
2009/08/21 PHP
php explode函数实例代码
2012/02/27 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
百度留言本js 大家可以参考下
2009/10/13 Javascript
一个原生的用户等级的进度条
2010/07/03 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
Django设置Postgresql的操作
2020/05/14 Python
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
寒假实习自荐信
2014/01/26 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技