全国服务热线:4008-888-888

技术知识

Html5 完成手机微信共享及自定內容的步骤

近期1个新项目有1个手机微信共享而且必须自定手机微信共享內容的要求,由于是第1次触碰到手机微信共享,因此纪录1下期内遇到的1些难题,和进行作用的全部步骤。

下列为大约步骤 (细节放在各个环节)
 

  • 安裝 weixin-js-sdk
  • 原始化手机微信共享
  • 配备手机微信共享自定內容(推送给盆友,推送到盆友圈)

1、安裝 weixin-js-sdk

npm install weixin-js-sdk --save-dev

实际的应用表明查阅手机微信官方文本文档

2、 原始化手机微信共享
 

由于自己正在做的新项目多处必须应用到手机微信共享的作用,因此这里会对手机微信共享的编码开展封裝

下面的编码中的Api实际上便是axios恳求

import wx from 'weixin-js-sdk'
import api from '@/api'
const wxApi = {
    /**
   * [wxRegister 手机微信Api原始化]
   * @param  {Function} callback [ready回调函数涵数]
   */
  wxRegister (callback, url) {
    let query = {
     // 这里的url务必是你要共享的网页页面彻底对应的url,而且必须变换 base64
      url: url 
    }
    api.getWxJsSdk(query).then(res => {
      let data = res.data
      wx.config({
        debug: false, // 打开调节方式
        appId: data.appId, // 必填,群众号的唯1标志
        timestamp: data.timestamp, // 必填,转化成签字的時间戳
        nonceStr: data.nonceStr, // 必填,转化成签字的任意串
        signature: data.signature, // 必填,签字,见附录1
        jsApiList: data.jsApiList // 必填,必须应用的JS插口目录,全部JS插口目录见附录2
      })
    })
    wx.ready((res) => {
      // 假如必须订制ready回调函数方式
      if (callback) {
        callback()
      }
    })
  },
}

注:以上必须变换base64的可使用 js-base64

3、 配备手机微信共享自定內容(推送给盆友,推送到盆友圈)

第2步针对手机微信原始化了封裝配备,可是还缺乏了相对性应的共享等作用,这边就健全1下,

// 在wxRegister涵数后边加上
/**
* [ShareTimeline 自定手机微信共享到盆友圈]
* @param {[type]} option [共享信息内容]
* @param {[type]} success [取得成功回调函数]
* @param {[type]} error   [不成功回调函数]
*/
ShareTimeline (option) {
wx.updateTimelineShareData({
  title: option.title, // 共享题目
  link: option.link, // 共享连接
  imgUrl: option.imgUrl, // 共享标志
  success () {
    // 设定取得成功
  },
  cancel () {
    // 设定不成功
  }
})
},
/**
* [ShareAppMessage 自定手机微信共享到盆友]
* @param {[type]} option [共享信息内容]
* @param {[type]} success [取得成功回调函数]
* @param {[type]} error   [不成功回调函数]
*/
ShareAppMessage (option) {
wx.updateAppMessageShareData({
  title: option.title, // 共享题目
  desc: option.desc, // 共享叙述
  link: option.link, // 共享连接
  imgUrl: option.imgUrl, // 共享标志
  success () {
    // 设定取得成功
  },
  cancel () {
    // 设定不成功
  }
})
}

4、网页页面启用时

// vue 为例
// 下列的涵数有形参请参照上面的方式
import wx from '你封裝的文档'
mounted(){
    let base64 = require('js-base64').Base64
    let url = base64.encode(window.location.href)
    wx.wxRegister(this.wxRegCallback,url)
},
methods:{
    // 自定的jdk回调函数
    wxRegCallback () {},
    // 自定的共享给盆友的涵数
    wxShareAppMessage(){
        let option = {
            title:'',// 共享题目
            desc: '', // 共享叙述
            link: '', // 共享连接
            imgUrl: '' // 共享标志
        }
        // 引入通用性方式
        wx.ShareAppMessage(option)
    },
    // 自定的共享给盆友圈的涵数
    wxShareTimeline(){
        let option = {
            title:'',// 共享题目
            desc: '', // 共享叙述
            link: '', // 共享连接
            imgUrl: '' // 共享标志
        }
        // 引入通用性方式
        wx.ShareTimeline(option)
    }
}

以上便是手机微信共享的步骤,若有不够,欢迎指出

注:

手机微信共享只能在真机上检测
应用当地localhost方式的网站域名没法根据手机微信的校检

总结

以上所述是网编给大伙儿详细介绍的Html5 完成手机微信共享及自定內容,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑欢迎给我留言,网编会立即回应大伙儿的!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服