微信js分享第三方链接

1. 公众号配置

2. 后台接口

3. 前端js

4. 个别问题解决方法

 

 

---

 

1、公众号配置

　　前提：公众号必须经过认证

　　登录公众号 ------> 公众号配置 ------> 功能设置

　　找到“JS接口安全域名”，配置域名（域名必须经过认证）

　　具体规则如下

　　【以百度域名为例，下面输入框中填写的就是www.baidu.com(不知道只写baidu.com能不能行)】

　　【如果填写的指定路径，那么分享的页面需在此路径下】

　　

 

2、后台接口

　　控制层

　　注：

　　其中HttpUtils 中只使用了httpGet 来请求微信api接口

　　RedisClient把token和ticket保存进redis，限制过期时间

　　getSiteConfig仅仅用来获取appid和secrect

　　加密的工具类在控制层的代码下面

　　

package com.mingtai.yuqing.common.controller;

import com.alibaba.fastjson.JSONObject;
import com.mingtai.base.model.ApiResult;
import com.mingtai.yuqing.common.redis.RedisClient;
import com.mingtai.yuqing.common.util.HttpUtils;
import com.mingtai.yuqing.plat.tenant.service.ITenantService;
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.UUID;
import static com.mingtai.yuqing.common.util.SHA1.SHA1;

@RestController
@RequestMapping("/wx/js/")
public class WxJsConfigController {

    @Autowired
    private ITenantService tenantService;
    private static final Integer siteId = 180;
    private String token = null;
    private String appId = null;
    private String secret = null;
    private String ticket = null;

    /**
     * 获取微信JS配置信息
     * @param url
     * @param datetime
     * @return
     * @throws Exception
     */
    @RequestMapping("getConfig")
    public ApiResult getConfig(String url, String datetime) throws Exception {
        String key = "wx.ticket." + this.siteId;
        String nowTicket = RedisClient.get(key);
        getSiteConfig();
        if (StringUtils.isBlank(nowTicket)) {
            getAccessToken();
            getTicket(key);
        } else {
            this.ticket = nowTicket;
        }
        //随机字符串
        String nonceStr = UUID.randomUUID().toString().replace("-", "").substring(0, 16);
        //时间戳
        String timestamp = datetime;
        //生成内容
        url = url + "&t=" + datetime;
        String str = "jsapi_ticket=" + this.ticket + "&noncestr=" + nonceStr + "&timestamp=" + timestamp + "&url=" + url;
        String signature = SHA1(str);

        JSONObject jsonObject = new JSONObject();
        jsonObject.put("appId", this.appId);
        jsonObject.put("timestamp", timestamp);
        jsonObject.put("nonceStr", nonceStr);
        jsonObject.put("signature", signature);
        return new ApiResult(jsonObject);
    }

    public void getAccessToken() throws Exception {
        String key = "wx.token." + this.siteId;
        String accessToken = RedisClient.get(key);
        if (StringUtils.isBlank(accessToken)) {
            String tokenUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET";
            tokenUrl = tokenUrl.replace("APPID", this.appId).replace("APPSECRET", this.secret);
            String result = HttpUtils.doGet(tokenUrl);
            JSONObject json = JSONObject.parseObject(result);
            String newToken = json.getString("access_token");
            Integer expireTime = json.getInteger("expires_in");
            this.token = newToken;
            RedisClient.set(key, newToken, expireTime - 10);
        } else {
            this.token = accessToken;
        }
    }

    public void getTicket(String key) throws Exception {
        String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + this.token + "&type=jsapi";
        String nowTicket = RedisClient.get(key);
        String result = HttpUtils.doGet(url);
        JSONObject json = JSONObject.parseObject(result);
        nowTicket = json.getString("ticket");
        Integer expireTime = json.getInteger("expires_in");
        this.ticket = nowTicket;
        RedisClient.set(key, nowTicket, expireTime - 10);
    }

    private void getSiteConfig() {
        String allConfig = tenantService.getTenantById(this.siteId).getTeExpandField();
        JSONObject jsonObject = JSONObject.parseObject(allConfig);
        this.appId = jsonObject.getString("appId");
        this.secret = jsonObject.getString("secret");
    }


}

　　工具类

　　

package com.mingtai.yuqing.common.util;

import java.io.UnsupportedEncodingException;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;

public class SHA1 {

    public static String SHA1(String decript) throws UnsupportedEncodingException {
        try {
            MessageDigest digest = MessageDigest.getInstance("SHA-1");
            digest.update(decript.getBytes("utf-8"));
            byte messageDigest[] = digest.digest();
            StringBuffer hexString = new StringBuffer();
            //转为十六进制
            for (int i = 0; i < messageDigest.length; i++) {
                String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);
                if (shaHex.length() < 2) {
                    hexString.append(0);
                }
                hexString.append(shaHex);
            }
            return hexString.toString();
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        }
        return "";
    }

}

3、前端JS

　　注：需先调用wxJsConfig方法

//微信js配置
    wxJsConfig: function (config) {
        wx.config({
            appId: config.appId,
            timestamp: config.timestamp,
            nonceStr: config.nonceStr,
            signature: config.signature,
            jsApiList: [
                'updateAppMessageShareData',
                'updateTimelineShareData',
                'onMenuShareAppMessage',  //旧的接口，即将废弃
                'onMenuShareTimeline' //旧的接口，即将废弃
            ]
        });
    },
    //微信分享
    wxJsShare: function (data) {
        //自定义“分享给朋友”及“分享到QQ”按钮的分享内容
        wx.ready(function () {
            wx.updateAppMessageShareData({
                title: data.title,
                desc: data.desc,
                link: data.link,
                imgUrl: data.imgUrl,
                success: function () {
                    console.log("自定义分享1");
                }
            });
        });
        //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
        wx.ready(function () {
            wx.updateTimelineShareData({
                title: data.title,
                link: data.link,
                imgUrl: data.imgUrl,
                success: function () {
                    console.log("自定义分享2");
                }
            });
        });
    }

4、个别问题解决方法

　　注：只作补充，具体问题解决方法见官方JS文档----附录5

　　（1）可以使用“微信开发者工具”来调试

　　（2）“js-sdk 没有此SDK或暂不支持此SDK模拟”。

　　　　微信开发者工具不支持此方法的调用，用手机上的微信是没问题的。

　　　　例如：updateAppMessageShareData