微信小程序的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 相关文章推荐
Javascript的构造函数和constructor属性
Jan 09 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 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 的 __FILE__ 常量
2007/01/15 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
js闭包用法实例详解
2016/12/13 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
基于python socketserver框架全面解析
2017/09/21 Python
python 文件查找及内容匹配方法
2018/10/25 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
Python玩转Excel的读写改实例
2019/02/22 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
python 操作hive pyhs2方式
2019/12/21 Python
tensorflow 环境变量设置方式
2020/02/06 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
幼儿园五一活动方案
2014/02/07 职场文书
党校学习自我鉴定
2014/02/24 职场文书
《学会合作》教学反思
2014/04/12 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
房屋出租委托书格式
2014/09/23 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server