uniapp微信公众号h5端分享

停留的章小鱼

已于 2023-07-27 16:27:14 修改

阅读量8.7k

点赞数 2

文章标签：微信 uni-app 微信小程序前端

于 2023-06-06 10:37:35 首次发布

本文链接：https://blog.youkuaiyun.com/2201_75870706/article/details/131060636

版权

！！！相对于微信小程序的分享比较繁琐

微信小程序分享可参考：uniapp微信小程序分享_停留的章小鱼的博客-优快云博客

效果图：

一、使用微信JS-SDK进行分享

1、绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

！！！登录后可在“开发者中心”查看相应的接口权限。

2、安装模块依赖

npm install weixin-js-sdk --save

3、引入模块

！！！mian.js引入并全局挂载

import wx from 'weixin-js-sdk'

Vue.prototype.$wx = wx

！！！单页面引入

import wx from "weixin-js-sdk";

4、通过 config 接口注入权限验证配置（需要后端配合，Java代码在文章最后，仅供参考）

！！！初始化页面时加载（onLoad、created）

//#ifdef H5
  uni.request({
    url: '请求地址',
    method: 'POST',
    data:'传参',
    header: {//配置请求头
      'Content-Type': this.$store.state.contentType,
      'Authorization' : this.$store.state.token
    },
    success: res => {
      if (res.statusCode < 500) {
        if (res.data.code === 200) {
          // console.log('res.data', res.data.data)
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.data.timeStamp, // 必填，生成签名的时间戳
            nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.data.sign, // 必填，签名，见附录1
            // surl: res.data.surl, //自己添加的，debug为true的时候可以网页打印出对应的URL是否正确
            jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'openLocation']
          })
          setTimeout(() => {
            wx.ready(() => {
              //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
              wx.updateAppMessageShareData({
                title: '分享标题', // 分享标题
                desc: '', // 分享描述
                link: "分享链接",// 该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
                imgUrl: '', // 分享图标
                success: res => {

                },
                cancel: function () {
                  // 用户取消分享后执行的回调函数
                }
              })
              //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
              wx.updateTimelineShareData({
                title: '', // 分享标题
                link: "分享链接",// 该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
                imgUrl: '', // 分享图标
                success: res => {
                 
                },
                cancel: function () {
                  // 用户取消分享后执行的回调函数
                }
              })
            })
          }, 500)
        }
      } else {
        console.error('服务器错误,请检查')
      }
    },
    fail: err => {
      uni.showToast({
        title: '请求失败',
        icon: 'error'
      })
    }
  })
  //#endif

二、使用jweixin-module依赖

1、安装jweixin-module

npm i jweixin-module

2、新建jwexin.js文件引入:（需要后端配合）

import store from './store.js' //引入vuex

//#ifdef H5
const jweixin = require('jweixin-module')
// H5分享
export const wxshare = options => {
  uni.request({
    url: options.url,
    method: 'POST',
    data: options.data || '',
    header: {//配置请求头
      'Content-Type': store.state.contentType,
      'Authorization' : store.state.token
    },
    success: res => {
      if (res.statusCode < 500) {
        if (res.data.code === 200) {
          // console.log('res.data', res.data.data)
          jweixin.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.data.timeStamp, // 必填，生成签名的时间戳
            nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.data.sign, // 必填，签名，见附录1
            // surl: res.data.surl, //自己添加的，debug为true的时候可以网页打印出对应的URL是否正确
            jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'openLocation']
          })
          setTimeout(() => {
            jweixin.ready(() => {
              //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
              jweixin.updateAppMessageShareData({
                title: options.share_data.title || '分享标题', // 分享标题
                desc: options.share_data.desc || '', // 分享描述
                link: options.share_data.link, // 分享链接
                imgUrl: options.share_data.imgUrl || '', // 分享图标
                success: res => {

                },
                cancel: function () {
                  // 用户取消分享后执行的回调函数
                }
              })
              //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
              jweixin.updateTimelineShareData({
                title: options.share_data.title || '分享标题', // 分享标题
                link: options.share_data.link, // 分享链接
                imgUrl: options.share_data.imgUrl || '', // 分享图标
                success: res => {

                },
                cancel: function () {
                  // 用户取消分享后执行的回调函数
                }
              })
            })
          }, 500)
        }
      } else {
        console.error('服务器错误,请检查')
      }
    },
    fail: err => {
      uni.showToast({
        title: '请求失败',
        icon: 'error'
      })
    }
  })
}
  //#endif

3、在main.js中引入挂载：

import { wxshare } from "./utils/jweixin.js"
Vue.prototype.$wxshare = wxshare;

4、要分享的页面使用：

！！！初始化页面时加载（onLoad、created）

this.$wxshare({
	url:'channel/share/getShareInfo',
	data:{
	    url: window.location.href.split("#")[0],
		secret: this.$secret()
	},
	share_data:{
		title:'章小鱼',
		desc:'章小鱼的天',
		imgUrl:'/static/images/recommend/qrcode_icon_black.png',
		link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
	}
})

三、后端代码（我不懂后端哈）！！！仅供参考 20230727添加

1、设置WX_GZH_API：

//公众号请求的地址
public static String WX_GZH_API = "https://api.weixin.qq.com/cgi-bin/";

2、获取`token`：

微信公众号开发中，不管你做啥操作，都需要这个token，并且有效时间两个小时失效，下面是java中获取token的代码：代码中APPID和APPSECRET换成自己appid和secret

/**
     * 获取access_token的值
     * @return
     */
  @GetMapping("/getToken")
  public String getToken() {
      String token = "";
      String path = "token?grant_type=client_credential&appid=" + APPID + "&secret=" + APPSECRET;
      String body = HttpUtil.createGet(WX_GZH_API + path)
          .execute()
          .body();
      log.info("获取了token,返回数据" + body);
      JSONObject object = JSON.parseObject(body);
      //获取token
      token = object.getString("access_token");
      //失效时间
      String expires_in = object.getString("expires_in");
      //将token值的值放在redis里面
      redisService.setCacheObject("gzh_access_token", token,7190,TimeUnit.SECONDS);
      return token;
  }

3、获取`api_ticket`，这个是用在签名里面的，直接请求接口获取就行。

/**
     * 获取jsapi_ticket
     * @return
     */
    @GetMapping("/getJsapiTicket")
    public String getJsapiTicket() {
        //获取redis里面的token
        Object access_token = redisService.getCacheObject("gzh_access_token");
        if (access_token==null) {
            access_token = getToken();
        }
        String path = "ticket/getticket?access_token=" + access_token.toString() + "&type=jsapi";
        String body = HttpUtil.createGet(WX_GZH_API + path)
                .execute()
                .body();
        log.info("获取了JsapiTicket,返回数据" + body);
        JSONObject object = JSON.parseObject(body);
        //获取ticket
        String ticket = object.getString("ticket");
        //错误码
        Integer errcode = object.getInteger("errcode");
        if(errcode==0){
            //将ticket值的值放在redis里面
            redisService.setCacheObject("gzh_ticket", ticket,7190,TimeUnit.SECONDS);
        }
        return ticket;
    }

4、生成签名：

/**
     * 签名
     */
    @GetMapping("/getSing")
    public ResponseResult getSing(String url){
        //从redis里面获取ticket
        Object ticket = redisService.getCacheObject("gzh_ticket");
        if(ticket==null){
            ticket = getJsapiTicket();
        }
        Map<String, String> ret = WeChatUtils.sign(ticket.toString(), url);
        JSONObject objectData = new JSONObject();
        for (Map.Entry entry : ret.entrySet()) {
            objectData.put(entry.getKey().toString(),entry.getValue());
        }
        objectData.put("appId", APPID);
        return ResponseResult.success(objectData);
    }

签名的几个工具类如下所示：

//******************************************
    // 公众号网页开发
    //******************************************
    public static Map<String, String> sign(String jsapi_ticket, String url) {
        Map<String, String> ret = new HashMap<String, String>();
        String nonce_str = create_nonce_str();
        String timestamp = create_timestamp();
        String string1;
        String signature = "";
        //注意这里参数名必须全部小写，且必须有序
        string1 = "jsapi_ticket=" + jsapi_ticket +
                "&noncestr=" + nonce_str +
                "&timestamp=" + timestamp +
                "&url=" + url;
        System.out.println(string1);
        try
        {
            MessageDigest crypt = MessageDigest.getInstance("SHA-1");
            crypt.reset();
            crypt.update(string1.getBytes("UTF-8"));
            signature = byteToHex(crypt.digest());
        }
        catch (NoSuchAlgorithmException | UnsupportedEncodingException e)
        {
            e.printStackTrace();
        }
        ret.put("url", url);
        ret.put("jsapi_ticket", jsapi_ticket);
        ret.put("nonceStr", nonce_str);
        ret.put("timestamp", timestamp);
        ret.put("signature", signature);
        return ret;
    }
    private static String byteToHex(final byte[] hash) {
        Formatter formatter = new Formatter();
        for (byte b : hash)
        {
            formatter.format("%02x", b);
        }
        String result = formatter.toString();
        formatter.close();
        return result;
    }
    private static String create_nonce_str() {
        return UUID.randomUUID().toString();
    }
    private static String create_timestamp() {
        return Long.toString(System.currentTimeMillis() / 1000);
    }

至此结束！后端代码仅供参考！仅供参考！仅供参考！(前端表示不懂后端哈)