为什么80%的码农都做不了架构师?>>>   

现在这个‘气候’就是这样子,要扛得住雾霾,写的了段子,修的了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对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数

  1. success:接口调用成功时执行的回调函数。
  2. fail:接口调用失败时执行的回调函数。
  3. complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
  4. cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。
  5. 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获取的权限列表显而易见,可以模拟分享,支付等操作。

总结:

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

转载于:https://my.oschina.net/idip/blog/1563852

微信公众号分享、支付开发相关推荐

  1. vue开发项目微信公众号授权支付开发

    一.注册微信公众号服务号并填写企业信息(个人订阅号没有开发微信支付的权限) 链接: https://mp.weixin.qq.com/ 二.在微信公众号内进行微信认证(3-5个工作日) 三.在微信公众 ...

  2. vue 微信公众号支付接口_vue做微信公众号分享,支付

    在前段时间做了一个微信公众号,因为我又是新手,没什么经验,拿起vue就开始,导致一坑再坑,简直阔怕!!! 对于此次项目,我主要用到的是vue的整框架和必要的插件,但是我没用vuex,用vuex的话会方 ...

  3. 微信公众号分享功能开发体验

    公众号提供了一个分享功能,通过jsapi来访问,主要作用是修改特定页面下点击微信右上角[...]选择[转发给朋友][分享到朋友圈]以及[分享到手机QQ][分享到QQ空间]的内容. 分享到微信的操作步骤 ...

  4. (第三方平台)开发相关,解除80端口占用,微信公众号分享jssdk实现,微信开放平台登录接口接入,2022微信分享接入本地调试,微信分享定制

    一.开发相关 1.平台地址 微信开放平台 QQ互联平台SDK 2.文章收集 来自CSDN兄台的QQ登录使用的教程 微信网站应用开发的详细流程和引导 VueJs单页应用实现微信网页授权及微信分享功能 [ ...

  5. 【delphi】微信公众号控件开发(一)

    Delphi 微信公众号控件开发: Delphi微信公众号控件开发: 一.公共属性定义 1. AppID(开发者ID) 2. AppSecret(开发者密码) 3. Token(令牌) 4. Base ...

  6. 微信公众号分享配置无效。。分享出来的只是纯链接了,如何自定义微信公众号的分享

    微信公众号分享配置无效..分享出来的只是纯链接了 挺久没接微信公众号的项目开发了,最近突然接了一个,结果微信自定义分享给我整懵了.原本配置的好好的,屡试不爽的代码,居然死活不生效,开启debug,开发 ...

  7. 微信分享次数统计、微信公众号分享关注统计

    作为系列文章的第五篇,本文重点探讨数据采集层中的微信分享追踪系统.微信分享,早已成为移动互联网运营的主要方向之一,以Web H5页面(下面称之为微信海报)为载体,利用微信庞大的好友关系进行传播,实现宣 ...

  8. 微信公众号的简单开发

    这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能. 今天给大家分享一下,修真院官网 ...

  9. 微信公众号分享网页注意点

    最近自己要做微信分享的防封,就研究一下市面做的分享防封原理,基本分流防封是一个做法. 过程讲述: 通过一个微信公众号分享一个入口,记住这个分享内容网页的内容最好一点违规的都没有,标题和图片可以带有诱导 ...

  10. java微信公众号JSAPI支付以及所遇到的坑

    java微信公众号JSAPI支付以及所遇到的坑 上周做了个支付宝微信扫码支付,今天总结一下.微信相比支付宝要麻烦许多 由于涉及到代理商,没办法,让我写个详细的申请流程,懵逼啊. 笔记地址 http:/ ...

最新文章

  1. 阿里云马劲:保证云产品持续拥有稳定性的实践和思考
  2. 话剧《白鹿原》:叫人乍舌,令人唏嘘,也让人捏把汗(图)
  3. vue 指令 v-for 遍历数组
  4. Linux下kvm:检测硬件是否支持虚拟化
  5. 在spring中手动编写事务
  6. 关于点击锁(防止多次点击)
  7. 字母串按照字典序排序
  8. sublime text配置VBA编辑器插件
  9. 骇基-黑客攻防实战入门⑴
  10. scsi服务器硬盘如何用,实战:不重启服务器添加scsi硬盘
  11. 计算机毕业设计Java房产客户信息管理系统(源码+系统+mysql数据库+lw文档)
  12. bitvise ssh client 连接linux,推荐SSH客户端Bitvise SSH Client
  13. 【学习笔记向】零基础小白快速制作最简陋MMD(VRoid + Unity)
  14. 钉钉机器人告警快速实现
  15. 欢迎来到Wagtail的文档
  16. 2021金九银十面试季!java开发微信公众号图片上传功能
  17. c语言 1为真还是0为真,C语言中逻辑表达式和关系表达式的值为真时,到底是用非0的任何数表示还是只能用1来表示?...
  18. 什么是裸金属服务器?
  19. JavaScript:实现给定一个句子,返回出现次数最多的单词算法(附完整源码)
  20. 8.论文学习Liver Tumor Segmentation and Classification: A Systematic Review

热门文章

  1. WINDRIVER.TORNADO.V2.2安装(附图解和序列号)
  2. ubuntu无法远程root远程登录(远程调试)root直接登录(root用户登录)(创建root用户,新建root用户)PermitRootLogin yes(prohibit-password)
  3. 使用RadioGroup实现底部导航栏
  4. matlab guide的简介和简单使用
  5. 零基础两个月学java_高中生、零基础适合学java吗?
  6. Linux网络——数据链路层
  7. 【模板】【洛谷P5487】—Berlekamp-Massey算法
  8. Python面向对象-笔记
  9. 迅雷7的界面是什么技术实现的?
  10. 《uni-app》表单组件-form表单