如何通过 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 + 项目名

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

2. 配置结束后查看目录结构如下

3. 配置 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，否则编译器将报错，项目无法正常运行。

4. 配置 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"
    }
   
   
   

5. 运行项目

   npm run dev: %platform% 
   
   
   

   %platform 值	平台
   h5	H5
   mp-alipay	支付宝小程序
   mp-baidu	百度小程序
   mp-weixin	微信小程序
   mp-toutiao	头条小程序
   mp-toutiao	头条小程序
   mp-qq	qq 小程序

6. 导入项目

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

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