Uniapp分享到微信

一、Uniapp微信授權

在使用Uniapp進行微信分享之前，首先需要獲取微信授權的許可權。微信授權是指用戶點擊允許授權之後，開發者可以獲得用戶的基本信息。

Uniapp中獲取微信授權的方法為uni.getUserInfo(Object callback)，其中callback返回用戶信息，如下：

uni.getUserInfo({
    success: function(res) {
        console.log(res);
    }
});

此方法返回用戶信息如下：

{
    userInfo: {},
    rawData: "",
    signature: "",
    encryptedData: "",
    iv: ""
}

其中userInfo是用戶信息，rawData是不包含敏感信息的原始數據字元串，signature是使用SHA1演算法得出的簽名，用於驗證數據的真實性，encryptedData是包含用戶敏感信息的加密數據，iv是加密演算法的初始向量。

二、Uniapp微信分享

在獲得微信授權之後，Uniapp可以輕鬆地實現微信分享。首先需要在manifest.json文件中聲明微信分享的相關許可權，如下：

{
    "mp-weixin": {
        "appid": "xxxxxxxxxx",
        "permission": {
            "scope.userLocation": {
                "desc": "你的位置信息將用於小程序位置介面的效果展示"
            },
            "scope.userInfo": {
                "desc": "你的基本信息將用於小程序的登錄和身份驗證"
            }
        },
        "tabBar": {
            "color": "#666",
            "selectedColor": "#EA5149",
            "backgroundColor": "#fff",
            "borderStyle": "black",
            "list": [{
                "pagePath": "pages/index/index",
                "text": "首頁",
                "iconPath": "static/tabbar/home.png",
                "selectedIconPath": "static/tabbar/home_s.png"
            }]
        },
        "window": {
            "navigationBarBackgroundColor": "#fff",
            "navigationBarTextStyle": "black",
            "navigationBarTitleText": "微信分享測試",
            "backgroundColor": "#f2f2f2",
            "backgroundTextStyle": "light"
        },
        "networkTimeout": {
            "request": 10000,
            "downloadFile": 10000
        },
        "permission": {
            "scope.address": {
                "desc": "小程序需要您的微信通訊錄來幫助您快速找到您的朋友"
            }
        },
        "plugins": {
            "myPlugin": {
                "version": "1.0.1",
                "provider": "wxidXXXXXXXXXXXXXXXXX"
            }
        }
    }
}

其中appid為開發者在微信公眾平台獲取的應用ID，permission為需要聲明的許可權信息。

之後，在需要分享的頁面的.vue文件中，可以在組件的methods屬性中添加如下方法實現微信分享：

share: function() {
    uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 5,
        href: "https://uniapp.dcloud.io/client",
        title: "uni-app",
        summary: "最好的跨平台開發框架",
        imageUrl: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-bg65noyh/c8383fb0-8b16-11eb-8db0-0910db1f4d7c.png",
        success: function(res) {
            console.log(JSON.stringify(res));
        },
        fail: function(err) {
            console.log(JSON.stringify(err));
        }
    });
}

其中provider為分享的平台，scene為分享的場景，type為分享的內容類型，href為分享的URL地址，title為分享的標題，summary為分享的副標題，imageUrl為分享的圖片URL。

三、Uniapp微信小程序登錄

與微信分享類似，Uniapp也可以通過微信小程序登錄獲取用戶的基本信息。首先需要在manifest.json文件中聲明登錄的相關許可權，如下：

{
    "mp-weixin": {
        "appid": "xxxxxxxxxx",
        "permission": {
            "scope.userLocation": {
                "desc": "你的位置信息將用於小程序位置介面的效果展示"
            },
            "scope.userInfo": {
                "desc": "你的基本信息將用於小程序的登錄和身份驗證"
            }
        },
        "tabBar": {
            "color": "#666",
            "selectedColor": "#EA5149",
            "backgroundColor": "#fff",
            "borderStyle": "black",
            "list": [{
                "pagePath": "pages/index/index",
                "text": "首頁",
                "iconPath": "static/tabbar/home.png",
                "selectedIconPath": "static/tabbar/home_s.png"
            }]
        },
        "window": {
            "navigationBarBackgroundColor": "#fff",
            "navigationBarTextStyle": "black",
            "navigationBarTitleText": "微信分享測試",
            "backgroundColor": "#f2f2f2",
            "backgroundTextStyle": "light"
        },
        "networkTimeout": {
            "request": 10000,
            "downloadFile": 10000
        },
        "permission": {
            "scope.address": {
                "desc": "小程序需要您的微信通訊錄來幫助您快速找到您的朋友"
            }
        },
        "plugins": {
            "myPlugin": {
                "version": "1.0.1",
                "provider": "wxidXXXXXXXXXXXXXXXXX"
            }
        }
    }
}

之後，在需要登錄的頁面的.vue文件中，可以在組件的methods屬性中添加如下方法實現微信登錄：

login: function() {
    uni.login({
        provider: "weixin",
        success: function(res) {
            console.log(JSON.stringify(res));
        },
        fail: function(err) {
            console.log(JSON.stringify(err));
        }
    });
}

其中provider為登錄的平台，success返回登錄信息。