微信小程序和uniapp开发工具

微信开发者工具和文档操作

1. 安装扩展

复制vscode扩展(路径C:\Users\用户名.vscode\extensions)到微信开发者工具的扩展目录(点击工具栏,编辑->打开编辑器扩展目录)

Auto Rename Tag-标签重命名

Bracket Pair Colorizer 2-括号颜色区分

JavaScript standardjs styled snippets-javascript代码片段

Prettier - Code formatter-文件格式化

px to rem & rpx (cssrem)-px转rem和rpx

2. 修改键盘快捷键

工具栏,点击文件->首选项->Keyboard Shortcuts

​ 搜索触发建议,将其改为alt+/

​ 搜索目录树,将其改为ctrl+b

​ 搜索调试器,将其改为f12

​ 搜索预览，将其改为Ctrl+Shift+Alt+P;搜索Show All Commands,将其改为Ctrl+Shift+P

3. 编辑器配置

按下Ctrl+Shift+Alt+P,输入setting,点击首选项:打开设置(json)添加如下内容

//自动格式化
"editor.formatOnSave": true,
//自动补充右花括号
"editor.autoClosingBrackets": "always",
//px转rpx    
"cssrem.wxss": true, 

4. 查询文档

(1) 在编辑器中,在组件上面,点击微信开发文档
(2) 安装浏览器扩展User Javascript And CSS
添加给网站,添加css

.NavigationLevel--closed ul{
	display: block !important;
}

5. 添加代码片段

(1) html代码片段
点击文件->首选项->用户代码片段,搜索html

{
	"wx:if": {
		"prefix": "wx:if",
		"body": [
			"wx:if=\"{{${1:condition}}}\""
		],
		"description": ""
	},
	"wx:elif": {
		"prefix": "wx:elif",
		"body": [
			"wx:elif=\"{{${1:condition}}}\""
		],
		"description": ""
	},
	"wx:else": {
		"prefix": "wx:else",
		"body": [
			"wx:else"
		],
		"description": ""
	},
	"wx:for": {
		"prefix": "wx:for",
		"body": [
			"wx:for=\"{{${1:items}}}\" wx:key=\"${2:index}\""
		],
		"description": ""
	},
	"wx:for-complete": {
		"prefix": "wx:for-complete",
		"body": [
			"wx:for=\"{{${1:items}}}\" wx:for-index=\"${2:index}\" wx:for-item=\"${3:item}\" wx:key=\"${4:index}\""
		],
		"description": ""
	}
}

6 查看配置的详情

第1步:

第2步:

第3步:

HBuilderX开发者工具操作

1.安装扩展

prettier-格式化less、sass、vue、stylus(vue内嵌)、ts、yaml代码
下载地址
Vue/Vuex/Vue Router代码块-Vue 2/3 代码片段，语法高亮和格式化插件
下载地址
Javascript代码块
下载地址
scss/sass编译-编译scss/sass为css
下载地址
Case Shift-将文本在大驼峰、小驼峰、蛇形、短线形之间转换
下载地址
px2rpx-在 Hbuilder 中自动将 px 转化成 rpx
下载地址

2. 修改键盘快捷方式

操作步骤：工具 -> 预设快捷键方案切换 -> VS Code

  {"key":"alt+z","command":"editor.action.toggleWordWrap"},
  {"key":"alt+/","command":"editor.action.triggerSuggest"}

3. 修改编辑器的基本设置

操作步骤：工具 -> 设置 -> 打开 Settings.json 按需进行配置

  "editor.colorScheme": "Default",
  "editor.fontSize": 12,
  "editor.fontFamily": "Consolas",
  "editor.fontFmyCHS": "微软雅黑 Light",
  "editor.insertSpaces": true,
  "editor.lineHeight": "1.5",
  "editor.minimap.enabled": false,
  "editor.mouseWheelZoom": true,
  "editor.onlyHighlightWord": false,
  "editor.tabSize": 2,
  "editor.wordWrap": true,
  "explorer.iconTheme": "vs-seti",
  "editor.codeassist.px2rem.enabel": false,
  "editor.codeassist.px2upx.enabel": false

4.自定义代码片段

打开工具->代码片段设置->vue代码片段

{
  "v-for": {
      "body": [
          "v-for=\"(${1:item},${2:index}) in ${3:Data}\" :key=\"${2:index}\""
      ],
      "prefix": "v-for",
      "scope": "HTML_ATTRIBUTE",
      //project的值可能为uni-app、Web、App、Wap2App,如果不设置，则该代码块在所有项目类型下均生效。
      //"project": "uni-app"
  }
}

5.查看组件的文档

6 新建文件模板

7.查看组件的demo和复制代码

运行到浏览器

8.解决点击运行后,微信开发者工具不自动打开

(1)查看要导入文件夹

(2)手动导入文件夹

9.解决修改代码后,微信开发者工具不刷新

(1)首先,优先考虑在代码在浏览器运中行正常

(2)点击重新编译

chrome跨域设置

1.查看chrome路径

2.写cmd文件

创建运行chrome.cmd文件

cd C:\Program Files (x86)\Google\Chrome\Application\
chrome.exe --args --disable-web-security --user-data-dir="C:/ChromeDevSession"

3.运行cmd文件

双击运行chrome.cmd文件

通过vscode开发cli创建的uni-app项目

1.创建项目

vue create -p dcloudio/uni-preset-vue my-project

选择模板

2.安装编辑器扩展

• uni-app-snippets-uni-app的代码片段
• uni-ui-snippets-uni-ui的代码片段
• uni-app-schemas-mainifest.json和pages.json的配置校验

3.安装项目依赖

前提扩展vetur安装好了,安装组件语法提示

npm i @dcloudio/uni-helper-json

4.运行项目

# 运行H5平台
npm run dev:h5 
# 运行微信小程序
npm run dev:mp-weixin

5.发布项目

# 发布H5平台
npm run build:h5
# 发布微信小程序
npm run build:mp-weixin

通vscode开发HBuilderX创建的uni-app项目

1.安装编辑器扩展

• uni-app-snippets-uni-app的代码片段
• uni-ui-snippets-uni-ui的代码片段
• uni-app-schemas-mainifest.json和pages.json的配置校验

2.安装项目依赖

• 生成package.json

npm init -y

• uni-app 语法提示

npm i @types/uni-app -D
npm i @types/html5plus -D

• 安装组件语法提示

前提扩展vetur安装好了

npm i @dcloudio/uni-helper-json

3.json文件打开方式

uni-app 项目下的 manifest.json、pages.json 等文件可以包含注释。vscode 里需要改用 jsonc 编辑器打开