(一)微信小程序从入门到实战之开发工具安装

news/2024/4/16 2:04:46

俗话说工欲善其事,必先利其器,作为一名程序员,开发软件和开发环境是我们进行软件开发的必要条件。但是对于很多新入门的朋友来说,安装开发环境和配置环境变量,通常把大多数人拦在门外,所以这篇博客,咱们先来介绍一下怎么安装小程序开发环境和配置环境变量。

1、开发软件和环境

  1. node.js

Node.js 是一个开源和跨平台的 JavaScript 运行时环境。 它几乎是任何类型项目的流行工具!
Node.js 在浏览器之外运行 V8 JavaScript 引擎(Google Chrome 的内核)。 这使得 Node.js 的性能非常好。
Node.js 应用程序在单个进程中运行,无需为每个请求创建新的线程。 Node.js 在其标准库中提供了一组异步的 I/O 原语,以防止 JavaScript 代码阻塞,通常,Node.js 中的库是使用非阻塞范式编写的,使得阻塞行为成为异常而不是常态。

  1. 微信开发者工具

在原有的公众号网页调试工具的基础上,推出了全新的 微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。

使用公众号网页调试,开发者可以调试微信网页授权和微信JS-SDK
使用小程序调试,开发者可以完成小程序的 API
和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。

  1. HBuilderX

HBuilderX是国产的一个编辑器,非常好用,咱们主要是用来编辑代码和开发软件。
1、轻巧 仅10余M的绿色发行包(不含插件)。
2、极速 不管是启动速度、大文档打开速度、编码提示,都极速响应 。
3、 vue开发强化,HX对vue做了大量优化投入,开发体验远超其他开发工具 详见。
对中国的小程序开发优化,HX可新建uni-app小程序等项目,为国人提供更高效工具, markdown利器。
5、HX是唯一一个新建文件默认类型是markdown的编辑器,也是对md支持最强的编辑器 HX为md强化了众多功能。
6、HX的界面比其他工具更清爽简洁,绿柔主题经过科学的脑疲劳测试,是最适合人眼长期观看的主题界面。 强大的语法提示。
7、HX是中国唯一一家拥有自主IDE语法分析引擎的公司,对前端语言提供准确的代码提示和转到定义(Alt+鼠标左键)。
高效极客工具。更强大的多光标、智能双击…让字处理的效率大幅提升,更强的json支持。
9、现代js开发中大量json结构的写法,HX提供了比其他工具更高效的操作 。
10、 C++的架构性能远超Java或Electron架构。

2、安装node.js

第一步,咱们先把node.js的安装包下载下来
下载地址:node.js

接着按下图所示,依次点击next的按钮
在这里插入图片描述
在这里插入图片描述
这一步是选择安装目录,我一般习惯安装在D盘上,大家可以根据自己的需要选择安装路径
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这一步是最后一步,直接点击installl按钮即可安装
在这里插入图片描述
当出现这个页面的时候,说明你已经把node.js安装成功了,然后点击finish结束
在这里插入图片描述

3、安装微信开发者工具

咱们先微信官网把微信开发者工具安装包下载下来
下载地址:微信开发者工具

如下图所示依次点击下一步安装
在这里插入图片描述
在这里插入图片描述
这里是选择微信开发者工具安装目录,我还是习惯了安装在D盘,大家根据自己的需要选择
在这里插入图片描述
最后点击完成即可将微信开发者工具安装成功
在这里插入图片描述

4、安装HBuilderX

HBuilderX的安装就比较简单了,直接在官网将他的压缩包下载下来,然后解压到对应目录即可使用
下载地址:HBuilderX
在这里插入图片描述
在这里插入图片描述

5、验证以下是否所有软件都安装成功

这一步主要是包括一些环境变量的配置,同时测试咱们的环境和软件是否都能正常使用。

咱们的开发流程主要是在HBuilderX上边写代码,然后通过微信开发者工具进行调试和上传代码到微信公众平台,最后进行发布。

双击打开微信开发者工具和HBuilderX页面如下,然后咱们用自己的微信扫描该二维码登录微信开发者工具
在这里插入图片描述
登录成功的界面如下图所示
在这里插入图片描述
接着咱们配置一下微信开发者工具的服务端口,主要是给HBuilderX进行调用
在这里插入图片描述
我们可以导入一个测试项目进行测试一下,点击下载恋爱话术小程序,然后点击如下图所示的运行到小程序
在这里插入图片描述
第一次使用的时候需要选择一下微信开发者工具的安装目录,咱们正常选择即可
在这里插入图片描述
因为是第一次编译,所以会下载一些必须的插件,只要慢慢等待即可
在这里插入图片描述
当插件下载完成之后,在HBuilderX再次点击运行到小程序,然后在微信开发者工具上面即可出现咱们测试项目的页面,当到达这一步,就说明咱们的软件安装和环境变量配置已经圆满结束。
在这里插入图片描述


http://www.ppmy.cn/news/896882.html

相关文章

微信、QQ上线国产系统UOS:界面曝光

作者 l 崔丽容来源 l 转载自公众号:电脑报(ID:CQCPCW)关于统信UOS能否最终撑起国产操作系统生态大旗,大家看法不一,有人说它是“国货之光”,堪称最好的国产系统,但也不乏批评的声音。…

微信 QQ等主流应用上线国产系统 UOS:界面曝光

点击上方“逆锋起笔”,公众号回复 编程资源 领取大佬们推荐的学习资料作者 l 崔丽容 来源 l 转载自公众号:电脑报(ID:CQCPCW)关于统信UOS能否最终撑起国产操作系统生态大旗,大家看法不一,有人说它是“国货之光”&#…

国产Linux系统下替代QQ和微信的不二之选

在2019年,UOS宣布成立至今,原深度系统得到资金之后,发展速度直线上升,目前已经完全可以使用Deepin系统进行办公和日常使用了 UOS是Deepin的专业版,前者收费,后者免费,和红帽一样的运营策略 但是&#xff0c…

ES6类-继承-Symbol-模版字符串

目录 类 继承 ES5 如何继承 ES6继承 Symbol 用途 可以产生唯一的值,独一无二的值 解决命名冲突 getOwnPropertySymbols() 作为全局注册表 缓存 Symbol.for() 消除魔术字符串 模版字符串 类 在javascript语言中,生成实例对象使用构造函数&#xf…

Vue 前端问题 - 学习记录

目录 问题1 Vue 关于如何使用 background-image 属性参考链接 问题 2 文字内容溢出自动换行或不换行方法参考链接 问题 3 动态修改 dom 元素的方法参考链接 问题 4 前端样式 :: 和 : 伪元素的理解参考链接 问题5 理解 :before 和 :after 伪元素参考链接 问题6 Vue 如何实现获取…

设置网页视频播放倍速

此方法也可以真多一些无法快进的网页视频或者限制了快进倍速选项的视频,按F12打开console控制台输入代码后可以自定义设置视频倍速 设置视频倍速:document.querySelector("video").playbackRate"16"

网页版视频怎么加快播放速度

1 、 打开视频,播放 2 、 按F12打开开发者选项 3 、 选中console面板,输入指令 4 、 指令为:document.querySelector(‘video’).playbackRate 12.0 这个时候,您播放的视频就可以倍速播放了。需要将2改成需要的速度就可以&am…

网页倍速播放

法一: videojs.getPlayers(“video-player”).html5player.tech_.setPlaybackRate(2) 法一:document.querySelector(‘video’).playbackRate 2; 法三:videojs.getPlayers(“video-player”).html5player.tech_.setPlaybackRate(5)

播放倍速加速

在加速的页面 F12 浏览器控制台 console 输入即可 document.querySelector(‘video’).defaultPlaybackRate 15.0;//默认两倍速播放 document.querySelector(‘video’).play(); /* now play three times as fast just for the heck of it */ document.querySelector(‘video…

potplayer 设置固定播放速度播放

熟悉potplayer的人都知道,这款播放器有一个速播功能,苦于每次需要用鼠标点击来操作,每个视频都有如此操作比较繁琐。 摸索后发现有快捷键可使用:快捷键可以设置。 默认每次加速0.1,减速0.2。这部分的修改如下图。修改…

百度云在线视频倍速播放

因为是研友的提起,所以我总结了一下我常见的处理方式,写在了公众号里面,劳烦各位移步一下哈,请点击:在线倍速攻略

视频倍速播放

考研视频的语速实在太慢。。。提供一种视频倍速播放的方法。 在电脑浏览器(如果你使用的是chrome的话)中打开视频,按F12进入开发者模式,将下面的代码粘贴到console当中即可,下面的代码就是1.5倍速播放, 其…

百度网盘视频在线(倍速播放)

百度网盘视频在线(倍速播放) 实现步骤: 在网页打开百度网盘,在期中找到要观看的视频选择好视频之后,在视频的网页按下F12在Console下输入以下这条命令就可以开启倍速观看了我选的是1.5倍速的 例子: 代码: videojs.getPlayers("video-player&qu…

网页视频倍速播放的方法

很多网页的视频不支持倍速播放,谷歌浏览器下载插件也太麻烦 不下载插件让浏览器倍速播放的办法 要求:必须是HTML播放器才可以 第一步: 在视频页面,按f12键 或者鼠标右键点击检查 点击console 第二步: 输入下面这…

百度网盘视频倍速播放

百度网盘视频倍速播放 (更新一下,插件叫“百度云盘HTML5视频倍速播放”,原来那个好像没用了) 因为考研需要刷网课,但是百度云倍速放视频需要svip,30元/月还是挺贵的,于是去查了下其他方法。 1.简单粗暴&a…

video倍速播放

1、使用HTMLMediaElement的playbackRate特性来改变播放速度 video.playbackRate playbackRate;2、通过配置currentTime来实现快进 video.currentTime video.currentTime 5;

网页设置倍速播放

倍速播放(一定可以成功) 第一步,打开网页(这里我随便打开一个含视频的网页,我这里用的是谷歌浏览器,谷歌加速能达到16倍,其他的浏览器一样适用以下方法) 第二步,按键盘…

复习,网课,视频回放,太慢怎么办,试试倍速播放吧 (无需下载)

临近期末,复习任务繁忙,想要会看视频,却又觉得视频讲得太慢,那么该如何实现网页端的强制倍速播放呢? 大多浏览器都带有开发人员选项,以谷歌浏览器为例: 这是我校的在线教育平台,可…

2021百度网盘网页版视频在线倍速播放

时间过得好快,转眼就又是一年,上次分享的使用Console输入代码以实现视频倍速的方法貌似失效了,所以这次使用的是浏览器插件以实现倍速播放功能。 Global Speed视频加速插件 Global Speed插件是一款视频加速插件,几乎对所有含视频…

浏览器之倍速播放法

本文为大家介绍三种浏览器(火狐、谷歌、360)的倍速方法,添加扩展程序即可,操作简便,详细操作方法可参考下文,欢迎大家一起学习,共同进步! I. Firefox浏览器倍速播放 1.打开火狐浏览…
最新文章