微信小程序和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
编辑器打开
微信小程序和uniapp开发工具相关推荐
- 区分微信小程序版本(开发工具中、开发版、体验版、正式版)的方法?
平凡也就两个字: 懒和惰; 成功也就两个字: 苦和勤; 优秀也就两个字: 你和我. 跟着我从0学习JAVA.spring全家桶和linux运维等知识,带你从懵懂少年走向人生巅峰,迎娶白富美! 关注微信 ...
- 微信小程序——账号及开发工具
1. 注册微信小程序账号 点击我进入微信公众平台 进入后点击立即注册 注册成功且登录后进入小程序管理后台 2. 安装开发者工具 点击进入开发文档 进入安装开发工具(稳定版本) 一路默认下一步进行安装 ...
- 微信小程序 - 使用 uni-app 开发小程序以及部分功能实现
文章目录 一.uni-app 1.简介 2.开发工具 3.新建 uni-app项目 4.把项目运行到微信开发者工具 二.实现tabBar效果 1.创建tabBar页面 2.配置tabBar 三.配置网 ...
- HBuilderX搭建微信小程序;HBuilderX开发uni-app微信小程序;uni-app开发微信小程序;使用uni-app搭建微信小程序;使用uni-ui模板搭建微信小程序步骤
1.选择模板 uni-ui 2.得到创建项目 3.获取APPid 在微信小程序电脑后台获取APPID 这个方法适用于自己申请的微信小程序(自己用的小程序) 打开微信小程序官网:https://mp.w ...
- 【微信小程序】uniapp开发小程序如何使用微信云托管或云函数进行云开发
一. 申请微信云托管 这个不用说吧必须的,官方地址在这.直接进去申请就行. 但是前提是你得会创建docker file,学习掌握一些基本的docker知识,会让你创建环境变得简单一点.环境创建完成之后 ...
- 微信小程序:uni-app云开发的网盘助手
这是一款uni-app开发的一款网盘小助手小程序源码 该源码主要用于用户输入关键词然后全网抓取百度网盘资源内容 另外呢该小程序还可以免费领取百度网盘七天会员,所以用来引流特别的不错 该小程序还有外卖系 ...
- 微信小程序开发教程(一)--注册小程序、下载开发工具及新建工程
从本章开始,我们将讲解微信小程序的简单开发流程,我将尽量使用简洁的语言,逐个步骤详细讲解,让大家都能跟得上,也希望和大家交流学习. 注册 首先,开发小程序需要先在微信注册. 打开网页:https:// ...
- 解决小程序插槽slot内容显示不对,无论是原生小程序还是uniapp开发的,解决办法如下
原文地址:解决小程序插槽slot内容显示不对,无论是原生小程序还是uniapp开发的,解决办法如下!在一次使用小程序插槽的时候,发现如论在哪里使用插槽,内容在子组件上展示和根目录同级,这其实是pc端微 ...
- 微信小程序组件库开发记录
微信小程序组件库开发记录 背景 前言 技术选型 环境搭建 安装 gulp 将`scss`编译为`wxss` 压缩`wxml`,`js`,`json`文件和图片 拷贝文件到另一个目录 删除目录 整合 创 ...
最新文章
- “男医生,女护士?”消除偏见,Google有大招
- java Export Excel POI 转
- C#跳转语句 迭代法 穷举法
- Spring-AOP 自动创建代理之AnnotationAwareAspectJAutoProxyCreator
- ES6中import * as xxx from ‘xxx‘的作用
- 2019年查询12年前的往届高考成绩(适用浙江省)
- PrintJ的设计模式之旅——1.模式之父
- python输出所有组合数_python – GridSearchCV是否存储了所有参数组合的所有分数?...
- 用与非门设计血型配对电路_利用与非门CD4011做一个防盗报警器,那些高大上就这么简单...
- java 陷阱_Java基础知识陷阱
- 90 后篮球运动员成功转型 iOS 开发,过程超刺激
- String+char+byte+ascii+unicode
- Docker核心技术与实现原理
- 20200720 PLECS培训教程笔记
- 电视机进入工厂模式,factory,怎么退出
- 控制工程——传递函数与状态方程
- 机顶盒ttl无法输入_中兴机顶盒B8601.1T TTL后跑码无法输入指令
- 使用ps命令结束相应进程
- 一款游戏让你成为 Vim 高手!
- 关于VS2022 C++报错 const char* 类型的实参与char *类型的形参不兼容解决办法