位置: IT常识 - 正文
推荐整理分享如何使用Vscode开发Uni-app项目以及注意事项详解(vscode怎么开始编程),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:vscode怎么启动web项目,vscode怎么打开命令窗口,如何使用vscode开发java,vscode开发,vscode打开后如何写代码,vscode打开后如何写代码,如何使用vscode开发java,用vscode打开,内容如对您有帮助,希望把文章链接给更多的朋友!
哟,大牛来了!!!
前言:想必大家敲代码用的编辑器大多数都是Vscode吧,随着技术的更新,uni-app成为了前端不可或缺的一项技术,但是呢,官方推荐使用的HBuilderX编辑器让习惯了使用Vscode的我们不太习惯,虽然HBuilderX编辑器对uni-app极度的友好,但还是让在座的各位大牛以及未来的大牛不适应,接下来就为大家讲解如何使用Vscode开发uniapp项目。
既然大家都搜索这个了,那创建uniapp项目这一步我就省略了,想知道怎么创建的小伙伴可以去这里查看点我去往属于uniapp的乐园(小tips: 需要注意的是uniapp创建项目需要vue-cli脚手架,要么就是用HBuilderX可视化创建,不过我们需要用的是vue-cli创建)
一、准备工具
我们需要准备两个东西,第一个自然就是Vscode,第二个就是微信开发者工具点我去下载地址(小tips:选择稳定版然后选择你的系统就好了,如果你的项目需要什么最新特性的话就选择开发版,不过可能不稳定)
二、更改一下项目配置文件 安装好了之后呢我们用Vscode打开uniapp的项目后接下来就是重点了。 首先我们先把package.json文件夹中的启动方式和打包方式更改一下,像这样: 这个时候我相信大家开发过小程序应该都有小程序的测试号吧,没有的话得去申请一个(点我去申请测试号),拥有了测试号后我们在src目录下找到一个名为manifest.json的文件将里面的appid修改为你的测试号的Appid( 不知道自己测试号是啥的进这里 用微信扫码进去后就能看见你的测试号ID了,基本就是wx********什么什么的)
做完上面的事情后我们调出终端启动一下:
启动完毕后呢目录中会出现一个dist打包文件
三、渲染效果
打开微信开发者工具选择dist打包文件里面的mp-weixin文件给她导入进去
然后就能在微信开发者工具里面看见你的uniapp项目长啥样了
到了这一步你就可以在Vscode里面写你的uniapp项目了( 小tips:微信开发者工具的热重载得开启,不然Vscode代码保存了微信开发者工具还得手动编译才能获取最新页面)
按照以上的步骤来就能用Vscode开发你的uniapp小程序了,如果有什么问题可以在评论里面说一说。
上一篇:绿萝怎么修剪,这样修剪绿萝叶子让其长得才能更旺盛(图文)(绿萝怎么修剪才能更旺盛)
下一篇:微信升级后不再使用x5内核,debugx5.qq.com打不开,如何开启微信调试?(微信用不升级)
友情链接: 武汉网站建设