一个会vue的前端,如何快速上手开发小程序

网友投稿 960 2022-09-22

如题,在我们掌握VUE技术的提前之上,如果小程序也能用vue的方式开发,那岂不是得心应手。

技术框架:mpVue + vant-weapp

1.初始化一个mpvue项目

现代前端开发框架和环境都是需要 Node.js 的,如果没有的话,请先- nodejs 并安装。然后打开命令行工具:

图片描述

随着运行成功的回显之后,可以看到本地多了个 dist 目录,这个目录里就是生成的小程序相关代码。

图片描述

2.搭建小程序开发环境

小程序自己有一个专门的微信开发者工具,最新版本-。

这一步比较简单,按照提示一步步安装好就行,然后用微信扫描二维码登陆。 至此小程序的开发环境差不多完成。

3.调试开发mpvue

选择 小程序项目 并依次填好需要的信息:

项目目录:就是刚刚创建的项目目录(非 dist 目录)
AppID:没有的话可以点选体验“小程序”,只影响是否可以真机调试。
项目名称。
如图:

图片描述
注意: appid是你微信公众平台->小程序->开发->开发设置->appId

新建完成之后,看到这样一个界面:(我们开发可以选择自己喜欢的编译器,调试必须微信开发者工具.)

图片描述

4.Vant Weapp的安装

通过 npm 安装

npm i vant-weapp -S --production

通过 yarn 安装

yarn add vant-weapp --production

5.Vant Weapp的组件引入

在app.json中进行配置,按需加载引入.

图片描述

注意: 安装完成Vant Weapp之后,需要把node_modules下vant-weapp/dist文件静态复制到static目录下,在进行引入.

6.页面介绍.

page目录下的每个页面,都需要在app.json中的pages中引入.如步骤5图中的所示.

图片描述

1.具体页面开发完全跟之前开发方式完全相同,可以直接使用已经引入的Vant Weapp组件,亦可以直接引入微信小程序原生组件.比如 swiper等.(具体使用参考https://developers.weixin.qq....

2.微信小程序原生的方法使用 mpvue. 方式调用.

图片描述

  1. css单位使用 rpx, 原则上 20rpx === 10px,rpx设置是px单位的2倍数值.

4.其他的具体请参考


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:一位女程序员的奋斗路程
下一篇:使用systemtap抓取ssh登录的用户名和密码
相关文章

 发表评论

暂时没有评论,来抢沙发吧~