使用基于mpvue的框架开发微信小程序(搭建环境)

简介: 美团很早就开源了mpvue这个项目,如此看来,美团可不仅仅是一家团购网站,真正的技术驱动型企业,使得我们多了一种用来开发微信小程序的框架选项。由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用法上面是高度和Vue一致的(某些功能由于受限于小程序环境本身的原因而不能使用,但是瑕不掩瑜),这给使用过Vue开发Web应用的前端开发者提供了极低的门槛来开发小程序。

美团很早就开源了mpvue这个项目,如此看来,美团可不仅仅是一家团购网站,真正的技术驱动型企业,使得我们多了一种用来开发微信小程序的框架选项。由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用法上面是高度和Vue一致的(某些功能由于受限于小程序环境本身的原因而不能使用,但是瑕不掩瑜),这给使用过Vue开发Web应用的前端开发者提供了极低的门槛来开发小程序。

搭建所需的软件环境,首先mpvue是基于vue.js,同时也需要vue-cli脚手架,注意一点:你的node环境版本必须大于9.0,否则会出现和新版mpvue不兼容的情况,首先去微信公众号平台注册开发者账号: https://mp.weixin.qq.com 记得验证一下开发者身份,另外获取appid,并且点击生成appsecret秘钥,一般审核速度很快,大概一天就会通过。附上微信小程序开发文档: https://developers.weixin.qq.com/miniprogram/dev/framework/

npm cache clean --force

npm set registry https://registry.npmjs.org/

npm install npm -g

npm install -g vue-cli

npm cache clean --force

安装好之后,查看node版本是否大于9.0 node -v

之后,运行命令,创建一个mpvue的工程

vue init mpvue/mpvue-quickstart mpvue

图上的appid就是注册时获取到的

随后进入到项目目录中:cd mpvue

输入命令安装依赖

npm install

安装成功后,在项目目录下输入npm run dev 启动项目

mpvue的项目结构是这样的:

可以看到,和传统的vue项目没有任何差别,简直太友好了

此时,可以去下载一个微信小程序开发者工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

选择适合自己系统的版本下载,这里我下载mac版,缺点是体积有点略大,安装后要500多m,希望腾讯以后可以压缩一下,轻量级开发工具应该小巧轻便。

打开微信小程序开发工具,点击➕新建项目

选择导入项目,输入项目目录以及appid

最后打开导入的项目,这时候需要耐心等待一小会,不要着急

成功打开后,就可以看到界面了

此时只要修改对应的vue组件,小程序就会实时进行更改,不过需要注意一点,新建组件的时候,需要手动重启mpvue项目:npm run dev

是不是很简单呢,如果你是一位精通vue的开发者,那么开发微信小程序对于你来说也就是a piece of cake

相关文章
|
1天前
|
小程序 应用服务中间件 Linux
【Nginx】微信小程序后端开发、一个域名访问多个服务
【Nginx】微信小程序后端开发、一个域名访问多个服务
11 0
|
1天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
12 1
|
1天前
|
小程序 前端开发 JavaScript
轻松学会微信小程序开发(一)
轻松学会微信小程序开发(一)
|
1天前
|
JSON 小程序 JavaScript
微信小程序开发1
微信小程序开发1
|
1天前
|
数据采集 存储 人工智能
【Python+微信】【企业微信开发入坑指北】4. 企业微信接入GPT,只需一个URL,自动获取文章总结
【Python+微信】【企业微信开发入坑指北】4. 企业微信接入GPT,只需一个URL,自动获取文章总结
40 0
|
1天前
|
人工智能 机器人 API
【Python+微信】【企业微信开发入坑指北】3. 如何利用企业微信API给微信群推送消息
【Python+微信】【企业微信开发入坑指北】3. 如何利用企业微信API给微信群推送消息
33 0
|
1天前
|
缓存 人工智能 API
【Python+微信】【企业微信开发入坑指北】2. 如何利用企业微信API主动给用户发应用消息
【Python+微信】【企业微信开发入坑指北】2. 如何利用企业微信API主动给用户发应用消息
21 0
|
1天前
|
XML 人工智能 数据安全/隐私保护
【Python+微信】【企业微信开发入坑指北】1. 数据链路打通:接收用户消息处理并回复
【Python+微信】【企业微信开发入坑指北】1. 数据链路打通:接收用户消息处理并回复
17 0
|
1天前
|
人工智能 算法 API
【Python+微信】【企业微信开发入坑指北】0. 创建自建应用并接入自己的服务
【Python+微信】【企业微信开发入坑指北】0. 创建自建应用并接入自己的服务
20 0
【Python+微信】【企业微信开发入坑指北】0. 创建自建应用并接入自己的服务
|
1天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。

热门文章

最新文章