微信web开发者工具打不开

新手学堂014

微信web开发者工具打不开,第1张

目前最好的解决办法,就是重装 “微信web开发者工具” ,而且,要把安装目录修改为非上次安装的目录(安装在一个新目录下,不受原有文件影响,小编试过安装在原有的目录下,安装过程中会报与原有文件冲突,而且安装好后也无法启动)。

区别一、运行环境的不同

传统的网页H5的页面运行环境是浏览器,包括webview,而微信H5网页的运行环境并非完整的浏览器。

区别二、是开发成本的不同

一个网页H5web开发需求时,开发工具(vscode、sublimtext、Atom等),大到前端框架(Angular、react、vue、backbone等)、模块管理工具(Webpack 、Browserify 等)、任务管理工具(Grunt、Gulp等),小到UI库选择、接口调用工具(ajax、Fetch Api等)、浏览器兼容性等都要考略。

一个微信H5的开发需求时,微信团队提供了开发者工具,并且规范了开发标准,前端常见的HTML、CSS变成了微信自定义的WXML、WXSS,WXML中尽管全部是自定义标签,但官方文档中都有明确的使用介绍,相信上手应该是非常容易的。

区别三、是获取系统级权限的不同

微信H5相对于网页HTML5 web应用能获得更多的系统权限,比如网络通信状态、数据缓存能力等,这些系统级权限都可以和微信小程序无缝衔接,而这一点恰巧是HTML5 web应用经常被诟病的地方,这也是HTML5的大多应用场景被定位在业务逻辑简单、功能单一的原因。

区别四、是应用在生产环境的运行流畅度。

无论对于用户还是开发者来说,都是最直观的感受。当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时,需要不断的对项目优化来提升用户体验。但是由于微信H5运行环境独立,但配合微信的解析器最终渲染出来的是原生组件的效果,自然体验上将会更进一步。

微信web开发者工具概述

一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。

主要功能

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

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

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

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

调试微信网页授权

开发者可以在调试器中点击“登录”,使用手机微信扫码登录,确认手机登录页,绑定的公众号为“微信 web 开发者工具”,如下图所示:

公众号登录管理后台,启用开发者中心,在开发者工具——web 开发者工具页面,向开发者微信号发送绑定邀请。绑定页面如下图所示:

开发者在手机微信上接受邀请,即可完成绑定。

完成登录和绑定后,开发者就可以开始调试微信网页授权了,点击“确认登录”即可带着用户信息跳转到第三方页面,很方便的进行后续的开发和调试。

管理员设置界面如图:

登陆开发工具,随意打开一个公众号的页面,复制链接放在开发工具的地址栏,现在基本上就可以在电脑上面进行调试了。

注意事项:

移动调试功能暂不支持https。

web开发者工具,就是为帮助开发者更方便、更安全地开发和调试基于微信的网页,我们推出了 web 开发者工具。它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作;

你可以:

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

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

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

利用集成的 Chrome DevTools 协助开发

一、运行环境的不同。

传统的HTML5的运行环境是浏览器,包括webview,而微信小程序的运行环境并非完整的浏览器,大家注意,我这里写的是“非完整的浏览器”,有以下几个原因

小程序的开发过程中会用到HTML5相关的技术(并非全部)

小程序最后的发布上线需要微信审核,微信在不更新自身软件的情况下可以将小程序更新到自身软件内,这就联想到了ReactNative框架,并且已经有开发者在微信小程序的开发工具源码中发现使用了React和NodeWebkit库

官方文档中着重强调了脚本内是无法使用浏览器中常用的window对象和document对象(基于这一点,像zepto/jquery这种操作dom的库就被完全抛弃了)

所以我个人认为,小程序的运行环境很有可能是微信开发团队基于浏览器内核完全重构的一个内置解析器,针对小程序专门做了优化,配合自己定义的开发语言标准,提升了小程序的性能。

不过由于微信给开发者提供了开发工具,而开发工具中也内置了编程、调试、开发环境、发布于一身,我们也不用再探讨它的最终运行环境了,只要按照官方文档进行开发就可以了。并且从微信团队给开发者提供开发工具这一举动,让我联想到了苹果给开发者提供的X-CODE开发工具,可以想象微信的“野心”可见一斑

二、开发成本的不同。

这里我提出了一个问题,当我们面对一个HTML5web开发需求时,我们需要考虑什么呢?抛去开发工具(vscode、sublimtext、Atom等)不谈,大到前端框架(Angular、react、vue、backbone等)、模块管理工具(Webpack、Browserify等)、任务管理工具(Grunt、Gulp等),小到UI库选择、接口调用工具(ajax、FetchApi等)、浏览器兼容性等都要我们一一考略,再不济用jqery插件写H5,也要在开发过程中去寻找合适的jquery插件来配合项目。尽管这些工具可定制化非常高,并且提高了开发者的开发效率,但我相信项目开发的配置工作已经消耗了不少精力,尽管大部分开发者都有自己的配置模板,但长久以来对于项目中使用的各种外部库的版本迭代、版本升级所产生的成本应该也不低。

而当我们面对一个微信小程序的开发需求时,我们需要考虑什么呢?微信团队提供了开发者工具,并且规范了开发标准,前端常见的HTML、CSS变成了微信自定义的WXML、WXSS,WXML中尽管全部是自定义标签,但官方文档中都有明确的使用介绍,相信上手应该是非常容易的;WXSS、JSON和JS文件中的写法稍有限制,但整体相差不多。在统一了这些标准之后,作为一个开发者,你会发现,自己只要专注写程序就可以了:

当需要调用后端接口时,调用发起请求API

当需要上传下载时,调用上传下载API

当需要数据缓存时,调用本地存储API

引入地图、使用罗盘、调用支付、调用扫码等等功能都可以直接使用

UI库方面,框架自然带有自家weui库加成

并且在使用这些API时,你不用再去顾虑浏览器兼容性,不用担心生产环境中出现不可预料的奇妙BUG,可见微信小程序的开发成本确实相比以往的web开发低很多。

三、获取系统级权限的不同。

微信小程序相对于HTML5web应用能获得更多的系统权限,比如网络通信状态、数据缓存能力等,这些系统级权限都可以和微信小程序无缝衔接,也就是官方宣称的拥有NativeApp的流畅性能,而这一点恰巧是HTML5web应用经常被诟病的地方,这也是HTML5的大多应用场景被定位在业务逻辑简单、功能单一的原因。

四、应用在生产环境的运行流畅度。

这条无论对于用户还是开发者来说,都是最直观的感受。长久以来,当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时,它的体验总是不尽人意,需要不断的对项目优化来提升用户体验。但是由于微信小程序运行环境独立,尽管同样用htmlcssjs去开发,但配合微信的解析器最终渲染出来的是原生组件的效果,自然体验上将会更进一步。

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

2 启动微信web开发者工具

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

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

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

6 移动调试,敬请关注

OA系统可以通过与微信企业号集成,帮助企业建立一个以腾讯手机微信为应用入口的移动办公环境。

OA系统企业微信号集成应用主要包含以下功能:

1、组织人员集成:可以将OA系统中的的组织人员信息同步到微信企业号中,实现通过e-cology产品管企业号的通讯录,并且可以结合工作流程应用来实现通过流程控制账号的开通、变更、关闭等操作

2、单点登录集成:实现了e-cology产品与微信的统一身份认证,员工成功关注了微信企业号后之后可以通过企业号的直接访问OA系统相关的手机web应用无须输入账号密码登陆

3、标准OA应用集成:可以将OA系统相关的手机web应用集成到微信企业号的应用菜单中,用户通过点击菜单直接进入相应的办公页面进行处理

4、移动建模集成:可以集成OA系统的移动建模平台,将移动建模搭建的移动应用发布到微信企业号中

5、扩展应用集成:可以集成用户自己开发的手机web应用,将用户自己开发的应用发布到微信企业号中

6、消息集成:e-cology系统可以将相应的消息通过微信推送给员工,实现消息提醒、资讯推送、知识推送等场景的应用,实现了通用消息推送接口,便于用户自行开发的应用的消息推送