宜远公众号H5网页AI测肤报告分享

发现网上找的H5网页分享功能的资料都不够详细。

拿宜远H5网页AI测肤报告分享为例，整理一下H5网页微信分享给朋友和分享朋友圈的功能

1、加载微信的jssdk

     //微信h5
     import wx from 'weixin-js-sdk'

     Vue.prototype.wx = wx

 

2、获得微信api调用权限  updateTimelineShareData  updateAppMessageShareData

uni.request({
        url: _this.apihost + '/wxcefu/normalapi/thirdAuthParam.php',
        data: reqParam,
        header: { 'Content-Type': 'application/json;charset=UTF-8'},
        success: (res) => {
                _this.wx.config({
                    debug: false, // 开启调试模式，true会所有api返回值
                    appId: res.data.app_id, // 公众号唯一id
                    timestamp: res.data.timestamp, // 生成签名的时间戳
                    nonceStr: res.data.noncestr, // 生成签名的随机串
                    signature: res.data.signature, // 签名
                    jsApiList: [ // 需要使用的js列表
                        'chooseImage', // 选择图片
                        'uploadImage', // 上传图片
                        'updateTimelineShareData',
                        'updateAppMessageShareData'
                    ]
                });
        }
   })

  thirdAuthParam.php  中返回微信授权验证所需要的参数：

$res = file_get_contents("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appId}&secret={$appSecret}");
$return = json_decode($res, true);
$access_token = $result['access_token'];
$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$access_token}&type=jsapi";
$res = file_get_contents($url);
$return_msg = json_decode($res, true);
$ticket = $return_msg["ticket"];
$expires = strtotime(time() . " +" . ($return_msg["expires_in"] - 600) . " second");

$url_array = array();
$url_array["noncestr"] = guid(true);
$url_array["jsapi_ticket"] = $ticket;
$url_array["timestamp"] = time();
$url_array["url"] = $param['url'];
ksort($url_array);
$url_key = ToUrlParams($url_array);
$data = sha1($url_key);
$result = ['code' => 0];
$result["signature"] = $data;
$result["app_id"] = $appId;
$result["timestamp"] = $url_array["timestamp"];
$result["noncestr"] = $url_array["noncestr"];

echo_json($result);


function ToUrlParams($params) {
    $string = '';
    if (!empty($params)) {
        $array = array();
        foreach ($params as $key => $value) {
            $array[] = $key . '=' . $value;
        }
        $string = implode("&", $array);
    }
    return $string;
}

3、分享设置：

_this.wx.ready(function() {
	_this.wx.checkJsApi({
	jsApiList: [
		'updateTimelineShareData',
		'updateAppMessageShareData'
	],
	success: function(res) {
		if (res.checkResult.updateAppMessageShareData && res.checkResult.updateTimelineShareData) {
			var shareid = uni.getStorageSync('detail_id')
			var shareData = {
				title: '宜远智能AI测肤',
				desc: '宜远智能AI肌肤分析报告',
				link: 'https://m.yimei.ai/wxcefu/normalweb/index.html#/pages/index/detail?shareid='+shareid,
				imgUrl: 'https://m.yimei.ai/wxcefu/normalweb/static/image/logo.jpg',
				success: function() {
					console.log('宜远智能AI肌肤分析报告')
				}
			};
			_this.wx.updateAppMessageShareData(shareData)
			_this.wx.updateTimelineShareData(shareData)
		} 
	}
   })
})