-
在Linux系统下运行微信Web开发者工具教程
2018-10-23 17:21:48微信Web开发者工具只有window版本和mac版本,如果想要在Linux系统下运行微信Web开发者工具,需要花费很大周折。 1、下载nwjs 下载nwjs的SDK。 2、将微信web开发者工具拷贝到nwjs 将在window系统下安装的微信web...微信Web开发者工具只有window版本和mac版本,如果想要在Linux系统下运行微信Web开发者工具,需要花费很大周折。
1、下载nwjs
下载nwjs的SDK。
2、将微信web开发者工具拷贝到nwjs
将在window系统下安装的微信web开发者工具文件夹中的package.nw、icon.ico、* 微信web开发者工具.exe拷贝到nwjs sdk解压后的文件夹内。
3、修改代码进入到nwjs文件夹,在终端内运行
$ ./nw
会出现提示 Cannot find module ‘…’
根据提示,在提示错误的文件内修改module名,因为名字大小写会有错误,比如appServiceConfig模块,它的实际模块名是appserviceConfig,这些都是大小写字母错误导致找不到模块。
会有几个文件需要修改,根据错误提示修改。
4、在微信小程序项目文件内创建run-detectors文件
在微信小程序项目文件夹内创建run-detectors文件,因为该文件没有扩展名,在linux系统会被认为是文件夹,导致找不到该文件导致报错。5、下载wine
在命令行内运行
$ sudo apt-get install wine
在右键选择wine环境运行wcc.exe,会提示安装依赖。wcc.exe在linux的 /home/用户名/.config/微信web开发者工具/WeappVendor 文件夹内。
6、载入项目在载入项目前,* 先在wine下运行wcc.exe和wcsc.exe(不提前运行wcc.exe和wcsc.exe的话可能会报错)。第一次载入项目后编译可能会慢一些,3、5s到10s左右,后面因为有缓存会快一些。
使用编辑功能可能会报错,所以不要用自带的编辑功能。7、编辑器
推荐使用webstorm,在File - Editor - code style - File Types内设置如图下所示。将wxss添加到css类型文件,将wxml添加到html类型文件。微信的文件改变自动刷新会有3到5s的时间来编译,不是很快。
-
微信手机端调试工具-微信Web开发者工具使用教程
2017-04-14 21:03:16微信手机端调试工具[下载地址] ...如果安装调试工具-微信Web开发者工具需要卸载以前安装过的微信Web开发者工具(比如小程序-微信Web开发者工具),建议使用腾讯管家之类的清理干净。2.安装好后,选择移动调试,X5 Blin微信手机端调试工具[下载地址]
(https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html)
进入后的页面注意:
1.如果安装调试工具-微信Web开发者工具需要卸载以前安装过的微信Web开发者工具(比如小程序-微信Web开发者工具),建议使用腾讯管家之类的清理干净。
2.安装好后,选择移动调试,X5 Blink内核调试,先验证手机是否支持X5 Blink内核调试,如果不支持,找一台支持的手机。
3.翻墙,用usb线连接移动设备与本机,在手机设置里搜索usb调试,打开usb调试功能,用移动设备扫描以上二维码,勾选信息>TBS setting > 是否打开TBS内核 Inspector调试功能,点击开始调试。
4.退出微信,从新登录打开微信端的网页后会出现下图(如果未出现,或空白则需要翻墙),点击inspect
5.现在进入了我们熟悉的chrome调试界面 -
微信web开发者工具使用教程
2016-12-13 11:40:16即刻下载使用==》微信web开发者工具下载 2、调试微信网页授权,具体操作步骤为: 1)开发者可以在调试器中点击“登录”,使用手机微信扫码登录,从而使用真实的用户身份来开发和调试微信网页授权。请确认手机登录页...1、首先用户需要做的就是先下载安装,并启工具。 即刻下载使用==》微信web开发者工具下载 2、调试微信网页授权,具体操作步骤为: 1)开发者可以在调试器中点击“登录”,使用手机微信扫码登录,从而使用真实的用户身份来开发和调试微信网页授权。请确认手机登录页,绑定的公众号为“微信 web 开发者工具”。 2)为了保证开发者身份信息的安全,对于希望调试的公众号,我们要求开发者微信号与之建立绑定关系。具体操作为:公众号登录管理后台,启用开发者中心,在开发者工具——web 开发者工具页面,向开发者微信号发送绑定邀请。 3)开发者在手机微信上接受邀请,即可完成绑定。每个公众号最多可同时绑定10个开发者微信号。邀请确认页面如下图所示: 4)完成登录和绑定后,开发者就可以开始调试微信网页授权了,注意只能调试自己绑定过的公众号: 非静默授权的 URL:点击查看 在微信 web 开发者工具中上面的 URL,webview 模拟器显示效果如图: 点击“确认登录”即可带着用户信息跳转到第三方页面,很方便的进行后续的开发和调试。 静默授权的 URL:点击查看 在微信 web 开发者工具中打开该 URL 则会自动跳转到第三方页面。 (注意:如果使用了代理,需代理本身支持https直连,才能调试https页面。) 3、模拟JSSDK权限校验 通过 web 开发者工具,可以模拟 JSSDK 在微信客户端中的请求,并直观地看到鉴权结果和 log。以微信 JSSDK DEMO 页面为例: http://demo.open.weixin.qq.com/jssdk 在调试器中打开该 URL,可以方便地在右侧的 JS-SDK Tab 中看到当前页面 wx.config 的校验情况和 JSSDK 的调用 log。 如下是校验通过的页面: 如下是校验未通过的页面: 在“权限列表” Tab 中,可以查询到当前页面拥有权限的 JS-SDK 列表: 4、移动调试 移动调试功能是基于 weinre 的,并且做了一些改进,相比直接使用 weinre 有两个优点: 1)无须手工在页面中加入 weinre 调试脚本 2)可以在 weinre 的网络请求页卡中,看到完整的 http 请求 log,非局限于 ajax 请求 (注意,移动调试功能暂不支持https。) 5、Chrome DevTools 微信 web 开发者工具集成了 Chrome DevTools。同之前在 PC 上的调试体验一致,可以快速上手。 以上内容就是微信web开发者工具的一些基本使用方法,毕竟是一款适合开发人员使用的“高大上”软件,对于小编这种“文盲”来说是根本不知道软件的具体使用方法的,这个还需要开发者自行摸索,相信它一定能够成为开发者开发必备的利器。
-
安装微信web开发者工具
2018-09-24 17:11:57微信web开发者工具的安装 随着移动通讯等电子设备的普及,微信小程序也逐渐被大家所熟悉;小程序以入口浅、体积小、方便用、体验好等优良特性受到各阶层地欢迎;那么,你准备好自己写一个小程序了吗? 首先,我们得...微信web开发者工具的安装
随着移动通讯等电子设备的普及,微信小程序也逐渐被大家所熟悉;小程序以入口浅、体积小、方便用、体验好等优良特性受到各阶层地欢迎;那么,你准备好自己写一个小程序了吗?
首先,我们得安装一个微信web开发者工具;当然,相应的安装教程网站上数不胜数,我们这就不在赘述。
今天,我们来讨论一下当在官网上下载安装包后,在电脑上安装时出现的问题。想必有的朋友遇到过这样一些问题:安装包本来已经下好了,系统也没报什么故障(即使有故障也是内部警告);但在安装的时候却显示“无法插入”之内的错误;这时,你应该看看你的c盘剩余空间了,应为在安装的同时,会在c盘写入一些东西,占用内存;而我们脆弱的c盘对于一些不修边幅的朋友来说,可能已经达到99%的占用率了。
那么,我们又如何清理c盘了,很简单了,你可以用软件管家进行“软件搬家”,将部分软件移出c盘;同时,你也可以手动卸载一些无用文件,或者直接打开“计算机”,找到c盘,然后右键,点击磁盘清理就可以了。总之方法有很多,你只要知道问题根源所在了,接下来就是时间问题了
-
Matchvs系列教程之利用微信web开发者工具开发联网游戏
2018-08-04 16:37:20除了使用Cocos Creator与Egret等主流前端引擎开发工具外,还有不少使用了微信web开发者工具的开发者,今天就教大家使用Matchvs SDK 轻松完成联网游戏的开发。 -
如何用微信web开发者工具测试调试并打包上传小程序
2020-08-25 16:05:40如何用微信web开发者工具测试调试并打包上传小程序,其实还是很简单的,这个教程针对小白,大神请直接略过。 一、下载并安装软件(根据自己电脑实际情况选择版本安装) 如何用微信开发者工具新建小程序项目并打包... -
微信web开发者工具无法打开
2019-05-08 11:08:06上周微信开发者工具一直没有办法打开页面,本来打算写一篇关于小程序的文章,结果等了半天试了好几次都是这样的界面,临近下班就没有在意了,今天来打开电脑还是如此,怎么也打不开编辑界面。到最后,使用了一个奇葩... -
微信web开发者工具无法打开怎么办
2019-05-07 17:57:28上周微信开发者工具一直没有办法打开页面,本来打算写一篇关于小程序的文章,结果等了半天试了好几次都是这样的界面,临近下班就没有在意了,今天来打开电脑还是如此,怎么也打不开编辑界面。到最后,使用了一个奇葩... -
微信web开发者工具中更改页面文件夹名称的正确姿势
2016-12-07 19:22:11最近刚刚学完JavaScript的基本知识,忍不住也开始尝试一下微信小程序开发,对于官方提供的微信web开发者工具也是信心十足,但是实际操作中还是遇到了一些坑,对于像我一样的一个初学者,比如在该工具中创建项目后,... -
微信web开发者工具无法打开的六种解决方法
2018-10-29 11:36:00上周微信开发者工具一直没有办法打开页面,本来打算写一篇关于小程序的文章,结果等了半天试了好几次都是这样的界面,临近下班就没有在意了,今天来打开电脑还是如此,怎么也打不开编辑界面。到最后,使用了一个奇葩... -
微信web开发者工具——解决小程序新建page无反应的问题
2020-05-19 20:39:05最近开始学习上了微信小程序开发,网上找了一个教程来学习,结果刚开始学习就掉进了坑里。 在教程之中,新建了一个空白项目后,进去项目,根目录下新建了一个app.json文件,然后新建了一个pages目录,pages目录下... -
Ubuntu使用+ThinkPHP学习——23(微信开发者工具的安装)
2019-03-20 09:36:00其几天老师让我去负责微信方面的接入工作,这不是为难我王某人吗!!! 没办法,现在需要硬着头皮装...因为我的电脑之前为了装微信和qq,安装过deepin-wine环境,所以在我安装微信开发者工具时,遇到了如下报错。 ... -
微信小程序简易教程文档
2018-02-20 16:51:07该文档不适合零基础、无开发功底的程序开发者。对于学习过微信web开发者工具API开发文档的人员最易于上手。 -
微信小程序开发视频教程
2020-05-10 18:48:09微信小程序开发视频教程,包含视频教程文件和源代码文件,百度网盘分享,开发文档简读,了解全貌,CMS原型,我们的初期目标,微信WEB开发者工具安装等等 -
微信小程序开发教程(二)创建第一个微信小程序
2018-05-15 21:51:03在安装完“微信Web开发者工具”之后,通过开发者的微信扫码进入后,如图。 点击“添加项目”,填入之前获得的AppID(无AppID可忽略),输入项目名称“Hello WXapplet”,选定本地文件夹作为项目目录。 勾选“在当前... -
微信小程序视频教程合集 附带源码、PPT下载
2016-11-11 17:07:39微信小程序视频系列教程完整版,课程中用到的... 1.4微信WEB开发者工具安装 2.1创建项目 2.2编写关于我们布局界面 2.3用变量替换界面里的固定文本 2.4界面美化 3.1加入文章列表和内容界面 -
微信小程序开发入门教程
2018-05-30 08:49:15本系列教程将引导你完成如下任务:下载微信web开发者工具和小程序官方Demo。添加小程序示例Demo到项目体验小程序常用组件及接口 第一部分 下载开发者工具和官方Demo 微信小程序开发者工具为了帮助开发者简单和... -
开发一个微信小程序项目教程
2017-01-16 23:07:39一、注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/... ... 3.会获得一个AppID,记录AppID,后面创建项目时会用到。 ...二、下载微信web开发者工具 为了帮助开发者简单和高效地开发,微信小程序推出了全 -
新手创建第一个微信小程序教程
2018-06-04 11:09:51在安装完“微信Web开发者工具”之后,通过开发者的微信扫码进入后,如图。 点击“添加项目”,填入之前获得的AppID(无AppID可忽略),输入项目名称“Hello WXapplet”,选定本地文件夹作为项目目录。勾选“在当前... -
微信小程序项目开发教程
2017-01-11 23:07:00一、注册小程序账号 1.进入微信公众平台...小程序开发与管理->...3.会获得一个AppID,记录AppID,后面创建项目时会用到。 二、下载微信web开发者工具 为了帮助开发者简单和高效地开发,微信小程序... -
微信小程序资源汇总整理AwesomeWeChatWeApp
2019-08-10 07:41:35微信小程序资源汇总整理, Awesome WeChat WeApp,涵括微信 Web 开发者工具收集,WeApp 教程收集,站点收集和代码实例 -
微信小程序开发工具使用与设计规范(二)
2016-10-05 11:27:00【未经作者本人同意,请勿以任何形式转载】 上一篇文章主要分析了微信小程序应用场景和优劣势。...下载安装小程序下载 :微信web开发者工具 下载:官方DEMO源码 本系列教程使用的是mac版的开发...