`
chenfeng_lian
  • 浏览: 9260 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

微信内部浏览器分享支付功能

 
阅读更多
1、注册一个微信公众账号 地址:https://mp.weixin.qq.com/cgi-bin/loginpage?t=wxm2-login&lang=zh_CN
2、进入开发者中心,点击接口测试申请系统。在改页面添加:JS接口安全域名,测试地址跨域是ip,如果有端口号要带上端口号。
3、获取签名(关键)。这一步必须要和后台交互。
    a、获取签名时前端要和后台进行一次交互,需要传一个参数url,这个参数是动态获取的当前页面的url出去#好和#号后面的部分。
    b、后台在第二步的开发者中心拿到:AppId和AppSecret,然后根据前台传过去的url计算签名。详细文档:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html,附录1-JS-SDK使用权限签名算法。
    c、后台返回的数据格式JSON,字段包括:noncestr,jsapi_ticket,timestamp,url
4、拿到3-c中的数据配置微信分享。
var shareMsg = {
        title: '这里是TITLE',
        desc: '在长大的过程中,我才慢慢发现,我身边的所有事,别人跟我说的所有事,那些所谓本来如此,注定如此的事,它们其实没有非得如此,事情是可以改变的。更重要的是,有些事既然错了,那就该做出改变。',
        link: 'http://movie.douban.com/subject/25785114/',
        imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
        trigger: function (res) {
            alert('用户点击发送给朋友');
        },
        success: function (res) {
            alert('已分享');
        },
        cancel: function (res) {
            alert('已取消');
        },
        fail: function (res) {
            alert(JSON.stringify(res));
        }
    };
//xxxxx 后台返回的数据
wx.config({
            debug: true,
            appId: 'xxxxx',
            timestamp: xxxxx,
            nonceStr: xxxxx,
            signature: xxxxx,
            jsApiList: [
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo'
            ]
        });
wx.ready(function() {
            wx.checkJsApi({
                jsApiList: ['onMenuShareAppMessage'],
                success: function (res) {
                    alert('checkJsApi success: ' + JSON.stringify(res));
                },
                fail: function(res) {
                    alert('checkJsApi error: ' + JSON.stringify(res));
                }
            });
            //分享到朋友圈
            wx.onMenuShareTimeline(shareMsg);
            //分享给朋友
            wx.onMenuShareAppMessage(shareMsg);
            //分享给QQ好友
            wx.onMenuShareQQ(shareMsg);
            //分享到微博
            wx.onMenuShareWeibo(shareMsg);
        });
5、如果是开发者测试账号,要关注改测试账号才能测试。
6、如果是线上的 需要在公众账号设置,功能设置里面添加JS接口安全域名非ip。
7、关于支付目录的配置:单页面应用
    a:IPhone 例如支付最终进入页面的路由为 /ab/cd/pay,但是入口路由为 /ab/cd 支付目录只需要配置收到/ab/
    b:Android 接 a 部分,Android手机的配置目录就必须配置到 /ab/cd/

 

分享到:
评论

相关推荐

    微信浏览器调用支付宝浏览器中打开

    博文中资源

    微信支付如何实现内置浏览器的H5页面支付

    因为项目需要,要在H5页面中加入微信支付,所以便去尝试,只想说真的很坑,尤其调试起来不方便 这是微信的官方API文档 微信API 微信支付的准备工作 申请公众号,申请开通支付,这个很简单,自行百度 申请好之后 在...

    java微信支付demo

    java版微信支付demo,包含原生支付、jsapi支付、app支付参数生成规则。调用微信内部浏览器。

    vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题

    JSAPI使用场景为微信内部,而H5支付则是使用在非微信下的外部浏览器。 1.JSAPI 在微信内部可以直接唤起微信浏览器的内置对象 WeixinJSBridge 废话不多说直接上代码: // 调用后端接口拿到JSAPI支付所需参数,我在...

    小程序微信支付.txt

    基于vue的小程序,微信内部浏览器支付以及外部浏览器微信支付。两种方法的实现以及H5还是小程序的判断支付方式

    vue单页面在微信下只能分享落地页的解决方案

    实际上关键词叫 微信pushState只能分享落地页 更贴切一点 应用场景: vue + vue-router vue-router使用hash模式(history模式没试过) 不使用微信的js-sdk(因为我这个项目是可配置域名的商城,比较特殊,不能...

    h5页面跳转微信小程序(最简单的方法-URL Scheme)

    由于微信小程序是一种只能在微信内部访问的应用程序,而H5页面可以在任何浏览器中访问,因此需要通过跳转来实现两者之间的衔接。 对于用户来说,H5页面跳转微信小程序可以提供更好的用户体验。用户可以在H5页面中...

    蚂蚁分类信息系统

    支持完整全套微信支付接口(增加微信扫码支付,微信手机H5支付,不再局限必须手机微信内部访问才可以支付)33,全新的用户中心模板模板设计34,增加短信宝短信接口通道支持35,商家功能改进36,增加百度提交网站地图...

    挂式云消费机,QM500产品简介.doc

    具有完善的系统功能,灵活的消费管理功能,安全可靠的保护性能,可以实现交易和结算的电子化、智能化,提高用户的管理效率和管理手段,适用于校园、企业、政府机关的食堂、超市、会所等内部收费的场合。 挂式云...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段 渐进增强 一开始只构建站点的最少特性,然后不断针对各浏览器追加功能。先让网站能够正常工作于尽可能旧的浏览器上,然后不断为它...

    HelloVimo一套基于Vue2x用于混合开发的H5平台

    使用一套H5代码在各类HyBrid平台中运行, 并根据平台完成对应的初始化工作, 且能根据平台自动切换主题样式.可以使用的平台: 微信、支付宝、钉钉、普通浏览器、原生App内部增强版WebView中.

    EUCMS智能建站系统(含手机站) v5.10.20

    EUCMS系统采用内部和外部两种完全独立又可以互相嵌套标签形式,源生态asp语法模式,简洁易懂,懂asp语法的建议以外部标签为主,不懂的建议直接内部标签同,时到平台学些外部标签的教程,因为外部标签非常灵活易用。...

Global site tag (gtag.js) - Google Analytics