当前位置:科普知识站>IT科技>

图解怎么利用微信web开发者工具开发第一个程序

IT科技 阅读(3.19W)

首先登陆微信公布的简易教程网页,登陆上去后,点击导航栏上方的“工具”按钮。然后点击左侧边的导航栏“下载”按钮。 微信小程序开发工具有windows 64,windows 32和mac版本,根据自己的电脑情况,下载适合自己的版本。 把微信小程序开发工具下载回

本篇经验将和大家介绍利用利用微信web开发者工具开发第一个程序,希望对大家的工作和学习有所帮助!

方法

打开已经安装的微信web开发者工具,如下图所示:

跟风体验了下微信小程序的开发流程,发现官方的微信 web 开发者工具并不支持在代码中打断点。 用了一阵子 console.log 之后觉得好麻烦,突然想起还有一招: debugger; debugger 语句可以在 Chrome 和 Firefox 下打断点,微信 web 开发者工具应该

图解怎么利用微信web开发者工具开发第一个程序

使用微信扫描二维码登录“微信web开发者工具”,点击“确认登录”,如下图所示:

常见的有 sublime webstorm 其实工具都大同小异,会熟练使用一个就可以了

图解怎么利用微信web开发者工具开发第一个程序 第2张

选择“本地小程序项目”,如下图所示:

准备工具 微信公众号、微信个人号; 电脑; 使用步骤 微信web开发者工具下载,并安装。 启动微信web开发者工具。 登录微信公众号,进入web开发者工具,绑定个人微信号。 通过个人微信号,登录微信web开发者工具。 从微信公众号复制链接到地址栏

图解怎么利用微信web开发者工具开发第一个程序 第3张

点击“添加项目”,如下图所示:

为了帮助开发者简单和高效地开发和调试微信小程序,在原有的公众号网页调试工具的基础上,推出了全新的 微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。 使用公众号网页调试,开发者可以调试微信网页授权和微信JS-SDK 详情 使

图解怎么利用微信web开发者工具开发第一个程序 第4张

添加项目对话框中,选择“无AppID”,填写项目名称和项目目录,然后点击“添加项目”,如下图所示:

使用工具: 电脑; web开发工具; 例子:以安卓的移动调试为范本; 调试步骤: 选择无线网卡地址,默认即可,工具会自动查询无线网卡ip v4地址。 设置 - 无线局域网 - 选中网络 - HTTP代理手动,设置好上面步骤以后,重启微信,这可能是让微信重

图解怎么利用微信web开发者工具开发第一个程序 第5张

创建的项目主界面和项目的目录结构如下图所示:

微信手机端调试工具下载地址 这里写图片描述 注:1.如果安装调试工具-微信Web开发者工具需要卸载以前安装过的微信Web开发者工具(比如小程序-微信Web开发者工具),建议使用腾讯管家之类的清理干净。 2.安装好后,选择移动调试,X5 Blink内核调

图解怎么利用微信web开发者工具开发第一个程序 第6张

点击左侧的“编辑”即可预览项目效果,关于更多开发知识,请参考微信公众平台上的技术文档,如下图所示:

有个曲线救国的方式 微信web开发者工具有beta版,这个不会覆盖正式版,可以共存,也就达到了双开目的。 beta版下载地址 https://mp.weixin.qq.com/cb10f54786/d80df6568e50/cb10e1/cb10e1468e5cdb8d.beta.html

图解怎么利用微信web开发者工具开发第一个程序 第7张

扩展阅读,以下内容您可能还感兴趣。

微信web开发者工具 ios怎么使用

微信web开发者工具主要功能:

使用自己的微信号来调试微信网页授权;

调试、检验页面的 JS-SDK 相关功能与权限,模拟大部分 SDK 的输入和输出;

使用基于 weinre 的移动调试功能;

利用集成的 Chrome DevTools 协助开发。

工具顶部菜单栏是刷新、后退、选中地址栏等动作的统一入口,以及微信客户端版本的模拟设置页。左侧是微信的 webview 模拟器,可以直接操作网

页,模拟用户真实行为。右侧上方是地址栏,用于输入待调试的页面链接,以及清除缓存按钮。右侧下方是相关的请求和返回结果,以及调试界面和登录按钮。本回答被提问者采纳

微信web开发者工具用什么登录

用微信登录,你可以到微信公众平台上找到小程序注册入口,(注意,一定要在这个入口注册账号,如果你在公众平台注册公众号的话就不行了。)注册的时候需要你个微信扫描二维码,这个微信就是管理小程序的管理账号,并且用它登录小程序开发工具。

微信web开发者工具是用什么写的

微信Web开发工具有很多,包括比如说Liveweave、JS Bin、Codepen、Dabblet等等。但是,Web开发人员没必要全部精通,找到适合自己使用的就可以了,然后学到真正的开发技术,成为互联网大型企业都在高薪招聘的web开发人才。

第一种微信Web开发工具——Liveweave

它还有一个吸引我眼球的地方,就是它的协作功能。如果你过去曾经使用过Teamviewer,你会发现它们是相似的。你需要做的事只是点击协作链接,你就可以分享来自于你到weave的链接了。

第二种微信Web开发工具——JS Bin

JS Bin和以前开发平台的区别在于它允许你把文件下载到你的电脑上,这对于开发者,尤其是在离线状态下调试代码的程序员来说,是一个很不错的特点。你还可以创建私人的Bin空间,不过你需要对此付费。另外,JS Bin不支持协作功能。

第三种微信Web开发工具——Codepen

Codepen用于CSS的预处理器包括SCSS、SASS,LESS和Stylus,用于JS的有CoffeeScript和LiveScript,用于HTML的包括Haml、Markdown、Slim和Jade。

第四种微信Web开发工具——Dabblet

现在,Dabblet最棒的地方在于它允许用户以5个不同的视角进行预览,分别是CSS编辑器和效果,HTML编辑器和效果,CSS和HTML的编辑器和效果,JavaScript及运行结果,全部综合效果。这些功能在绝大部分的开发环境中都没有。

第五种微信Web开发工具——JSFiddle

如果你在与其他开发者合作,我强烈建议你使用JSFiddle。在所有的开发环境中,JSFiddle的协作特性是同类型应用中最好的,而且区别于Codepen的是,它的这个特性是操作简单并且免费的。

第六种微信Web开发工具—— CSSDeck C

SSDeck虽然很简洁,但它有一个让我很吃惊的特性,就是它支持用户改变字体大小,这是一个简单却实用的功能。所以说,如果你在寻找有很多很炫的功能的开发平台,CSSDeck可能不适合你。它的简洁性让你更专注于最重要的事情,这也是它最大的特点。本回答被提问者采纳

小白怎么开发者工具开发微信小程序语言

1、首先要下载微信官方的微信Web开发者工具。打开微信公众平台,找到右下方的小程序模块,点击“开发”按钮

2、点击顶部导航栏的“工具”按钮,在新页面的左侧栏中找到“下载”。可以看到,开发工具提供 Windows 32 位、Windows 64 位和 Mac 三个版本。可根据实际情况,选择适合自己电脑的开发工具。

3、安装后,就可以直接启动开发者工具。如果是首次启动开发者工具,需要使用开发者的微信号扫码登录。登陆后,点击“添加项目”按钮,填写 AppID(如果没有,则点击无 AppID)和项目名称。接着,在项目目录中点击“选择”,新建一个文件夹作为新的项目目录。然后再次点击“添加项目”,就可以新建出一个微信小程序项目了本回答被提问者采纳

微信web开发者工具 普通调试怎么打开

方法/步骤

微信web开发者工具下载,并安装

下载链接:

启动微信web开发者工具

登录微信公众号,进入web开发者工具,绑定个人微信号

通过个人微信号,登录微信web开发者工具

从微信公众号复制链接到地址栏,大功告成

移动调试,敬请关注。