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返回登录信息。