如何通过vscode开发调试uniapp小程序

灵动的弘吉吉
3,977 阅读4分钟

如何通过vscode开发调试uniapp小程序

前言

前端开发中，对使用uniapp开发小程序大家并不陌生，并且使用HbuilderX编译器对uniapp进行配置后，运行代码，通过微信开发者工具查看项目效果即可。那么，在平时使用习惯了VScode的前端开发者们将如何将uniapp开发的小程序完美呈现在微信开发者工具当中呢？本篇博客将详细阐述VScode编译器使用uniapp搭建小程序的整体流程，方便运用VScode的小伙伴们进行操作。

准备工作

  1. 在新建项目之前，安装vue框架以及uniapp相关的VScode插件，既能方便开发也能满足代码规范，这里推荐几个实用插件，例如：

    · Vetur Vue 语法提示插件
· vue-helper 又一款Vue语法插件，和Vetur 结合使用
· Auto Close Tag 标签自闭合插件，在使用外部组件的时候非常有用
· Auto Rename Tag 标签重命名插件，当需要更改标签名称的时候非常有用
· Highlight Matching Tag 高亮选中的标签，快速定位标签的首尾位置
· TODO Highlight 高亮代码中的待办
· Todo Tree 和 TODO Highlight 结合，构建体验更完美todo管理系统
· koroFileHeader 快速生成头部注释和代码注释

... 还有许多插件，这里就不再多做赘述了。

  2. 安装vue脚手架以及配置vue框架，并检查vue是否已经在当前项目或全局安装。我们使用 vue2 创建工程作为示例，uni-app中Vue2版的组件库和插件也比较多，稳定、问题少，可以先参考下官方文档。工程化既然是使用vue脚手架，那肯定要全局安装@vue/cli，已安装的可以跳过。（详情可查看vue官网： VUE官网）

    npm install -g @vue/cli

注意：Vue2创建的项目，脚手架版本要用@4的版本，用@5的版本运行项目会报错，这里推荐 @4.5.15

项目搭建

  1. 创建项目 :
vue create -p dcloudio/uni-preset-vue + 项目名

创建后进行模板选择，选择默认模板即可。

1677028754108.jpg
  1. 配置结束后查看目录结构如下
1677028441441.jpg
  1. 配置mainfest.json
{
	"name": "",
	"appid": "xxxxx", // 微信小程序的AppID
	"description": "",
	"versionName": "1.0.0",
	"versionCode": "100",
	"transformPx": false,
	"app-plus": { /* 5+App特有相关 */
		"usingComponents": true,
		"splashscreen": {
			"alwaysShowBeforeRender": true,
			"waiting": true,
			"autoclose": true,
			"delay": 0
		},
		"modules": { /* 模块配置 */

		},
		"distribute": { /* 应用发布信息 */
			"android": { /* android打包配置 */
				"permissions": ["<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
					"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
					"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
					"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
					"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
					"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
					"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
					"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
					"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
					"<uses-permission android:name=\"android.permission.CAMERA\"/>",
					"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
					"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
					"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
					"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
					"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
					"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
					"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
					"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
					"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
					"<uses-feature android:name=\"android.hardware.camera\"/>",
					"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
					"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
				]
			},
			"ios": { /* ios打包配置 */

			},
			"sdkConfigs": { /* SDK配置 */

			}
		}
	},
	"quickapp": { /* 快应用特有相关 */

	},
	"mp-weixin": {
		"appid": "xxxxx", // 微信小程序的AppID
		"setting": {
			// 微信小程序项目设置
			"urlCheck": true, // 是否检查安全域名和 TLS 版本
			"es6": true, // ES6 转 ES5
			"postcss": true, // 上传代码时样式是否自动补全
			"minified": true // 上传代码时是否自动压缩
		},
		"usingComponents": true, // 是否启用小程序组件配置
		"permission": {
			// 定位授权配置
			"scope.userLocation": {
				"desc": "你的位置信息将用于小程序位置接口的效果展示"
			}
		}
	},
	"mp-alipay" : {
        "usingComponents" : true
    },
    "mp-baidu" : {
        "usingComponents" : true
    },
    "mp-toutiao" : {
        "usingComponents" : true
    },
    "mp-qq" : {
        "usingComponents" : true
    }
}

切记输入自己的微信小程序AppID，否则编译器将报错，项目无法正常运行。

  1. 配置pages.json

    配置easycom规则，easycom 规则扫盲文章参见easycom模式，UNI-APP组件开发调用必须掌握的实用技巧

    {
 "easycom": {
     "autoscan": true,
     "custom": {
         // uni-ui 规则如下配置
         "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
     }
 },
 "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 	{
 		"path": "pages/login/login",
 		"style": {
 			"navigationBarTitleText": "星航互联监控"
 		}
 	}
 ],
 "globalStyle": {
 	"navigationBarTextStyle": "black",
 	"navigationBarTitleText": "星航互联监控",
 	"navigationBarBackgroundColor": "#3cb79a",
 	"backgroundColor": "#F8F8F8"
 }

  2. 运行项目

    npm run dev: %platform%
    %platform值平台
    h5H5
    mp-alipay支付宝小程序
    mp-baidu百度小程序
    mp-weixin微信小程序
    mp-toutiao头条小程序
    mp-toutiao头条小程序
    mp-qqqq 小程序

  3. 导入项目

    VSCode跟Hbuilder x 不同的是，VSCode不会自动在微信开发者工具导入项目并打开，我们需要手动导入项目，只需要导入一次就行了，以后直接打开微信开发者工具就行了, 在微信开发者工具导入打包出来的文件夹。

1677030611891.jpg 
至此即可在vscode中使用vue代码以及相关语法进行小程序功能的开发了，并可以实时同步渲染在微信开发者工具上。总的来说，但最终获得体验也是非常不错的。
avatar
文章
阅读
粉丝