uniapp中使用微信jssdk

在作自定義分享時，用到了微信jssdk，記錄一下。

聲明：本文演示uniapp中使用jssdk，示例爲網頁自定義分享

npm方式使用下方指令進行安裝，正文部分爲非npm方式。

npm install jweixin-module --save

一、下載導入jssdk文件

下載連接：https://www.lanzous.com/i8ujkvi

下載後放在項目中，具體放置位置可自行選擇，好比直接放在根目錄，或者放在 components 目錄，以下是個人蔘考截圖：

二、在項目中引用

爲了方便使用，咱們單獨出一個微信相關的 js 文件，進行相關的初始化等操做。

wechat.js 「該文件我放置在項目根目錄，能夠根據本身狀況選擇」

// 本身封裝的 uni.request 工具類
var request = require("./jsTools/request.js");
var jweixin = require('./components/jweixin-module/index.js');

export default {
    //判斷是否在微信中  
    isWechat: function() {
        var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/micromessenger/i) == 'micromessenger') {
            // console.log('是微信客戶端')
            return true;
        } else {
            // console.log('不是微信客戶端')
            return false;
        }
    },
    //初始化sdk配置  
    initJssdkShare: function(callback, url) {
        console.log("init Url : "+url)
        // 這是我這邊封裝的 request 請求工具，實際就是 uni.request 方法。
        request.post(
            'http://127.0.0.1:8080/mptask/api/getSignPackage',
            {
                url: url
            },
            "form",
            function(res){
                let success = res["success"];
                let result = res["result"];
                if(success){
                    jweixin.config({
                        debug: false,
                        appId: result.appId,
                        timestamp: result.timestamp,
                        nonceStr: result.nonceStr,
                        signature: result.signature,
                        jsApiList: [
                            'checkJsApi',
                            'onMenuShareTimeline',
                            'onMenuShareAppMessage'
                        ]
                    });
                    //配置完成後，再執行分享等功能  
                    if (callback) {
                        callback(result);
                    }
                }
            }
        );
    },
    //在須要自定義分享的頁面中調用  
    share: function(data, url) {
        url = url ? url : window.location.href;
        console.log("url:"+url)
        if (!this.isWechat()) {
            return;
        }
        //每次都須要從新初始化配置，才能夠進行分享  
        this.initJssdkShare(function(signData) {
            jweixin.ready(function() {
                var shareData = {
                    title: data && data.title ? data.title : signData.site_name,
                    desc: data && data.desc ? data.desc : signData.site_description,
                    link: url,
                    imgUrl: data && data.img ? data.img : signData.site_logo,
                    success: function(res) {
                        // 分享後的一些操做,好比分享統計等等
                    },
                    cancel: function(res) {}
                };
                //分享給朋友接口  
                jweixin.onMenuShareAppMessage(shareData);
                //分享到朋友圈接口  
                jweixin.onMenuShareTimeline(shareData);
            });
        }, url);
    },
}

簡單說一這裏面的方法：

• isWechat：判斷當前是不是微信環境
• initJssdkShare：請求後臺接口數據，初始化sdk
• share：本次使用的自定義分享的方法

main.js 中引用：

將上方的 wechat.js 定義爲爲 vue 全局屬性，方便後面使用。

import wechat from './wechat.js'
if(wechat.isWechat()){
    Vue.prototype.$wechat =wechat;
}

三、後臺方法（Java）「簽名方法」

基於 WxJava 開源SDK

/**
 * 獲取jssdk簽名
 * @return
 */
@RequestMapping(value = "/getSignPackage", method = RequestMethod.POST)
public Result{
    return new ResultUtil

補充：關於 WxJava 的使用能夠參考上一篇 微信h5非內部瀏覽器支付，該方法接收一個 url 參數，即前端用來分享的 url。

以下是詳細的實現：

public WxJsapiSignature createJsapiSignature(String url) throws WxErrorException {
    long timestamp = System.currentTimeMillis() / 1000L;
    String randomStr = RandomUtils.getRandomStr();
    String jsapiTicket = this.getJsapiTicket(false);
    String signature = SHA1.genWithAmple(new String[]{"jsapi_ticket=" + jsapiTicket, "noncestr=" + randomStr, "timestamp=" + timestamp, "url=" + url});
    WxJsapiSignature jsapiSignature = new WxJsapiSignature();
    jsapiSignature.setAppId(this.getWxMpConfigStorage().getAppId());
    jsapiSignature.setTimestamp(timestamp);
    jsapiSignature.setNonceStr(randomStr);
    jsapiSignature.setUrl(url);
    jsapiSignature.setSignature(signature);
    return jsapiSignature;
}

四、前端使用

在須要自定義分享的界面，簡單舉個例子，以首頁爲例，將下方在代碼放在 onload 或 onshow 中：

if (this.$wechat && this.$wechat.isWechat()) {  
    this.$wechat.share({
        desc: "精選優質、有價值的好文章，轉發給身邊的人",  
        img: "http://img.sscai.club/click.jpeg" 
    });  
}

補充：share 方法有個 url 參數，如不指定則使用當前頁面url，具體參考 wechat.js

if (this.$wechat && this.$wechat.isWechat()) {  
    this.$wechat.share({
        desc: "精選優質、有價值的好文章，轉發給身邊的人",  
        img: "http://img.sscai.club/click.jpeg" 
    },"http://mp.sscai.club/#/history/history");  
}

使用截圖以下所示：