精华内容
下载资源
问答
  • 开发和测试小程序,需要借助微信官方提供的微信Web开发者工具进行预览和调试代码,从下载安装到使用,大致的流程如下: 1.下载安装包 下载地址传送门:...

    开发和测试小程序,需要借助微信官方提供的微信Web开发者工具进行预览和调试代码,从下载安装到使用,大致的流程如下:

    1.下载安装包

    下载地址传送门:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
    根据所需的操作系统版本进行下载即可

     
     

    2.安装微信Web开发者工具

    下载后的安装包,wechat_devtools,接近80M大小

     
    具体的安装过程略过,Next Step即可

    3.申请小程序管理员账号,获取开发者AppID

    申请账号:可参考 https://developers.weixin.qq.com/miniprogram/dev/
    获取AppID:小程序管理平台-->开发者设置-->开发者ID
    该AppID将在微信Web开发者工具打开小程序项目时进行身份验证用到

    4.小程序管理员授权测试用的微信账号

    项目团队中的不止一个人开发小程序时,如多个开发和测试成员,管理员可在小程序管理后台添加成员,并设置所需的权限
    管理入口:小程序管理后台-->用户身份-->成员管理
    具体可参考 https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/role.html#%E7%94%A8%E6%88%B7%E8%BA%AB%E4%BB%BD

     

    5.通过已授权的微信扫描登录开发者工具

    首次打开微信Web开发者工具,弹出二维码提示框,用以上授权过的微信进行扫描:


     

    扫描之后,手机微信端需要确认登录:

     

    6.新建并导入项目(项目路径+项目名称+AppID)

    根据开发和测试的具体需要,点击【小程序项目】

     
    点击管理项目右下角的“+”符号
     

    导入小程序程序包的目录路径,填写AppID(若程序包中有相关设置,此ID也可在导入程序目录后自动填充)、项目名称,然后点击【确定】
     

    7.预览和调试小程序

    微信Web开发者工具预览小程序和调试代码


     

    除了在微信Web开发者工具可以使用预览外,在其前已授权的手机微信端也可实现预览效果
    具体操作:点击微信Web开发者工具右上角的【预览】,工具提示“正在编译JS文件”,稍等一会儿就可编译完成并展示出二维码,此时用已授权的微信扫描此二维码(每次编译的二维码有效期大概20多min),即可在手机端微信上预览小程序的实际效果

    转载于:https://www.cnblogs.com/zhuochong/p/10436647.html

    展开全文
  • 微信开发者工具官方下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 注意,Windows版本的仅支持window7及以上版本。 下载与安装 点击相应的系统的版本下载即可,我的是Windows...

    前言

    微信提供了小程序的官方开发工具—微信开发者工具,当然,这个微信开发者工具 还可以用来调试运行在微信上的网页以及微信JS-SDK。
    微信开发者工具官方下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
    注意,Windows版本的仅支持window7及以上版本。

    下载与安装

    点击相应的系统的版本下载即可,我的是Windows64位。

    在这里插入图片描述

    等待下载

    在这里插入图片描述

    下载完毕点击打开,安装的过程也很简单,只需点击下一步即可

    在这里插入图片描述
    在这里插入图片描述

    如果嫌下载到默认(c盘)占内存可以点击浏览自定义下载地址

    在这里插入图片描述

    等待大约一两分钟就下载好了
    运行程序,出现登录界面,用手机微信扫码登录,然后在手机上点击确认。就可以登录了。

    在这里插入图片描述

    这样就可以创建小程序啦

    在这里插入图片描述

    获取AppID

    地址:搜索微信公众平台登录后点击开发/开发设置/开发者ID
    或者点击超链接地址:点击获取开发者ID

    注释:

    appid是小程序的身份证号码,是微信公众平台上的小程序ID,有了它,微信客户端才能确定你的小程序“身份”,并使用微信提供的高级接口。
    在这里插入图片描述

    点击+号创建项目

    在这里插入图片描述

    出现如下界面

    在这里插入图片描述

    生成项目目录代表意义

    在这里插入图片描述

    界面介绍

    在这里插入图片描述

    总结

    这篇博客到此就结束了
    下一篇写:创建云函数,选择环境,创建集合,上传并部署等知识记得来看。

    展开全文
  • 使用微信web开发者工具调试微信企业号页面(前端页面,已发布在服务器上的)前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用...放入官方微信web开发者工具下载链接以及文档说明https://mp.weixin....

    使用微信web开发者工具调试微信企业号页面(前端页面,已发布在服务器上的)

    前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩了一下,很强大。这篇文章只是做一个记录,方便自己以后使用的时候看看,不对的地方请大家批评指正。放入官方的微信web开发者工具下载链接以及文档说明https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html,参考这个文档,我又给细节化了一些内容。下载以后直接安装就好。

    1.下载安装好以后,打开界面是这样的。

     

     

    2.我们点击登录,会出现扫描二维码页面,用你自己的微信扫一下登录就可以

      

     

    3.登录以后,就可以对我们的微信企业号页面进行调试,请注意!!!要想调试当前的企业号页面,你登录的微信号,必须是这个企业号的管理员(这在微信开发者工具的说明文档有写),如果不是,请在你们的企业号开发端把你的微信设置为管理员。否则在开发者工具里面将会出现下面这个页面,如图

     

       管理员设置界面如图:

       

     

    在企业号管理页面添加完毕以后,会在你的手机微信端有提醒,记得按照他的提醒设置一下开发者工具的登陆密码,如果没有设置密码,你依然登陆不上去,如图所示:

     

    设置完密码以后,我们点击登录,发现还是上不去,如图所示:

     

    点进去以后,如图所示:

     

    2.上面所有的都设置过以后,我们登陆开发工具,随意打开一个公众号的页面,复制链接放在开发工具的地址栏,现在基本上就可以在电脑上面进行调试了。页面如图:(关注一下移动调试)

     

    3.这个工具更加强大的功能!点击窗口中的移动调试。

      3-1.如图所示,我们先选择Android设备调试--普通调试,

      

     

     

      接着我们只要按照他的提示--调试步骤设置我们的手机就可以,手机代理设置如图所示:

     

    手机设置完毕代理以后,点击开发者工具页面中的开始调试就可以,很强大,我们选中的页面部分,会在手机上面实时显示出来。(自己体验一下。)

      3-2.如图所示,我们先选择Android设备调试--X5 Blink内核调试,这个功能更强大!

    这一部分强烈建议看一下官网的文档说明,我先copy一下放在这。

    移动调试

    移动端网页的表现,通常和桌面浏览器上有所区别,包括样式的呈现、脚本的逻辑等等,这会给开发者带来一定的困扰。现在,微信安卓客户端 webview 已经开始全面升级至 X5 Blink 内核,新的内核无论在渲染能力、API 支持还是在开发辅助上都有很大进步。通过微信 web 开发者工具中的远程调试功能,实时映射手机屏幕到微信 web 开发者工具上,将帮助开发者更高效地调试 X5 Blink 内核的网页,具体步骤如下:

    (1)准备工作

    1. 安装0.5.0或以上版本的微信 web 开发者工具

    2. 确认移动设备是否支持远程调试功能

      打开微信 web 开发者工具,选择“移动调试”tab,点击验证移动设备是否支持。随后使用移动设备扫描弹出的二维码,在设备上即可获得支持信息。

    3. 打开移动设备中的 USB 调试功能

      1.打开移动设备,进入“设置”->“开发人员选项”

      2.勾选“USB 调试功能”

     

      需要注意的是,Android 4.2 之后的设备,开发人员选项默认是隐藏的,通过以下步骤可以打开:

      1.打开移动设备,进入“设置”->“关于手机”

      2.找到并单击“内部版本号”7次

    4. 安装移动设备 USB 驱动

      通常开发者可以在移动设备厂商的官网中下载到相关驱动,或者使用腾讯手机管家来安装设备驱动。

    5. 打开 X5 Blink 内核的 inspector 功能

      打开微信 web 开发者工具,选择“移动调试”tab ,使用设备扫描“调试步骤”中的二维码。

      如下图,勾选“是否打开 TBS 内核 Inspector 调试功能”,并重启微信。

      

    (2)开始调试

    使用 USB 数据线连接移动设备与 PC 或者 Mac 后,点击打开微信 web 开发者工具“移动调试”tab,选择 X5 Blink 调试功能,将会打开一个新窗口,在微信中访问任意网页即可开始调试。关于 X5 Blink 内核更多信息,可以查看官网介绍

    在所有准备工作都完成的情况下,窗口中可以看到当前设备的基本信息:

    点击任意页面的“inspect”,打开新窗口,开发者会看到熟悉的调试界面:

    点击上图右上角的“手机”图标,将启用屏幕映射功能:

     

     

    下面我来补充一下:

    3-2-1.打开我们手机的调试USB调试功能,我的手机是三星S7,(高版本Android好像都这么弄,如果你的不可以,就问问度娘)找了半天没找到,问了度娘才找到。。。。写个记录

    在下拉通知栏里面选择设置,如图:

                        

    在版本号那里多点击几次,页面就会有提醒,再点击几次就可以打开开发者选项,打开以后,在我们设置里面就出现了开发者选项,点进去,把USB调试打开就好了。

    额外内容----如何关闭开发者选项???如图所示

                    

     

    3-2-2打开 X5 Blink 内核的 inspector 功能

                 打开微信 web 开发者工具,选择“移动调试”tab ,使用设备扫描“调试步骤”中的二维码。如下图,勾选“是否打开 TBS 内核 Inspector 调试功能”,并重启微信。

     

    3-2-3开始调试

        上面的设置都弄完以后,点击页面的的开始调试按钮,手机上出现下面这个页面,如图,我们点击确定就可以。

     

    然后我们的调试工具就会弹出这个页面:

    此时基本上就可以了,我们在我们的手机上随意打开一个我们要调试的微信公众号的页面。如图

    打开以后如图所示:左侧是我们的调试工具页面,右侧是我们的手机上显示的页面,是不是非常棒,哈哈哈哈,

               

     

    点击调试工具页面右上角的手机图标,可以将手机页面映射到调试工具里面,如图所示:

     转载至  https://www.cnblogs.com/Gabriel-Wei/p/5977850.html      Gabriel-Wei

    展开全文
  • 参考教材:《微信小程序开发入门与实践》 雷磊 ...微信开发者工具官方下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 注意,Windows版本的仅支持window7版...

    参考教材:《微信小程序开发入门与实践》 雷磊

    前言

    微信提供了小程序的官方开发工具—微信开发者工具,当然,这个微信开发者工具 还可以用来调试运行在微信上的网页以及微信JS-SDK。
    微信开发者工具官方下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
    注意,Windows版本的仅支持window7及以上版本。
    笔者所用的系统为window10 64位

    下载与安装

    笔者下载的版本是目前的最新版本(2019.01.17更新),点击相应的系统的版本即可下载。
    在这里插入图片描述
    安装的过程也很简单,双击安装程序,根据提示点击就可以。
    在这里插入图片描述
    这里可以自定义安装的目录,我安装在了D盘。也可以直接安装默认路径进行安装。
    在这里插入图片描述
    点击安装后,等待一两分钟后就安装好了。
    在这里插入图片描述
    运行程序,出现登陆界面,用手机微信扫一扫,然后在手机端确认。就可以登陆了
    在这里插入图片描述
    在这里插入图片描述
    关于微信开发者工具的使用教程,可以查看微信提供的官方用户手册 https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

    AppID的申请

    AppID代表小程序的ID号,必须拥有微信小程序账号才能申请这个ID号。如果没有AppID,小程序就不能在真机上演示(即不能发布到线上给用户使用),只能在微信开发者工具里模拟运行。但是如果你只是想要学习小程序的开发,没有AppID也是可以的,可以通过开发者工具提供的模拟器运行你的小程序
    小程序账号申请网址:https://mp.weixin.qq.com/wxopen/waregister?action=step1
    根据页面提示的要求,填入相应的信息。
    在这里插入图片描述
    点击注册之后,微信会发一封确认邮件到你注册的邮箱,你需要进入你注册的邮箱点击确认激活

    在这里插入图片描述
    在这里插入图片描述
    点击链接后,会跳到信息认证界面,在主体类型中选择个人,然后在页面中填好你个人的相关信息。

    在这里插入图片描述
    填好信息,并用微信扫描确认后,就完成了信息认证了。
    在这里插入图片描述
    点击前往小程序,会自动跳转到小程序的管理界面,在开发里的开发设置里就可以看到你的AppID了
    在这里插入图片描述

    展开全文
  • 前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web...放入官方微信web开发者工具下载链接以及文档说明https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d730
  • 这里给出官方地址: 微信官方地址 几个版本供大家挑选。
  • 微信WEB开发者工具-X5 Blink 内核调试_inspect白屏 一、微信web开发者工具 官方使用及下载说明:https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html 二、X5 Blink 内核调试的具体步骤:  ...
  • 前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者...放入官方微信web开发者工具下载链接以及文档说明https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa...
  • 我也怀着激动的心情准备全身心投入其中,不过截止目前,在官方网站上下载的最新版本都无法使用,打开小程序 开发工具后,只见一块白板赫然映入眼帘,不向你问好,不向你抱怨,它就是在那里静静地待着,就是迟迟看不...
  • 微信小程序概念的提出,绝对...我也怀着激动的心情准备全身心投入其中,不过截止目前,在官方网站上下载的最新版本都无法使用,打开小程序 开发工具后,只见一块白板赫然映入眼帘,不向你问好,不向你抱怨,它...
  • 1.2 下载后安装一下就可以使用了:二、创建项目2.1微信小程序web开发工具需要扫码登陆,所以必须先绑定开发者才可以:2.2 已经绑定的开发者可以创建项目,需要填写AppID、项目名称、本地开发目录。AppID需要去设置...
  • 微信开发者工具

    2021-02-08 12:25:38
    微信开发者工具微信公众号官方推出的一款专门给用户制作微信小程序和给公众号添加新的功能的软件,对于懂得编程的用户来说,这是款非常好用的工具,用户可以用微信开发者工具实现对公众号的接口功能,也可以用微信...
  • 开发前的准备工作两件事1.1申请AppID 来到微信公众平台1.2下载开发工具 官方微信Web开发者工具 VSCode 官方微信Web开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html...
  • 1、首先要下载微信官方微信Web开发者工具。打开微信公众平台(mp.weixin.qq.com),找到右下方的小程序模块,点击「开发」按钮; 2、点击顶部导航栏的「工具」按钮,在新页面的左侧栏中找到「下载」。可以...
  • 【未经作者本人同意,请勿以任何形式转载】 上一篇文章主要分析了微信小程序应用场景和优劣势。...下载安装小程序下载微信web开发者工具 下载官方DEMO源码 本系列教程使用的是mac版的开发...
  • 微信小程序代码怎么用工具打开看

    万次阅读 2018-02-10 12:05:07
    1、首先要下载微信官方微信Web开发者工具。打开微信公众平台,找到右下方的小程序模块,点击「开发」按钮; 2、点击顶部导航栏的「工具」按钮,在新页面的左侧栏中找到「下载」。可以看到,开发工具提供 Windows ...
  • 微信小程序学习资源

    2018-03-13 09:53:11
    微信小程序学习纲要学习基础:JavaScriptHTMLCSS微信小程序开发开发工具微信web开发者工具下载链接微信小程序开发官方文档微信小程序开发W3Cschool文档CSDN学院的微信小程序实战视频微信小程序实战项目计算器豆瓣...
  • 本系列教程将引导你完成如下任务:下载微信web开发者工具和小程序官方Demo。添加小程序示例Demo到项目体验小程序常用组件及接口 第一部分 下载开发者工具和官方Demo 微信小程序开发者工具为了帮助开发者简单和...
  • 前期源代码下载安装微信小程序官方开发软件:微信web开发者工具,这个可以搜索下载安装。然后就扫码,填写小程序App-id,创建项目,就可以在微信web开发者工具写源代码了。微信小程序主要包括三个页面:app...
  • 微信小程序入门

    2018-04-20 22:31:14
    1.下载官方工具:微信web开发者工具下载网址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=1476434678461如图可依据电脑版本下载2.申请账号:...
  • 初试微信小程序

    万次阅读 2018-08-11 10:41:21
    打开 “微信web开发者工具”,项目->新建项目如图: 创建一个项目目录 填写你的appId 给你的项目起个名字 文件目录如下图: 点击查看代码构成以及开发文档 3.实现一个天气预报...
  • 微信小程序demo ...下载小程序源码及服务器源码,启动服务器后,在微信web开发者工具中选择“添加项目”,然后选择项目目录为下载的源码路径,打开即可看到效果。 演示: (第一张GIF图有点大,请耐心等待)
  • weUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令...用微信web开发者工具打开dist目录(请注意,是dist目录,不是整个项目)    如何使用 1、下载weui.wxs...

空空如也

空空如也

1 2 3 4 5
收藏数 95
精华内容 38
关键字:

微信web开发者工具官方下载