不同平台使用不同技术实现微信好友、朋友圈分享汇总(H5、taro、uni-app)

人生路漫漫,坑,是活久了见。程序猿世界里各种奇葩的需求都有,随之而来的各种坑也是层出不穷。

应前IBM同事邀请特来做分享的专题总结。一般人我不告诉他,刷到的朋友们就赚到了,你懂的~~~~~~收藏吧!

  事情前情概述,昨天IBM的同事前来咨询我怎样实现微信分享功能。经过一系列的细细道来。原来他们前端是用uniapp开发的一个app,现在要实现分享功能。他们前端的小伙伴没有这方面的经验,折腾了半天没有眉目。那么接下来我从以下三个方面来解剖如何实现分享。

功能介绍:微信分享及收藏是指第三方 App 通过接入该功能,让用户可以从 App 分享文字、图片、视频、网页、小程序、音乐视频至微信好友会话、朋友圈或添加到微信收藏。微信分享及收藏功能已向全体开发者开放,开发者在微信开放平台账号下申请 App 并通过审核后,即可获得微信分享及收藏权限。微信分享及收藏目前支持文字、图片、视频、网页、小程序、音乐视频共六种类型(海外应用支持网页、小程序类型分享)

说白了,对于分享功能来说,是一个非常普遍而又常见的功能。但是面临不同的环境、不同的技术栈确实有点头大。特别是对于初入行的猴子们。

这里就针对分享功能在不同平台、不同技术栈应该怎样去实现做简单的分享。

1、h5分享-微信好友、朋友圈(移动端浏览器)
h5是如何实现微信分享功能??
参考微信分享官方文档:微信开发者官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
官网有点啰嗦,很多小伙伴看着看着就迷茫了 这里我做简单的小结:

  (1)在微信开发平台按照官方要求提供相关资料开通公众号,在开发设置里面配置安全域名。先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。备注:登录后可在“开发者中心”

(2)引入js文件:可以使用传统的引入方式:

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

(3)业务功能模块开发直接上代码

export function weixinShareInfo(name,title,url,logo){// name 活动名称   title 活动活动简介  url 分享的地址  logo
    var data={//请求参数
     data:url,//分享的页面地址
    }
    requestMethods("/weChat/getSign",data).then(res=>{
      if (res.code == "SUCCESS") {
        let weChatData = res.data
          wx.config({
            debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: weChatData.appId,         // 必填,公众号的唯一标识,填自己的!
            timestamp: weChatData.timestamp, // 必填,生成签名的时间戳,刚才接口拿到的数据
            nonceStr: weChatData.nonceStr,   // 必填,生成签名的随机串
            signature: weChatData.signature, // 必填,签名,见附录1
            jsApiList: [
              'updateAppMessageShareData',//分享好友
              'updateTimelineShareData',// 分享朋友圈
              'onMenuShareAppMessage',
              'onMenuShareTimeline'
            ]
          })
        wx.error(function(res){
       
  • 19
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值