2019独角兽企业重金招聘Python工程师标准>>>

准备工作:

  1. 前两天做了一个微信分享朋友圈和分享好友功能,遇到了挺多坑,总结一下,希望能帮到第一次开发微信端的小伙伴,废话不多说,开始正题 准备条件:
  • 具备自己的公众号,一个身份证可以申请一个(必须是认证过的!)
  • 设置ip白名单,后台服务的ip,(获取数据的服务器IP)
  • 设置js安全域名接口,这个域名必须是备案过的
  • 需要在对应的ip的根目录下上传一个MP_verify_ajl2qnil5aOtrFuu.txt文件来授权
  1. 在线接口调试工具 帮助开发者检测调用微信公众平台开发者API时发送的请求参数是否正确,提交信息后可获得服务器验证结果。 https://mp.weixin.qq.com/debug
    (用appid和secret生成token,appid和secret可以在基本信息里面查到)

  2. 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

开发步骤:

    • 绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。说明:设置此安全域名目的是为了当发现此公众平台发现诱导分享行为时,可以根据此域名追溯到所有分享出去的链接,以及通过这些链接增加的粉丝。

2、- 引入js文件 在需要调用JS接口的页面引入如下JS文件http://res.wx.qq.com/open/js/jweixin-1.0.0.js 说明:如果页面启用了https,务必要引入https://res.wx.qq.com/open/js/jweixin-1.0.0.js ,否则将无法在iOS9.0以上系统中成功使用JSSDK

3、- 通过config接口注入权限验证配置 在微信公众平台JSSDK说明文档是这样解释的

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

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

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

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

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

分享接口: 1、获取“分享到朋友圈”按钮点击状态及自定义分享内容接口

wx.onMenuShareTimeline({
title: '', // 分享标题
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});

2、获取“分享给朋友”按钮点击状态及自定义分享内容接口

wx.onMenuShareAppMessage({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});

注意:

  1. 一定要在公众号进行安全域名的配置,这样,微信就可以牢牢控制你的微信平台了,一旦发现违规,让分享链接失败,删除掉诱导行为增加的粉丝,是瞬间就可以完成的。因此,微信平台的开发者,一定要合理来使用分享功能,不要因小失大。等到你的微信平台被封,估计库都来不及了。

2.因为微信的权限限制是不能直接在本地调试的,这开发起来就相当不方便了,解决方案有两种:

  • 1.下载花生壳,用内网穿透,会生成一个域名,连接本地服务,但是这个也是有条件的, 因为微信加安全域名的时候不能加入对应的端口号,只能使用默认端口8080,如果办公室的ip没有备案过,是不能使用8080端口的(可以找运维的小伙伴协助)

  • 2.配置一套服务器操作软件,在服务器上面直接修改代码,是即刻生效的, 有人说我是前端工程师,不会服务器那套东东,这就需要平时和后端工程师处好关系了!

转载于:https://my.oschina.net/u/3150996/blog/1863674

reactJs/js微信分享教程简单实用版相关推荐

  1. Hbuilder集成微信支付教程(简单流程)

    整个系统运作的流程大致是这样: (1)APP向服务器发出需要付款的请求 (2)服务器请求微信服务端下单 (3)服务器将下单数据回复给APP (4)APP向微信服务端发起请求并输入密码进行支付 关键字用 ...

  2. 拿来即用的java实现的微信分享教程(全步骤)

    拿来即用的java实现的微信分享教程(全步骤) 一.控制器层 controller层 package top.siger.yunrunma.music.api.v1.controller;import ...

  3. React / Vue 前后端分离项目实现微信分享教程

    小编推荐:Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java实时BUG监控.真的是一个很好用的bug监控费服务,众多大佬公司都在使用. 网上非常多的微信分享例 ...

  4. 前端做微信好友分享_一篇搞定微信分享和line分享

    前言 在h5的页面开发中,分享是不可或缺的一部分,对于一些传播性比较强的页面,活动页之类的,分享功能极为重要.例如,京东等电商年末时会有一系列的总结h5在微信中传播,就不得不提到微信的分享机制. 微信 ...

  5. JSSDK公众号微信分享功能

    微信公众平台支持前端网页,点击右上角的'...',可以选择分享到朋友圈.分享给好友.QQ等微信功能.分享我在项目中添加分享到朋友圈,分享好友的功能的实现.即图一所示的效果.实现的效果为图二所示 图一 ...

  6. php转发朋友圈缩略图片,解释最全的,手把手教的微信JS sdk分享设置教程-微信分享插件PHP源码JS-SDK接口,分享到朋友圈 转发好友带缩略图...

    亲们,此文是我上传的有关微信分享插件PHP源码JS-SDK接口的.rar和.zip的说明使用文件 许多朋友都面临自己编写的网站通过微信转发时,无论是分享微信好友或是微信朋友圈时,出现无缩略图显示的问题 ...

  7. 微信分享后端接口简单实现

    微信分享后台接口简单实现 此接口大致的流程是:用户创建时间戳,随机字符串,当前需要分享的页面的url三个变量,接着将自己的appid和APPsecret作为请求参数获取access_token,再根据 ...

  8. 微信分享小功能后端接口简单实现

    微信分享后台接口简单实现 此接口大致的流程是:用户创建时间戳,随机字符串,当前需要分享的页面的url三个变量,接着将自己的appid和APPsecret作为请求参数获取access_token,再根据 ...

  9. android微信分享怎么自定义样式,自定义微信分享样式设置教程

    一.功能效果 自定义微信分享可以设置个性化的分享图片.标题.描述,让分享内容更加受到用户的喜爱和欢迎. 二.功能说明 [版本]网站标准版及以上 [前提]1.需要授权已认证的公众号(支持服务号.订阅号) ...

最新文章

  1. servlet必知细节(三)-- DefaultServlet
  2. 本弗莱数据可视化的生产流程图_力控锂离子电池车间数据采集系统
  3. 计算机网络-TCP运输连接管理
  4. 处理器管理与进程管理
  5. itcast-ssh-crm实践
  6. 可信计算 沈昌祥_沈昌祥院士:用主动免疫可信计算构筑车联网安全防线
  7. npm 全局安装vuecli报错_cnn explainer本地使用--被npm坑惨
  8. x12arima季节调整方法_深秋是腌洋姜的季节,用老一辈的方法做一坛,比腌萝卜香还爽口...
  9. css hacks (ie6,ie7,ie8,firefox,Chrome)
  10. bgp状态idle什么原因_当bgp的邻居状态机处于什么状态是,标志着与邻居的tcp连接已经正常建立...
  11. php pdo mysql 预处理_php -- PDO预处理
  12. MySQL学习之——锁(行锁、表锁、页锁、乐观锁、悲观锁等)
  13. html前端订餐网页代码_21天学通HTML+CSS+JavaScript Web开发 中文完整PDF版
  14. sscanf_s函数用法
  15. 销售数据可视化图表excel模板_两份办公学习资源,可视化EXCEL模板和Excel函数课程...
  16. 推荐几个新手可以在网上赚钱的几个项目
  17. 面试智力题,1000瓶水,其中一瓶有毒,而且毒性无敌,稀释一亿倍毒性都不减,毒性的发作时间最长为1小时,请问怎样可以在两个小时之内找出哪瓶水有毒
  18. 485芯片中slew-rate-limited是什么意思(转)
  19. 服务器怎么解绑网站域名,服务器解绑ip
  20. 趣味测试类微信小程序

热门文章

  1. 如何将Java程序转换为exe可执行文件并生成安装包
  2. 车载串行器MAX96717F的使用
  3. 监控系统zabbix——配置监控远程主机
  4. js-xlsx 进行 excel 导出
  5. USB鼠标驱动简单设计
  6. 孩子叛逆期不想上学怎么办
  7. android 抓猫彩蛋,Android暗藏彩蛋:翻版《Flappy Bird》与《猫咪收集》小游戏
  8. VxWorks消息队列
  9. python 会议室预约系统 开源_开源会议室预订系统-MRBS安装使用教程
  10. 用python绘出一个莫比乌斯环