2018-04-09 19:34:35 GrahamACER 阅读数 3382
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    28773 人正在学习 去看看 秦子恒

坑1,首先是一定要用微信开发者工具调试你的页面,虽然它就是一个Chrome内核包裹的玩意,但如果不用它的工具直接用Chrome你是收不到任何API返回的提示的

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名,见附录1
    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

坑2,使用we.addCard一定要放在wx.ready里面,同时所有你使用的方法(例如wx.addCard)一定要放在wx.config的jsApiList里

坑3,jsapi签名拿回的sign,一定要是你当前访问程序的URL计算出来的api,不然会判断违法。也就是说出于安全考虑,开发者一定要在服务器端完成签名逻辑,并且建议使用者也在线上环境拿到signature

坑4,之前遇到一个问题,现象大概是:打开config中的debug:true是可以调用的,console返回的信息也是正确。但是一单关闭debug,addCard又不能用了,实在令人头大

最后尝试了下,一旦加入alert事件让页面暂停,就能顺利运行。所以认为这是config请求和addCard的同步问题

官网API解释过congfig可以放在MVVM框架中的mounted中执行,这样再调用addCard是不需要再次带上config的,问题得到解决

2017-07-10 16:46:34 byc233518 阅读数 3338
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    28773 人正在学习 去看看 秦子恒

还记得之前用微信的 web开发者工具是长这个样子的, 打开后直接就有移动开发的选项,然而现在却没有了, 调试不了, 摸黑写代码, 不爽!

以前↓


现在↓


这样可不行呀, 随便改个东西都要 alert(JSON.stringify(xxx)), 才能看得到到底返回了啥内容

于是就找到了另外一个腾讯的移动调试工具 TBS Studio

官方介绍: http://bbs.mb.qq.com/thread-1416936-1-1.html

打开后就是长这个样子的↓


具体使用步骤: 

感觉自己再怎么写也赶不上官方的详细, 直接看官方的好了啦

 https://x5.tencent.com/tbs/guide/debug/season1.html


下面这个单独贴出来, 因为我是华为 P10手机, 之前用 chrome 的调试工具一直识别不出来, 更别说调试微信了, 使用下面官方的方法, 终于连接成功了, 供参考!
4. 电脑死活adb连接不成功?

解决方案:

方案一: 确保USB与PC的连接

1) 请确保USB连线能正常连通PC和手机(非常重要呀!)

简单确认方法:手机状态栏显示为充电状态。

2) 请确保PC的USB驱动已正常安装,可以在控制面板“设备管理器” “通用串行总线控制器”中确认无异常USB设备显示。

3) 点击重置,再次“启动检测”。

方案二: 使用adb启动

1) 使用内置adb包( win下载mac下载),手动启动adb

运行 adb devices

2) 找到设备,点击重置,再次“启动检测”

3) 未找到设备,或者offline

  ① 运行命令 adb kill-server -> adb start-server -> adb devices

  ② 重拔usb链接调试设备

  ③ 重启调试设备

  ④ 重启电脑...

方案三: 安装PC应用宝

方案四: 安装android SDK




2019-08-30 15:56:14 weixin_41552521 阅读数 65
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    28773 人正在学习 去看看 秦子恒

一、绑定微信公众号JS接口安全域名

二、为开发者设置web开发者权限(方便调试)

三、引入JS文件

http://res2.wx.qq.com/open/js/jweixin-1.4.0.js (支持https)。

四、通过config接口注入权限验证配置

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名
    jsApiList: [] // 必填,需要使用的JS接口列表
});

React项目中使用JSSDK

  • 自行封装wxsdk
import wx from 'weixin-js-sdk';
import { getWxSignature } from './../../api/member/commonApi';

const wxsdk = {
  /**
   * @description 微信分享
   * @author Seven_G
   * @param {*} content 分享参数
   * @param {*} callback 回调函数
   */
  share(shareInfo, callback) {
    wx.checkJsApi({
      jsApiList: [
        'updateAppMessageShareData',
        'updateTimelineShareData',
        'onMenuShareAppMessage',
        'onMenuShareTimeline',
      ], // 需要检测的JS接口列表,所有JS接口列表见附录2,
      success: function(res) {
        // 以键值对的形式返回,可用的api值true,不可用为false
        // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        let link = window.location.href;
        // 在这里设置默认分享的内容
        let content = {
          title: '庆团圆时刻,赢双重好礼。',
          desc: '庆团圆时刻,赢双重好礼。',
          link: link,
          imgUrl:
            'http://cdn-dmp.swellfun.com/image/a9be9c8a141349a69718093d06c07397',
        };
        if (shareInfo instanceof Object) {
          content = shareInfo;
        }

        if (res.checkResult.updateAppMessageShareData) {
          wx.updateAppMessageShareData({
            title: content.title, // 分享标题
            desc: content.desc, // 分享描述
            link: content.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: content.imgUrl, // 分享图标
            success: function() {
              // 设置成功
              if (typeof callback == 'function') {
                callback();
              }
            },
          });
        }
        if (res.checkResult.updateTimelineShareData) {
          wx.updateTimelineShareData({
            title: content.title, // 分享标题
            link: content.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: content.imgUrl, // 分享图标
            success: function() {
              // 设置成功
              if (typeof callback == 'function') {
                callback();
              }
            },
          });
        }
        if (res.checkResult.onMenuShareAppMessage) {
          wx.onMenuShareAppMessage(
            {
              title: content.title, // 分享标题
              desc: content.desc, // 分享描述
              link: content.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: content.imgUrl, // 分享图标
            },
            function() {
              //这里是回调函数
              if (typeof callback == 'function') {
                callback();
              }
            }
          );
        }
        if (res.checkResult.onMenuShareTimeline) {
          wx.onMenuShareTimeline(
            {
              title: content.title, // 分享标题
              link: content.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: content.imgUrl, // 分享图标
            },
            function() {
              //这里是回调函数
              if (typeof callback == 'function') {
                callback();
              }
            }
          );
        }
      },
    });
  },
  init(content, callback) {
    let url = window.location.href;
    let appid = '';
    if (window.location.origin.indexOf('sjfuat.xiaoshu.biz') > -1) {
      appid = 'wxf7d4f8be8d6261a0';
    } else if (window.location.origin.indexOf('sjfapp.xiaoshu.biz') > -1) {
      appid = 'wxd1c7c714de4a462a';
    } else if (window.location.origin.indexOf('a.convertwork.cn') > -1) {
      appid = 'wxd1c7c714de4a462a';
    } else if (window.location.origin.indexOf('membertest.swellfun.com') > -1) {
      appid = 'wxf7d4f8be8d6261a0';
    } else if (window.location.origin.indexOf('member.swellfun.com') > -1) {
      appid = 'wxe7d0e0c40c0f6191';
    } else {
      appid = 'wxd1c7c714de4a462a';
    }
    let link = window.location.href;
    // 注意在hash模式下,链接带有#,不进行切割时可能会导致签名错误(前端后端进行切割都可以),因为微信签名算法默认是不会将#号和井号之后的链接加入到算法当中
    link = window.location.href.split('#')[0];
    let params = {
      url: link,
    };
    getWxSignature(params).then(res => {
      if (res && res.data && !res.data.error) {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
          appId: appid, // 必填,公众号的唯一标识
          timestamp: res.data.timestamp, // 必填,生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
          signature: res.data.signature, // 必填,签名
          jsApiList: [
            'updateAppMessageShareData',
            'updateTimelineShareData',
            'onMenuShareAppMessage',
            'onMenuShareTimeline',
          ], // 必填,需要使用的JS接口列表
        });
        wx.ready(function() {
          wxsdk.share(content, callback);
        });
        wx.error(function() {});
      }
    });
  },
};
export default wxsdk;

  • 引入当前单页文件内
import wxsdk from './../common/js/wxsdk';


// 在componentDidMount钩子函数中调用init方法,初始化JSSDK,并自定义分享内容以覆盖默认分享
componentDidMount() {
    document.title = '活动说明页';
    let link = window.location.href;
    let shareContent = {
      title: '庆团圆时刻,赢双重好礼。', // 分享标题
      desc: '庆团圆时刻,赢双重好礼。', // 分享描述
      link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl:
        'http://cdn-dmp.swellfun.com/image/a9be9c8a141349a69718093d06c07397', // 分享图标
    };
    wxsdk.init(shareContent);
    }

微信公众平台, config:invalid signature一直爆这个错误的解决办法

如果是invalid signature签名错误。建议按如下顺序检查:

1.确认签名算法正确,可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
在这里插入图片描述

2.确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr, timestamp一致。

3.确认url是页面完整的url(请在当前页面alert(location.href.split(’#’)[0])确认),包括’http(s)?/‘部分,以及’?‘后面的GET参数部分,但不包括’#'hash后面的部分。

4.确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。

5.确保一定缓存access_token和jsapi_ticket。

2017-07-19 11:22:09 koromon 阅读数 3789
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    28773 人正在学习 去看看 秦子恒

问题

一个商城项目,在首页和商品详情页有着不同的分享文案。测试的时候发现安卓系统下商品详情页的分享内容是首页的文案,但是 iOS 系统和微信开发者工具都是正常的…于是开始了排查之路。

首先来看下简化版的代码结构。

// 通用设置 - 全局设定分享信息
window.globalShareDataWx = {
    title: 'test'
}
alert('全局环境');
wx.ready(function(){
    alert('ready环境');
    wx.onMenuShareTimeline({
        title: window.globalShareDataWx.title
    })
})

// 商品详情页 - 商品详情页异步获取商品信息后
$.ajax({
    success: function(data) {
        alert('异步环境');
        wx.onMenuShareTimeline({
            title: data.title
        })
    }
})

排查

因为分享出了问题,于是从分享函数开始排查,给分享函数中的 success 增加 alert 弹窗,结果发现安卓分享完后执行的是首页的分享函数。。这就不应该了,此时先注释掉全局分享函数,发现分享正常,难道安卓 wx.onMenuShareTimeline 只能设定一次?网上搜索并没有发现有这种说法….继续排查。

后来在两个分享函数附近的地方都增加弹窗了,然后发现了两个系统不一致的地方。重点!!!

// 安卓下弹出信息顺序
全局环境 => 异步环境 => ready环境

// iOS 下弹出信息顺序
全局环境 => ready环境 => 异步环境

结论

因为默认分享函数写在了全局通用方法中(埋下了大坑!),所以即使进入商品页后,这个函数还是存在的!!

此时执行顺序的不同,因此此时在 iOS 环境是可以正常分享商品详情的,但是在安卓环境下,因为分享函数会被 ready 环境中覆盖,导致无法实现预期情况!

于是对异步环境进行下面的补充

// 商品详情页异步获取商品信息后
$.ajax({
    success: function(data) {
        window.globalShareDataWx = { // 这里重新设置分享信息,安卓分享的时候调用这里的内容
            title: data.title
        }
        alert('异步环境');
        wx.onMenuShareTimeline({
            title: data.title
        })
    }
})

此时可以解决安卓下分享问题。

反思

  1. 不应该偷懒把分享函数放到通用函数中,应该更进一步的拆分,按需引用,这样才不会导致冲突。要努力去学习 Webpack/ES6,模块化很大程度可以解决这种问题。
  2. 异步函数,不要想当然的按照自己以为的顺序执行,这次就是犯了这个错。
没有更多推荐了,返回首页