2019-04-13 11:56:08 weixin_39706415 阅读数 1076
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

真的是无力吐槽微信的坑真的多把人能呕死,做了个公众号开发一大堆的坑

希望你看完每个字

分享一下ios微信长按无法识别二维码的问题

在网上找了一大堆的处理方式说增加img 的padding、设置缩放的、还有说图片大小的问题 、我扫码图片就是从服务号弄下来的。最后还是没用。

然后我就研究了一下到底为啥 

测试流程

这个做了一天的测试才发现测试流程的效果

复制可以识别二维码的公众号地址

没有修改前

复制不可以识别的地址

复制一下你的链接就知道为啥了

问题原因

1、链接错误出现这个问题的原因

是因为微信内置浏览器对 history 的支持不够全面

所以对于开启了 History Mode 的 SPA 应用,只会保存第一条 url

只要每个页面都刷新一次,严格的说不能是简单的刷新,需要用 location.replace 刷新页面,就能解决该问题

2、链接错误和二维码识别有什么关系呢

其实这个我也不明白为啥、反正知道这样能解决问题增加识别二维码的次率、应该就是微信处理的时候会去检测链接吧

证明一点就是和图片、识别位置都没什么关系我都照做了、只要复制出来的链接是不是当前路由链接没用。

解决方案

解决方案肯定就是处理window.location链接问题

我用react写的 不过不管用什么写都一样的思路

 if (pathname.includes('/user/followWeChat') && !window.location.href.match('#time')) {
          setTimeout(window.location = window.location + "#time", 500);}

上述操作的监听你的路由变化到扫码界面后进行设置当前location为当前location处理url变化

为了防止死循环新增一个#time参数下次再执行携带参数不会走这个里面

以上操作完成后已经增加了很大的识别空间

会存在一个问题就是还是会偶现加载完成无法识别的问题、但是刷新一下就好了

 

 

做一个界面刷新、万一用户无法识别点击刷新、目前测试百分之百可以识别 

有问题疑问请留言

送上一波福利

微信公众号开发、企业建站开发、小程序、vue、h5、css3、react等前端视频学习资料关注公众号【码兄】免费获取

2017-08-29 17:37:18 citunying6597 阅读数 8949
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

这里写图片描述
这几天做的一个h5项目,遇到了上图的这种需求,点击按钮复制框框里面的内容。一开始是使用JS原生的写法,核心语句是:
document.execCommand(“Copy”);
以及xxx.select();
但是浏览器一直报错提示select() is not a function
仔细查找原因后,发现是由于我用div模拟了文本框的实现,但select()只能用于input框,因此修改之后可以正常复制了。然而,此方法适用于安卓系统,在ios上不起效。
代码如下:

function copy(){
            var copyTarget = document.getElementById('copyTarget');
            copyTarget.select();
            document.execCommand("Copy");
        }

clipboard插件

为了兼容ios系统,尝试使用了clipboard.js。
官方网站戳这里https://clipboardjs.com/
下面放一个官网上的点击按钮复制div的内容的例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>target-div</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <!-- 1. Define some markup -->
    <div>hello</div>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>

    <!-- 2. Include library -->
    <script src="../dist/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard -->
    <script>
    var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
</body>
</html>

关键是要给按钮添加data-clipboard-action=”xxx”以及 data-clipboard-target=”xxx”,data-clipboard-target最好等于目标复制对象的类名
此方法可以兼容ios系统然而在安卓上又失效了。。。

同时兼容iOS以及Android

综上所述,要兼容这两大系统,同时使用JS原生的方法以及clipboard.js插件即可。

input框的优化

用户不能编辑input里面的内容,因此可以添加readonly=”readonly”属性,同时为了防止手机输入框的弹出,可以添加onclick=”this.blur();”,使输入框失去焦点。
示例:

<input type="text" class="className" id="idName" value="要复制的内容" readonly="readonly"  onclick="this.blur();"></input>

以上是本次项目完成过程中的小小心得,我这个前端的小菜鸟还在四处碰壁中,希望大家多多补充自己的意见噢~

2018-09-22 19:42:04 csdnliuxin123524 阅读数 2161
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

我的情况是将在webStorm上开发的代码复制到微信开发者工具上时,经简单修改后不报错了但是界面黑屏,

找了一段时间发现是图片资源的路径没有设置正确。如下:

这是在微信开发者工具上的情况:

其实在webStrom上的路径是:

['rock','../res/Rock.png'],

这也是我们在做比如java开发时路径写法,../表示回到上一级目录,在webStorm上没有问题,但是在微信开发者工具上却不能有../

2018-11-15 12:59:15 qq_37805723 阅读数 917
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

微信小程序复制文本

  1. 首先看一下微信开发者文档
    在这里插入图片描述
参数 说明 是否必填
data 需要复制的文本内容

上代码

wx.setClipboardData({
        data:this.shopInfo.wenan,
        success:(res)=>{
          tip.toast('复制成功')
        },
        fail:(res)=>{
          tip.alert('复制失败')
        }
      })
2018-10-23 21:11:44 qq_35713752 阅读数 3980
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

实现API:

wx.setClipboardData(Object object)

API说明:设置系统剪贴板的内容

属性 类型 默认值 是否必填 说明 支持版本
data string   剪贴板的内容  
success function   接口调用成功的回调函数  
fail function   接口调用失败的回调函数  
complete function   接口调用结束的回调函数(调用成功、失败都会执行)  

示例代码

//复制内容到剪贴板的内容,这里示例的代码是复制‘data’
wx.setClipboardData({
  data: 'data',
  success (res) {
    wx.hideToast(); //隐藏复制成功的弹窗提示,根据需求可选
  }
})

//获取已复制到剪贴板的内容
wx.getClipboardData({
  success (res) {
    console.log(res.data) // data
  }
})

上面demo是不显示已复制成功的弹窗。

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