微信小程序的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 相关文章推荐
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
php中给js数组赋值方法
Mar 10 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
解决微信小程序云开发中获取数据库的内容为空的方法
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教程孙仲岳主讲
2008/01/07 PHP
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
仓库主管的岗位职责
2013/12/04 职场文书
超市创业计划书
2014/04/24 职场文书
小学社团活动总结
2014/06/27 职场文书
高校教师个人总结
2015/02/10 职场文书
请假条应该怎么写?
2019/06/24 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS