uniapp H5 公众号微信自定义分享qq,微信带图片标题内容

简介: uniapp H5 公众号微信自定义分享qq,微信带图片标题内容

uniapp H5 公众号微信自定义分享qq,微信带图片标题内容



效果图    


image.png


1、登录微信公众号(需要已经认证过的公众号)


进入“设置与开发”→“公众号设置”→“功能设置”→“JS接口安全域名”,将文件下载下来,上传至与将要分享的页面相同的域名服务器中,上传成功后再在下面填写你的域名。

image.png

2.在“设置与开发”→“基本配置”→“IP白名单”中配置你的IP地址,这里的IP地址是获取签名步骤时需要访问的IP地址。

image.png

3、在“设置与开发”→“基本配置”中拿到APPID及密钥(也就是开发者密码AppSecret),这里在获取签名时需要用到。

image.png

4.后端操作


这时候可以开始获取签名了,在生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket 。


通过官方给出的信息,我们需要先获取access_token(有效期7200秒,2个小时开发者必须在自己的服务全局缓存access_token),access_token是公众号的全局唯一接口调用凭据,公众号调用各接口时都需使用access_token。


/*  这部分其实大部分都是后台协助开发的,因为要服务器缓存
  前端可以了解下逻辑
  采用http GET方式请求
  https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的APPID&secret=你的AppSecret
  返回结果如下:
*/
{"access_token":"此处返回的是你的access_token","expires_in":7200}

5、通过access_token获取jsapi_ticket(有效期7200秒,2个小时,开发者必须在自己的服务全局缓存jsapi_ticket)


/*  这部分其实大部分都是后台协助开发的,因为要服务器缓存
  前端可以了解下逻辑
  采用http GET方式请求
  https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=你的access_token&type=jsapi
  返回结果如下:
*/
{
  "errcode":0,
  "errmsg":"ok",
  "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
  "expires_in":7200
}

6、生成签名


参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。


首先:对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1:


顺序依次为:jsapi_ticket,noncestr,timestamp,url。


noncestr随机字符串生成

image.png



注意!!!

签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。

签名用的url必须是调用JS接口页面的完整URL。

出于安全考虑,开发者必须在服务器端实现签名的逻辑。


点击下面文字进行校验


微信 JS 接口签名校验工具


微信 JS 接口签名校验工具


7.前端代码(我这是自己封装了一下,要是想直接用的话就直接把uni.request里面的复制,然后进行修改里面的路由及配置)


概述 | 微信开放文档


概述 | 微信开放文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html


看看里面微信官方文档,多看看了解一下,对新手要不,不友好


看看文档怎么引入SDK的,使用都是一样,就是引入分两种


一种是


npm install jweixin-module

另一种是链接引入


import wx from 'jweixin-module'
export default (title = '领装分享', content = '领装分享自定义分享') => {
  封装开始
  uni.request({
  url: 'https://lingzhuang.gengduoke.com/adminapi/wxshare/callback',
  data: {
    url: location.href
  },
  success(res) {
    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.signature, // 必填,签名
    jsApiList: [
      "updateAppMessageShareData",
      'updateTimelineShareData',
    ]
    });
    wx.ready(function() { //需在用户可能点击分享按钮前就先调用
    ///配置自定义分享内容
    let options = {
      title: title, // 分享标题
      desc: content, // 分享描述
      link: location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
      imgUrl: 'https://h5.lingzhuang.gengduoke.com/static/close.png', // 分享图标
      success: function() {
      console.log('设置成功2222222')
      },
      cancel: function() {}
    }
    wx.updateAppMessageShareData(options)
    wx.updateTimelineShareData(options)
    });
    wx.error(function(res) {
    console.log('wx.----err---------', res)
    // config信息验证失败会执行 error 函数,如签名过期导致验证失败,具体错误信息可以打开 config 的debug模式查看,也可以在返回的 res 参数中查看,对于 SPA 可以在这里更新签名。
    });
  },
  fail(err) {
    console.log('request------err', err)
  }
  })
}


分享链接里面的那个图片imgUrl是在线的链接

目录
相关文章
|
2月前
|
Java 数据安全/隐私保护 计算机视觉
手机虚拟视频替换摄像头,QQ微信虚拟视频插件,jar代码分享
这段代码演示了如何使用JavaCV捕获视频流、处理帧数据并输出到虚拟摄像头设备。它需要JavaCV和OpenCV库支持
|
7月前
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。
|
3月前
|
数据安全/隐私保护
陌陌头像留V的最好方法,陌陌最新留QQ号技巧,陌陌动态最聪明的留微信
本资料分享社交平台隐秘留联系方式的方法,包含微信头像艺术化处理、二维码变形术,以及QQ号谐音替换、图片分割等技巧。
|
4月前
|
人工智能 前端开发 开发工具
9.2K Star!微信排版从未如此简单,这款开源神器让Markdown飞入公众号!
一款9.2K Star的开源神器,让微信公众号排版变得简单高效!支持Markdown语法,实时预览、多图床混搭、AI智能排版、自定义主题样式等功能一应俱全。通过沉浸式双栏编辑、七图床混合编排、AI写作助手和主题定制工坊等核心功能,彻底解放技术创作者的生产力。无论是技术博客迁移、多平台发布还是企业定制,都能满足需求。三步上手:在线体验、本地部署、公众号对接。项目地址:https://github.com/doocs/md
336 4
|
7月前
|
人工智能 安全 机器人
LangBot:无缝集成到QQ、微信等消息平台的AI聊天机器人平台
LangBot 是一个开源的多模态即时聊天机器人平台,支持多种即时通信平台和大语言模型,具备多模态交互、插件扩展和Web管理面板等功能。
1431 14
LangBot:无缝集成到QQ、微信等消息平台的AI聊天机器人平台
|
7月前
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
4387 15
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
|
7月前
|
小程序 数据安全/隐私保护 开发者
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
389 3
|
8月前
|
人工智能 自然语言处理
使用企业微信或公众号自动回复图片消息
AppFlow支持企业微信和公众号接收图片消息,并提供两种回复方式。方式一:直接回复图片消息,用户发送图片后立即收到回复,但无法继续追问。方式二:先保存图片,待用户发送文字后再一并处理并回复。配置步骤包括选择模板、配置鉴权信息、设置执行动作参数及发布连接流。详细操作可参考相关文档。
754 1
使用企业微信或公众号自动回复图片消息
|
8月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
294 0
|
10月前
|
API
如何在公众号里制作微信报名表
微信万能表单不仅可以制作各种报名单,也可以用作问卷调查,商品发布,登记汇总等,可以根据自己需求,来添加组件,比如姓名、手机号、性别、报名的时间、报名的图片等,因为微信报名表涉及的用途比较广泛,所以很多商家在做微信公众号报名表的时候,针对性不会太强,没有什么局限性,应用还是起来比较方便的
484 12

热门文章

最新文章