微信网页分享JS-SDK的集成使用

使用微信网页分享或微信支付等微信相关功能,都需要集成微信提供的JS-SDK,即在网页中引入jweixin-1.1.0.js

JSSDK使用步骤

  • 步骤一:绑定域名

    先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
    微信网页分享JS-SDK的集成使用_第1张图片
    注意域名规范,备案等。

    步骤二:引入JS文件

<script type="text/javascript" src="/yujian/tongxin/js/jweixin-1.0.0.js">script> 

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

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

<script type="text/javascript" src="/yujian/tongxin/js/jquery-2.1.1.min.js">script>
<script type="text/javascript" src="/yujian/tongxin/js/jweixin-1.0.0.js">script> 
<script>
//微信分享设置 
$(function(){
    //请求后台获取config配置 接口后面贴出
    $.ajax({
                url:"http://songhui.tunnel.qydev.com/yujian/poster?url=http://songhui.tunnel.qydev.com/yujian/tongxin/index.html",//url为当前页面的地址
                type:"get",
                dataType:"json",
                success:function(json){
                    wx.config({
                        debug : false,
                        appId : "wx22a78e9dbede2e85",
                        timestamp : json.timestamp,
                        nonceStr : json.noncestr,
                        signature : json.signature,
                        jsApiList : ['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','hideMenuItems','showMenuItems','hideAllNonBaseMenuItem','showAllNonBaseMenuItem','translateVoice','startRecord','stopRecord','onRecordEnd','playVoice','pauseVoice','stopVoice','uploadVoice','downloadVoice','chooseImage','previewImage','uploadImage','downloadImage','getNetworkType','openLocation','getLocation','hideOptionMenu','showOptionMenu','closeWindow','scanQRCode','chooseWXPay','openProductSpecificView','addCard','chooseCard','openCard']
                    });             
                }
    });
});
//设置分享标题图片地址等
window.share_config = {
    "share": {
        "imgUrl":"http://www.baidu.com/images/shareimg.png",
        "desc":"分享描述",
        "title":"分享标题",
        "link":"http://www.baidu.com/auth.html",//添加跳转地址
        "success":function(){},//分享成功后执行方法
        "cancel":function(){}
    }
};

wx.ready(function () {
    wx.onMenuShareAppMessage(share_config.share);//分享给好友
    wx.onMenuShareTimeline(share_config.share);//分享到朋友圈
    wx.onMenuShareQQ(share_config.share);//分享到qq
    wx.onMenuShareWeibo(share_config.share);//分享到微博
}); 
script>

步骤四:通过ready接口处理成功验证

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

后台代码poster.java (网页加载后请求的接口)

package com.sh.sevlet;

import java.io.IOException;
import java.security.NoSuchAlgorithmException;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONObject;
import com.sh.util.Http;
import com.sh.util.SHA11;
import com.sh.util.TokenThread;

/**
 * 获取微信js签名
 * @author Administrator
 *
 */
public class Poster extends HttpServlet {


    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");
        JSONObject json = new JSONObject();
        String url = request.getParameter("url");

        //jstoken为调用微信普通接口时需要用到的凭证access_token,不同于网页授权获取用户信息时的access_token
        String jstoken = TokenThread.accessToken.getAccessToken();//微信access_token的管理会在下面贴出链接。
        String jsonticket = "";
         try {
                //公众号获取jsapi_token的路径
                jsonticket = Http.methodGet("https://api.weixin.qq.com/cgi-bin/ticket/getticket","access_token="+jstoken+"&type=jsapi");
                //企业号获取路径
//              json3 = Http.methodGet("https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket","access_token="+token+"");
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            JSONObject jsonJs = new JSONObject(jsonticket);

            /**
             * 参与签名的字段包括有效的 jsapi_ticket,noncestr(随机字符串,由开发者生成),timestamp (由开发者生成的当前时间戳), url(当前网页的URL,不包含#及其后面部分。
             * 注意:对于没有只有域名没有 path 的 URL ,浏览器会自动加上 / 作为 path,如打开 http://qq.com 则获取到的 URL 为 http://qq.com/)。
             */
            String jsapi_ticket = jsonJs.getString("ticket");
            String noncestr = UUID.randomUUID().toString();
            String timestamp = Long.toString(System.currentTimeMillis() / 1000);
            String str = "jsapi_ticket=" + jsapi_ticket +
                    "&noncestr=" + noncestr +
                    "×tamp=" + timestamp +
                    "&url=" + url;
            //SHA1加密
            String signature = null;//签名字符串
            try {
                signature = SHA11.sha1(str);
            } catch (NoSuchAlgorithmException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }

            json.put("timestamp", timestamp);
            json.put("noncestr", noncestr);
            json.put("signature", signature);

            response.getWriter().append(json.toString());

    }


    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}

微信access_token的管理

你可能感兴趣的:(JavaScript,微信开发)