weixin4j开发微信分享案例

微信官方文档

步骤一:绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注:登录后可在“开发者中心”查看对应的接口权限。

步骤二:引入JS文件

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

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

备注:支持使用 AMD/CMD 标准模块加载方法加载

步骤三:通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.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中的相关接口。

备注:不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回。

以上几个函数都带有一个参数,类型为对象,其中除了每个接口本身返回的数据之外,还有一个通用属性errMsg,其值格式如下:

调用成功时:”xxx:ok” ,其中xxx为调用的接口名

用户取消时:”xxx:cancel”,其中xxx为调用的接口名

调用失败时:其值为具体错误信息


接下来用开源框架weixin4j进行开发

一、先引入maven依赖

<dependency>
  <groupId>com.foxinmy</groupId>
  <artifactId>weixin4j-mp</artifactId>
  <version>RELEASE</version>
</dependency>

二、在classpath路径下创建weixin4j.properties

#weixin4j.account={"id":"wxf0838883619fb11d","secret":"facf775150fb75023bcd4607a304c89d","components":[{"id":"应用组件的id","secret":"应用组件的secret"}],"mchId":"微信商户号 微信支付时需要填入","certificateKey":"加载支付证书文件的密码 如果不填写则默认获取mchId作为密码","certificateFile":"微信支付某些接口(退款等)需要的ca证书存放的路径,classpath路径下可以这么写classpath:xxxxx.p12,为空时则获取classpath根目录下的ca.p12文件","paySignKey":"微信支付中调用API的密钥 微信支付时需要填入"}
# weixin4j的配置文件:如果没有请构造相应参数传入 如果有请保证在classpath的根目录下

# 公众号信息 请按需填写
weixin4j.account={"id":"公众号APPID","secret":"公众号APPsecret",\
"components":[{"id":"应用组件的id","secret":"应用组件的secret"}],\
"mchId":"商户ID",\
"certificateKey":"默认商户ID",\
"certificateFile":"classpath:apiclient_cert.p12//退款的证书文件路径",\
"paySignKey":"支付密钥"}

三、在sping的配置文件中配置weixin4j的核心API

<!-- 注入weixin4j核心类,并使用redis管理token -->
<bean id="weixinProxy" class="com.foxinmy.weixin4j.mp.WeixinProxy">
    <constructor-arg>
        <bean class="com.foxinmy.weixin4j.cache.RedisCacheStorager" />
    </constructor-arg>
</bean>

<!-- 微信支付接口代理 start -->
<bean id="weixinPayProxy" class="com.foxinmy.weixin4j.payment.WeixinPayProxy" />
<!-- 微信支付接口代理 end -->

四、开始写后台接口

package net.seedor.controller.wechat;

import com.foxinmy.weixin4j.exception.WeixinException;
import com.foxinmy.weixin4j.jssdk.JSSDKAPI;
import com.foxinmy.weixin4j.jssdk.JSSDKConfigurator;
import com.foxinmy.weixin4j.mp.WeixinProxy;
import com.foxinmy.weixin4j.token.TokenManager;
import com.foxinmy.weixin4j.type.TicketType;
import net.seedor.pojo.ExecuteResult;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

/**
 * Date   : 2018/4/11
 * Author : zp.x
 * Email  : Z9Show@163.com
 * 微信分享
 */
@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
@RequestMapping("/js_sdk")
public class WeChatJSSDKController {

    private final Logger log = LoggerFactory.getLogger(this.getClass());

    @Autowired
    private WeixinProxy weixinProxy;        //注入weixin4j核心API

    @RequestMapping(value = "/config" , method = RequestMethod.GET)
    public ResponseEntity<ExecuteResult> getJssdkJsonConfig(@RequestParam("url") String url) {
        JSSDKConfigurator jssdkConfigurator = jssdkConfigurator();
        TokenManager ticketTokenManager = ticketTokenManager();
        try {
            //将公众号开发中所有的api全部添加进去。
            jssdkConfigurator.apis(JSSDKAPI.MP_ALL_APIS);
            //生成配置信息
            String jsonConfig = jssdkConfigurator.toJSONConfig(url);
            //weixin4j在生成签名的时候没有提供ticket打印功能,如果想使用微信官方的签名校验,请使用票据管理器获取ticket票据
            log.info("jssdk ticket:" + ticketTokenManager.getAccessToken());
            result.setData(jsonConfig);
        } catch (WeixinException e) {
            e.printStackTrace();
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(result);
        }
        return ResponseEntity.ok(result);
    }

    public TokenManager ticketTokenManager() {
        //通过WeixinProxy对象获取Jsapi的票据管理对象
        return weixinProxy.getTicketManager(TicketType.jsapi);
    }
    public JSSDKConfigurator jssdkConfigurator() {
        //new一个JSSDK配置工具,该工具需要传入票据管理对象,这里传入的同时直接开启JSSDK的debug模式
        return new JSSDKConfigurator(ticketTokenManager()).debugMode();
    }
}

五、在需要自定义分享的页面写JS

<%-- 微信分享JS --%>
<script type="text/javascript">
    $(function (){
        var config = {
            debug: '', // 开启调试模式
            appId: '', // 必填,公众号的唯一标识
            timestamp: '', // 必填,生成签名的时间戳
            nonceStr: '', // 必填,生成签名的随机串
            signature: '',// 必填,签名,见附录1
            jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
        };
        $.ajax({
            url: '<%=basePath %>js_sdk/config',
            type: 'GET',
            dataType: 'json',
            async:false,
            data: {url: window.location.href}
        }).success(function(date){
            var json = JSON.parse(date.data);
            config.debug = false;
            config.appId = json.appId;
            config.timestamp = json.timestamp;
            config.nonceStr = json.nonceStr;
            config.signature = json.signature;
            config.jsApiList = json.jsApiList;
        });
        wx.config(config);
        wx.ready(function(){
            // 微信分享的数据
            var shareData = {
                title: '百度', // 分享标题
                link: 'www.baidu.com',//window.location.href, // 分享链接
                imgUrl: '', // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                    alert("分享成功");
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                    alert("不分享拉倒");
                }
            }
            //分享接口
            <%-- 发送给好友 --%>
            wx.onMenuShareAppMessage(shareData);
            <%-- 分享到朋友圈 --%>
            wx.onMenuShareTimeline(shareData);
            <%-- 分享到QQ --%>
            wx.onMenuShareQQ(shareData);
            <%-- 分享到weibo --%>
            wx.onMenuShareWeibo(shareData);
            <%-- 分享到QQ空间 --%>
            wx.onMenuShareQZone(shareData);
        });
        wx.error(function(res){
            console.log("error:" + res);
        });
    })
</script>
                        ==end==
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值