微信开发者工具和文档操作1 .在微信开发者工具的扩展目录中安装扩展副本vs代码扩展(路径C:Users用户名. vs代码 extensions )
Auto Rename Tag-重命名标签
Bracket Pair Colorizer 2-括号颜色编码
JavaScript standardjs styled snippets-javascript代码片段
Prettier - Code formatter-文件格式
px to rem rpx (cssrem)-px从px到rem和rpx
2 .修改键盘快捷键工具栏，然后单击“文件”-“首选项”-“键盘快捷键”
搜索建议并选择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 ' 3360 ' always '，//px转换为rpx '
)2)浏览器扩展组件
添加到站点，添加css
. navigation level---- closed ul { display : block！ 导入； } 5.片段(1)添加html片段
单击“文件”-“首选项”-“用户代码片段”并搜索html
{ ' wx : if ' : } { ' prefix ' : ' wx : if '，' body ' : [ ' wx 3360 if=" { $ { 13360 condition } } } } ' wx 333365 ' body ' : [ ' wx 3360 elif=" { $ { 13360 condition } } } ' wx : else ' : { ' prefix ' : ' wx : else '，' bboby ' body ' : [ ' wx : for=' { $ { 1: items } }' wx 3360 key=' $ { 23360 index }'，' descript iiii ] ' wx ' body': ) (wx:for=(() ) $ { 13360 for } ' wx 3360 for-item=' $ { : item } ' wx : key=' '
步骤：
步骤：
HBuilderX开发人员工具操作1 .扩展http://www.Sina.com/-格式化sass、sass、vue、stylus、ts和yaml代码
地址微信开发文档-Vue 2/3代码片段下载、语法突出显示和插件格式
地址User Javascript And CSS
将下载地址http://www.Sina.com/-scss/sass编译为css
下载地址prettier-在大驼峰、小驼峰、蛇形、短线之间转换文本
使用下载地址http://www.Sina.com/-Hbuilder自动将px转换为rpx
下载到
2 .修改键盘快捷键操作步骤：工具-默认快捷键方式切换- vs代码
{'key':'alt z '，' command ' : ' editor.action.toggle word wrap ' }，{'key':'alt /'，' command'}
ettings.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 新建文件模板
运行到浏览器
8.解决点击运行后,微信开发者工具不自动打开(1)查看要导入文件夹
(2)手动导入文件夹
9.解决修改代码后,微信开发者工具不刷新(1)首先,优先考虑在代码在浏览器运中行正常
(2)点击重新编译
chrome跨域设置 1.查看chrome路径 2.写cmd文件创建运行chrome.cmd文件
cd C:Program Files (x86)GoogleChromeApplicationchrome.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 -Dnpm i @types/html5plus -D 安装组件语法提示前提扩展vetur安装好了
npm i @dcloudio/uni-helper-json 3.json文件打开方式uni-app 项目下的 manifest.json、pages.json 等文件可以包含注释。vscode 里需要改用 jsonc 编辑器打开