微信公众号分享、支付开发

现在这个‘气候’就是这样子，要扛得住雾霾，写的了段子，修的了bug，过的了安检，实属不易，11月的天气就是雾霾并存驾驭健康的指示，等等 ，11月^V^,擦，双节棍到了，难道猫狗大战开始的前夕，掐指一算还有几天，但硝烟四起啊，怪不得全国天气如此，这让我不由的想起10.24一定是找到了心目中的它，不然烟火也不会烧的如此旺哦，扯淡哦，额，不对 扯远了哈，来来来，最近怕忘记公众号开发，写个贴留个脚印，以免雾霾把脑壳霾绣到了。

开发之前准备，咳咳，先让公司申请个公众号、服务号啥的，实在不行自己申请个人的也行，其次，我无非说下流程，开发还是要大家自己来，

一、绑定域名

为什么要绑定域名的呢，wx: '我们不接收ip绑定'（这个答复我给100分），其实大家可以自行补脑，按着小马哥规矩走了就是，不要像三岁小孩一样问为什么,梳理下流程，登录微信公众号后台-->公众号设置里就有




红色框内的注意事项必须仔细哦，否则用不了jssdk，最主要的是是md5的txt文件要放到80端口下及ICP备案（貌似201705月之前是对域名ICP没限制的。

二、引入JS文件

1、在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js(如下图)



也可以用weixin-1.0.0.js(区别就是调用传照片和支付的时候有些部分功能不可用)

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

注意咯： 所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用

wx.config({

debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

appId: '', // 必填，公众号的唯一标识

timestamp: , // 必填，生成签名的时间戳

nonceStr: '', // 必填，生成签名的随机串

signature: '',// 必填，签名，见附录1

jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

});

四、通过ready接口处理成功验证

wx.ready(function(){

/*

config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

*/

})

五、通过error接口处理失败验证

wx.error(function(res){

/*

config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

*/

});

所有接口通过wx对象(也可使用jWeixin对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数

success：接口调用成功时执行的回调函数。

fail：接口调用失败时执行的回调函数。

complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。

cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。

trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。

在使用微信对象的回调方法中操作自己的结果导向，此处省略100字。

六、使用微信sdk提供的接口分类（此处分类型贴出，细分详情看微信官方）

分享接口

摇一摇接口

图像接口

微信支付接口

卡券、卡包

微信扫一扫接口

音频、视频接口

智能接口

。。。。

至此，环境介绍了一统，那么结果是神马东西呢，老夫一一截图给你们



图-0，初次访问会获取你微信个人基础信息，微信中也称之为授权登录



图-1，截图上罗列出几个常用的微信函数



图-2，选择朋友圈或者朋友后的微信操作界面





图-3,4 ， 分享后的的展示、（蓉城霾确实够味！！！！）



图-5，支付场景展示

那么如何才能保证以上可以正确使用，考验大家的是细心与经验，sdk的文档仔细看过之后，出了问题，凭借自己的工作经验来判断问题原因及快速定位及时处理，保证功能正常使用。以下是我在项目中用的代码，简单截图出来。





那么支付是怎么处理的呢，首先去微信平台开通支付（给TX300大洋），然后设置支付权限路径，前端支付目录为支付页面的层级（不要异想天开的设置为项目的根目录）



sdk微信支持java、.net、php三个版本可以自行官网下载

大致支付交互流程是这样子的，当时研究了好半天，居然前端只是接收参数就行 ，什么预支付订单，支付订单都是后端来做的，可苦逼了他们做token校验看微信的demo了。



一下是两种调用发起支付的方法。





最后，写好了这些，我们怎么做调试呢 ，当然，下载微信的开发者工具

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140
其实微信卡发着工具是集成了chromeDevTools和winner..基础工具



微信config获取的权限列表显而易见，可以模拟分享，支付等操作。

总结：

基本支付和分享就这些知识点了，虽然只是短短的几个操作，但是这中间其实还是需要大家细心的，因为中间涉及到调用微信对接的一系列问题。相信大家对这块知识应该领悟到了，现在要做的就是宅，宅，宅，死宅，不然被雾霾侵吞了。