微信小程序和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 编辑器打开
