本文目录一览：
- 1、如何调试微信端网页JS代码
- 2、关于微信JS的调用config的参数怎么得到
- 3、uniapp中调用微信jssdk
- 4、微信公众号web开发调试不方便吗？送你2款调试工具完美解决
- 5、微信开发者工具——移动调试的简单使用
如何调试微信端网页JS代码
下载一个微信开发者工具，可以直接搜，也可以搜小程序，收到有一个简易教程小程序，点开之后里面当行有工具，点开就能找到了，这个比较全，即可以调试网页，也可以开发小程序
关于微信JS的调用config的参数怎么得到
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
uniapp中调用微信jssdk
1、安装
```
npm install jweixin-module --save
```
2、创建文件share.wx.js
```
// 引入微信jssdk
const jweixin = require('jweixin-module')
const install = (Vue, vm) = {
// shareInfo: {
// title: '标题',
// desc: '描述',
// link: location.origin,
// imgUrl: ''
// }
const init = (shareInfo = {}) = {
// 获取微信jssdk，用于分享
vm.$u.api.getWxjssdk({
url: location.href
}).then(res = {
res = res.data
vm.$u.vuex('vuex_wxjssdk', res)
console.log(res)
jweixin.config({
debug: res.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.appId, // 必填，公众号的唯一标识
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.nonceStr, // 必填，生成签名的随机串
signature: res.signature, // 必填，签名
jsApiList: res.jsApiList // 必填，需要使用的JS接口列表
});
jweixin.ready(() = {
console.log(shareInfo.title)
// 分享给朋友
jweixin.updateAppMessageShareData({
title: shareInfo.title,
desc: shareInfo.desc,
link: shareInfo.link,
imgUrl: shareInfo.imgUrl,
success: () = {
// 设置成功
}
})
// 分享到朋友圈
jweixin.updateTimelineShareData({
title: shareInfo.title,
link: shareInfo.link,
imgUrl: shareInfo.imgUrl,
success: () = {
// 设置成功
}
})
// 分享到朋友圈
jweixin.onMenuShareTimeline({
title: shareInfo.title,
link: shareInfo.link,
imgUrl: shareInfo.imgUrl,
success: () = {
}
})
// 分享给朋友
jweixin.onMenuShareAppMessage({
title: shareInfo.title,
desc: shareInfo.desc,
link: shareInfo.link,
imgUrl: shareInfo.imgUrl,
success: () = {
}
})
});
jweixin.error(function(res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
console.log(res)
});
})
};
// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
vm.$u.share = {
init
};
}
export default {
install
}
```
3、main.js app.$mount() 上面加入
```
// 微信jssdk初始化
import wxshare from '@/common/share.wx.js'
Vue.use(wxshare, app)
```
4、调用
```
this.$u.share.init({
title: '标题',
desc: '描述',
link: location.origin,
imgUrl: '分享图片地址'
})
```
微信公众号web开发调试不方便吗？送你2款调试工具完美解决
前言
我们公司有做微信公众号衔接的项目开发。前端小伙伴一般都是在chrome用手机模拟调试网页，但是不方便调试与微信衔接部分的功能。有些bug在chrome上没有调试出来，但是一到真机调试的时候，就出现了。
我也是大量的查阅资料并实践，发现如下2个调试工具技巧，即可完美解决以上遇到的微信项目开发令人头疼的调试问题。
1. vConsole 推荐指数：★★★★★
腾讯出品的 Web 调试面板，相信不少前端小伙伴都用过。vConsole 会在你网页中加一个悬浮的小按钮，可以点击它来打开关闭调试面板，并查看 DOM、Console、Network和 本地存储 等信息。基本可以满足普通前端开发的需求。使用方法也很简单，通过npm安装或者直接在需要的页面引入 js文件 ，然后 new VConsole() 就可以了。不熟悉的小伙伴可以直接去官方的 GitHub 看 README。但是它并没有解决我的问题，因为我的 bug严重到一进页面就报错，脆弱的 javascript 直接原地爆炸，页面一片空白。
2. 微信web开发者工具 推荐指数：★★★★★
这是一款早期的微信web开发者工具，最新版本： (2016.05.19)0.7.0
前端小伙伴可能更熟悉的是小程序web开发者工具。但是我今天主要介绍的是该工具的 移动调试功能,这一个也许可以用fiddler抓包工具，fiddler配置起来很麻烦，没有该工具简单，应付移动端调试抓包还是搓搓有余。操作说明 请见官方文档讲得很清楚官方调试文档说明
这两款工具的实践是前辈们踩过的坑，并填了坑。你看到了就赚到了，并自己花1个小时的时间学习一下，就为自己节省了很大部分的时间。
工欲善其事必先利其器，没有好的调试工具或方法，移动端真机下的 debug 简直是前端的噩梦。但是有了这些好用的方法，我想各位优秀的前端大佬，帮妹子修复个小 bug 还是 so easy 的。
--完--
微信开发者工具——移动调试的简单使用
目前主要是做PC端项目，但是偶尔也会有移动端需求提来，有在原生APP中的，也有在微信和浏览器中的，目前也就接触过这三个场景，对于移动端的坑入得也不深，本文介绍也是偏应用，如有不足请见谅。
一、开发移动端页面的工具
①移动端浏览器页面
这里开发静态页面的做法和普通的PC页面开发一样，使用chrome浏览器进行开发和调试，但是不一样的地方是把PC端的开发模式切换到手机开发模式（PC调试模式切换到移动端，点亮图中 ②即可，图中①处可以模拟不同移动端设备，同时可以自己添加设备），效果如下：
该方式可以直接调试
②嵌入APP中的移动端页面
对于某些经常举办针对用户活动的APP对于嵌入H5页面的需求是比较多的。因为这样会节省开发的成本、减少原生APP的迭代速度、对用户友好。
开发嵌入原生APP的方式和第一种方式基本一致，唯一和第一种方式有些差别的是：如果h5页面和原生APP存在一些交互（js需要获取原生APP放回的数据），这种方式是没法做到的，因为上述方式是放在浏览器这个APP下的，而不是某个特定的原生APP。
解决方法：
先和原生APP开发的同事商议好接口，使用方式一进行静态页面开发（这里面要写好正常的逻辑），然后与后台同事联调好接口，发不到测试，最后与原生开发的同事进行测试环境联调。过程看起来复杂，如果原生接口没问题，一般很快搞定。缺点就是和原生联调的时候，如果有问题，不好排查。（不知各位有什么好的方法，请指教！）
③开发微信端页面
其实这个不应该拎出来说的，因为微信页面和在普通浏览器页面“一样”，可以认为微信中浏览网页就是在用QQ浏览器浏览。所以不再赘述。
总结：移动端开发，还是f12“大法”，然后切换移动调试就行了。
二、微信开发者工具之移动调试的使用
对于f12开发小型的页面是没问题的，但是如果是基于微信的项目就有些力不从心了。所以大部分针对微信开发的项目基本上都可以使用 微信开发者工具 。
针对微信的开发者工具，真的是极大的方便了开发微信项目的效率。
下面是一个应用于本地的个税计算器（其实控制台操作和浏览器f12基本一致，所以这个东西前端的同事一般立马上手）：
但是，这个开发者工具虽然是微信官方开发工具，但是毕竟是模拟器，现实情况的复杂会导致有些样式不兼容。例如vivo的微信客户端，显示总是错乱的（测试的同事发现的问题，她的手机可以还原场景，但是我的手机端是正常的）。所以，我们需要有针对性的在这款手机真机上调试，如何做呢？下面简要介绍如何利用微信开发者工具进行真机调试。
相对于iOS移动端调试，Android移动端调试更丰富一点，所以以安卓为例，ios调试方式同Android调试中的“普通调试”。
①普通调试
普通调试的步骤如下：
步骤解释：
第一步：选择无线网卡地址，默认即可，工具会自动查询你的无线网卡ip v4地址
第二步：意思就是你的手机连接的网络要和第一步得到的ip v4在同一个网段内（什么是网段？看这里）。简单的做法就是把手机的网络和电脑的网络设置为同一个源（连接到同一个无线网上）
第三步：这个步骤很清楚了，还有一个快捷的方式就是“下拉工具栏——长按无线连接图标”然后就可以直接进入到无线列表在做后续操作了。iOS操作如下：
iOS： 设置 - 无线局域网 - 选中网络 - HTTP代理手动
第四步：设置好上面步骤以后，重启微信，这可能是让微信重新检测目前的网络情况，然后打开你想调试的页面（注意，要先打开要调试的页面才可以开始调试）
第五步：这个不在上面的说明里，但是需要说明下，打开调试的网页以后，在点击下面的开始调试按钮！
如果你的操作正确，弹出框会是这样的：
如果你当前没有在微信打开调试页面或打开的本地页面地址错误，则会失败：
请注意 ，如果你想调试本地开发的页面，需要你开启web服务，使用;:port的方式来访问，如果只是一个本地页面，是无法打开调试的，形如webstrom里面快捷打开的页面地址： 这个是无法调试的。需要你搭建WEB服务，使用类似于 这种url。（ 这种写法也是无法调试的，因为微信根本打不开）。
调试模式开启以后，我们就可以直接在手机上查看调试的结果或者修改东西：
我选中这里，手机就会有类似于PC端选中的状态一样被选中
好了，可以直接看着手机调页面了，对于一些手机端的兼容性处理更有针对性，而且可以在network那里看网络请求，十分方便。
②X5 blink内核调试
X5 blink调试步骤如下：
首先开发者工具要验证你的手机是不是支持该调试功能，所以，首先选择验证，然后在按下面的步骤做：
上面三步结束以后，直接点击开始调试按钮，工具会给出一个弹框，检测出你的手机信息，但是其他什么都没有，像这样
那是因为——微信还没有打开能调试的页面！！！
同样，打开一个能调试的页面，这个“白板”就变了样子了，
注意：过程中会提示“是否允许USB调试”，选择同意即可
然后点击箭头指向的“inspect”，熟悉的画面再次出现！！！
好啦，这样就可以愉快的去调试真机界面了！
本文以应用为主，说的不深，不足之处还请见谅！
心如繁星，是美还是罪？
