2018-04-10 21:33:53 hu_feng903 阅读数 1986
  • 微信开发者工具使用教程 如何上传、发布、审核等

    微信开发者工具使用教程 如何上传、发布、审核等 2020年3月31日录 - 微信开发者工具使用教程 01-微信开发者工具的下载和安装 02-微信小程序账号的注册、登录、appid的获取 03-微信小程序开发和公众号开发模式的切换 04-微信小程序如何导入项目 05-不在以下request合法域名列表如何设置解决 06-模拟器、编辑器、调试器的使用 07-本地如何调试、手机测试小程序 08-公众号账号关联和管理多个小程序 09-微信小程序项目管理、上传、审核、发布 10-如何能学会微信小程序开发

    91 人正在学习 去看看 黄菊华

最近使用开发微信相关内容,使用了微信官方提供的web开发者工具。工具的作用是可以在PC上模拟微信环境,调试一些对应的如授权,分享这些功能,方便快速排查问题。

使用方法和下在地址见官网:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140

调试微信的功能这里不做详细介绍,主要介绍下,使用这个工具调试手机app接口的功能。

写过app接口的同学应该知道,调试接口比较麻烦。一般手机不能很方便的直接连到本地电脑调试,只能在测试服务器,调试很麻烦。使用这个工具只要进行如下设置:


调试手机上,设置代理(服务器和端口号是这里工具里面设置的)。这里有个前提是手机连的网络和PC是在同一个局域网内

另一个功能,通过这个工具能很清楚的看到客户端服务的接口。有发起那些网络请求,假如刚接手app接口项目,不清楚什么地方调用什么接口,通过这样操作就可以很清楚看到。app操作对应那些网络请求。



希望可以帮到需要的同学

2017-07-27 09:50:47 weixin_34009794 阅读数 99
  • 微信开发者工具使用教程 如何上传、发布、审核等

    微信开发者工具使用教程 如何上传、发布、审核等 2020年3月31日录 - 微信开发者工具使用教程 01-微信开发者工具的下载和安装 02-微信小程序账号的注册、登录、appid的获取 03-微信小程序开发和公众号开发模式的切换 04-微信小程序如何导入项目 05-不在以下request合法域名列表如何设置解决 06-模拟器、编辑器、调试器的使用 07-本地如何调试、手机测试小程序 08-公众号账号关联和管理多个小程序 09-微信小程序项目管理、上传、审核、发布 10-如何能学会微信小程序开发

    91 人正在学习 去看看 黄菊华

背景

这周做的一个活动有微信分享的功能,本来看微信JS-SDK说明文档代码一copy以为就大功告成了,可是调试-_-#,于是乎写个文章纪念下?

分享的调试

1. 下载微信开发者工具

2. 微信公众平台接口测试帐号申请

申请账号

进入如下页面:
图片描述

3. 在第2步中的页面中会看到类似的测试号二维码,关注即可

图片描述

4. 获取access token

获取access token

将打开的链接地址上的APPID和APPSECRET替换成对应的第2步中获取的测试账号信息,回车获取access_token

5. 用上一步拿到的access_token 采用http GET方式请求获得jsapi_ticket

获得jsapi_ticket

6. 用上一步拿到的jsapi_ticket获得signature

获得signature

7. 在第2步中进入的测试号管理页面设置JS接口安全域名

  1. 一级域名,非80端口需要带端口号;
    2: 域名设置不要带http://或者https://,末尾不要带"/";
    例如:abc.com

8. 查看分享是否成功

以上设置好之后,打开开发者工具,登录后,打开页面,切换到console下面,如果显示如下说明可以愉快的调试分享了:

clipboard.png

这块经常会报invalid url domaininvalid signature,出现前者错误就是第7步没有设置对啦,后者这个错误原因有好多,常犯的错误就是签名生成的不对;

2017-01-24 18:13:00 weixin_34275734 阅读数 203
  • 微信开发者工具使用教程 如何上传、发布、审核等

    微信开发者工具使用教程 如何上传、发布、审核等 2020年3月31日录 - 微信开发者工具使用教程 01-微信开发者工具的下载和安装 02-微信小程序账号的注册、登录、appid的获取 03-微信小程序开发和公众号开发模式的切换 04-微信小程序如何导入项目 05-不在以下request合法域名列表如何设置解决 06-模拟器、编辑器、调试器的使用 07-本地如何调试、手机测试小程序 08-公众号账号关联和管理多个小程序 09-微信小程序项目管理、上传、审核、发布 10-如何能学会微信小程序开发

    91 人正在学习 去看看 黄菊华

  一般涉及和第三方的开发调试,都会比较麻烦些。不过,像微信这样的大公司呢,产品技术是过硬的,所以,基本上只要自己把文档看仔细了,弄好了,基本就没有问题了。

  对于后端接口一类的调试,主要就是通过打印访问日志的方式,进行一步步排查,常见的错误官方文档也有提示,仔细找找就能发现问题。

  本文主要讲解js-sdk的调试方式,因此就不说后台接口的问题了。

  js-sdk的调试难点在于,在手机上的调试,无法监控各种传输状态,由于是js类的操作,也不方便打印日志什么的。

  不过幸好,微信官方提供了一个pc版本的调试工具,可以让你像其他网页开发一样调试jssdk相关的功能。 --- 微信web开发工具

  安装好软件后,按照提示关注该页面,输入访问地址就可以进行web调试开发了。

    且说有什么好调试的吧,比如: 查看js的加载顺序,页面是否报错等。

  我遇到的问题就有,分享后,无法显示自定义的图片和文字描述,无法进行分享后的回调。

  最开始以为是官方不让自定义这些功能,经过调试之后,才发现是代码写错了的缘故。

  在调试过程中,可以看到js-sdk的初始化过程,如调用 wx.config 是否返回错误信息,wx.ready 是否执行等。

  wx变量为在微信下存在的变量,不能自定义覆盖掉!

  当使用异步调用的方式获取 token等 变量时,注意先后问题。

  当使用跨站调用token时,使用的生成token的url为当前访问的url,应以变量的形式传入。

 

  微信开发中,遇到最麻烦的问题就是,必须要有一个对外可访问的域名,80,443端口都需要对外开放,对于有安全性要求的地方来说,这个问题不太好协调。

2016-12-12 17:04:13 xuqi1029 阅读数 24737
  • 微信开发者工具使用教程 如何上传、发布、审核等

    微信开发者工具使用教程 如何上传、发布、审核等 2020年3月31日录 - 微信开发者工具使用教程 01-微信开发者工具的下载和安装 02-微信小程序账号的注册、登录、appid的获取 03-微信小程序开发和公众号开发模式的切换 04-微信小程序如何导入项目 05-不在以下request合法域名列表如何设置解决 06-模拟器、编辑器、调试器的使用 07-本地如何调试、手机测试小程序 08-公众号账号关联和管理多个小程序 09-微信小程序项目管理、上传、审核、发布 10-如何能学会微信小程序开发

    91 人正在学习 去看看 黄菊华

最近在做微信的相关内容,其中做了一个微信的分享功能,将其分享到你想要分享的地方(此处纯属啰嗦凑字数,分享谁不会啊!),此处说说自己遇到的问题吧!

使用微信开发者工具调试,从后台跳转到页面,然后开始分享功能,前期使用手机端调试,始终发现不了错误,现在使用微信开发者工具调试,

前期页面也能打开实现,如下所示,你可以自己随便填充页面内容


而出现了一个很奇怪的报错,如下所示,




我们可以看到error有一个报错,这时候就很奇怪了,我的代码严格遵守JSSDK分享文档写的,怎么会报错呢?重新看下代码


代码没有任何问题!可是那就奇怪了,为什么会报错!明明都是对的,这时候就要相信网友的力量和自己的悟性了,最终发现如下,


这时候就可以分享到朋友圈里啦!


2017-11-29 01:07:22 soeben 阅读数 7406
  • 微信开发者工具使用教程 如何上传、发布、审核等

    微信开发者工具使用教程 如何上传、发布、审核等 2020年3月31日录 - 微信开发者工具使用教程 01-微信开发者工具的下载和安装 02-微信小程序账号的注册、登录、appid的获取 03-微信小程序开发和公众号开发模式的切换 04-微信小程序如何导入项目 05-不在以下request合法域名列表如何设置解决 06-模拟器、编辑器、调试器的使用 07-本地如何调试、手机测试小程序 08-公众号账号关联和管理多个小程序 09-微信小程序项目管理、上传、审核、发布 10-如何能学会微信小程序开发

    91 人正在学习 去看看 黄菊华

在微信开发者工具上调试分享接口成功,真机测试的时候却失败了。
后来发现是手机反应比较慢
wx.config()还未执行成功后面绑定分享按钮事件的代码就开始执行了导致绑定失败
因此在页面加载时需要立即执行的接口必须写在wx.ready()

修改后的代码

//从服务端获取配置信息
$.post('/getSignPackage',{location:window.location.href},function(data){
    wx.config({
        debug: false,
        appId: data.appId,
        timestamp: data.timestamp, 
        nonceStr: data.nonceStr, 
        signature: data.signature,
        jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareQZone'
        ]
    });

    var data = {
        title: 'title', // 分享标题
        desc: 'desc', // 分享描述
        link: 'link', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: 'imgUrl', // 分享图标
        success: function () {
            // 用户确认分享后执行的回调函数
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    };
    wx.ready(function(){
        wx.onMenuShareTimeline(data);
        wx.onMenuShareAppMessage(data);
        wx.onMenuShareQQ(data);
        wx.onMenuShareWeibo(data);
        wx.onMenuShareQZone(data);
    });
});

另外,如果js是在页面加载完毕执行的话。当页面为由加载完毕的时候用户点击分享也不会生效,需要根据情况设置加载态提示用户。

没有更多推荐了,返回首页