微信分享公共js

微信分享

更多前端工具和笔记博客:
https://yaohuihou.github.io/

基于微信公众号分享,调用微信 sdk,引用本文件前必须保证页面已经引入(支持 https) http://res.wx.qq.com/open/js/jweixin-1.2.0.js 详细查看微信公众号开发

这里是微信分享公共方法

CommonJs

本文件判断 CommonJs API(module.exports),可在 vue 中引用此模块

// vue调用
const wxShare = require('./assets/share')
wxShare(config, callback)

// 普通页面调用
wxShare(config, callback)

config

config 是为接口权限配置,必传 ;callback 为成功之后的回调函数,非必传,

config = {
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: [], // 必填,调用api
  WechatShareData:{  // 必填
    'title': '分享文案',
    'link': '分享链接',
    'imgUrl': '分享图标',
    'desc': '描述'
  }
}

wxShare( config )

callback

callback 是微信 sdkapi 的其他扩展方法,非必填

wxShare(config, function() {
  // 其他api扩展 非必填
  wx.hideAllNonBaseMenuItem()
})

微信分享源码

/*! Weixin Share */
;(function(w) {
  // check API
  function checkJsApi(config) {
    var shareArr = {
      timeline: 'onMenuShareTimeline',
      appmessage: 'onMenuShareAppMessage',
      qq: 'onMenuShareQQ',
      weiboApp: 'onMenuShareWeibo',
      QZone: 'onMenuShareQZone'
    }
    for (var i = 0; i < config.jsApiList.length; i++) {
      var API = config.jsApiList[i]
      if (API.indexOf('share') != -1) {
        var type = API.split(':')[2]

        // 获取分享
        wx[shareArr[type]](config.WechatShareData)
      }
    }
  }

  var wxShare = function(config, callback) {
    wx.config({
      debug: true,
      appId: config.appId,
      timestamp: config.timestamp, // 生成签名的时间戳
      nonceStr: config.nonceStr, // 生成签名的随机串
      signature: config.signature, // 签名
      jsApiList: config.jsApiList
    })
    wx.ready(function() {
      // 检验是否分享
      checkJsApi(config)

      // 回调函数可扩展其他方法
      callback && callback()
    })

    //
    wx.error(function(res) {})
  }
  // commonjs
  if (typeof module !== 'undefined') {
    module.exports = wxShare
  } else {
    w.wxShare = wxShare
  }
})(typeof global !== 'undefined' ? global : this)
### 实现微信分享到朋友圈功能 在 UniApp 中实现微信分享到朋友圈的功能主要依赖于 `onShareTimeline` 和 `onShareAppMessage` 方法。通过这两个 API 可以轻松地为应用中的所有页面添加分享至朋友圈以及发送给朋友的功能。 #### 配置教程 为了使整个应用程序支持分享功能,可以在项目的公共组件或全局事件处理文件中统一设置分享逻辑[^1]: ```javascript // common.js 或者 main.js 文件内定义通用分享配置 export default { onLaunch() { this.$once('hook:beforeCreate', function () { const pages = getCurrentPages(); pages.forEach(page => { page.onShareTimeline = function () { return { title: '自定义分享标题', path: '/pages/index/index?query=参数' } }; page.onShareAppMessage = function (options) { if (options.from === 'button') { // 来源于按钮触发 console.log(options.target); } else { // 来源于顶部转发按钮 console.log(options.target); } return { title: '自定义分享标题', path: '/pages/index/index?query=参数', imageUrl: 'https://example.com/image.png' // 自定义图片链接 } }; }); }); } } ``` 上述代码片段展示了如何利用生命周期钩子函数来确保当任何新页面被创建时都会自动注册相应的分享行为。对于每一个页面实例而言,`onShareTimeline` 定义了该页面用于分享到朋友圈的信息;而 `onShareAppMessage` 则涵盖了两种场景下的消息分享——即点击右上角菜单项或是特定按钮触发的分享操作。 #### 使用方法说明 - **title**: 设置分享卡片显示的文字描述; - **imageUrl** *(可选)* : 提供一张代表性的缩略图作为预览图像(仅限 `onShareAppMessage`),这有助于提高用户体验并吸引更多的关注。 完成以上步骤之后,在开发环境中可以通过连接微信开发者工具来进行测试验证效果[^2]。一旦确认无误,则可以正式上线发布带有完善社交互动特性的小程序版本。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值