WeChat official account H5 page: no sharing operation

No sharing of H5 page on wechat (sharing to friends, friends)

This time we talk about two ways of implementation: the first one is correct and uncontested, and the second one is simple and available, but it doesn't guarantee correct grammar (what you just started to use, no problem)!

Now let's start with the first way:

Step 1: install jssdk

Global installation: NPM install Weixin JS SDK

Step 2: encapsulate config configuration

Create a wxForbidShare.js in utils as follows: (paste and copy)

const wx = require('weixin-js-sdk')
// import wx from 'weixin-js-sdk'
var wexinForbidShare = (data) => {
  let appId = data.appId
  let timestamp = data.timestamp
  let nonceStr = data.nonceStr
  let signature = data.signature
  wx.config({
    debug: false, // When debugging mode is turned on, the return values of all the APIs called will be alert ed out on the client side. To view the parameters passed in, you can open them on the pc side, and the parameter information will be printed out through the log, which will only be printed on the pc side.
    appId: appId, // Required, the only sign of official account.
    timestamp: timestamp, // Required, generate signature timestamp
    nonceStr: nonceStr, // Required, generate random string of signature
    signature: signature, // Required, signature, see Appendix 1
    jsApiList: ['hideMenuItems'] // Required, list of JS interfaces to be used, see Appendix 2 for list of all JS interfaces
  })
  wx.ready(function () {
    wx.hideMenuItems({
      menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline', 'menuItem:share:qq', 'menuItem:share:QZone', 'menuItem:openWithSafari', 'menuItem:openWithQQBrowser', 'menuItem:favorite']
    })
  })
  wx.error(function (res) {
    // If the validation of config information fails, the error function will be executed. For example, if the signature expires, the validation fails. The specific error information can be viewed in the debug mode of config, or in the returned res parameter. For SPA, the signature can be updated here.
    /* alert("config Information validation failed '); */
  })
}
export default wexinForbidShare

Step 3: in the preparation of forbidden sharing page, reference js and get basic information

Reference: import wexinForbidShare from ' ... /utils/wxForbidShare’

created () {
this.getForbidShare()
}

this.getForbidShare() is mainly to send a request to the back end according to the dynamic url of this page, and get the parameters needed for configuration: appId, timestamp, noncestr and signature.
Be careful:
The url must be obtained dynamically, and the part in front of the address ා, namely window.location.href.split('ා) [0], here it is explained that some of them will use the transferred encoding component (window.location.href.split(' #) [0]); this should be determined according to the actual situation and background interaction.

The content of this.getForbidShare() is as follows: (it can be sticky copied)

getForbidShare () {
      var that = this
      var test = window.location.href.split('#')[0]
      console.log(test)
      //  Page wechat sharing interface
      that.$get(that.$axiosUrl.sdkConfig, {url: test})
        .then((response) => {
          console.log(response.code)
          if (response.code === 0) {
            wexinForbidShare(response.data, function () {
            }, function (e) {
              Toast.fail('Networking error')
            })
          }
        })
    },

All right, that's it!

Let's talk about the second way:

Step 1 global installation: NPM install Weixin JS SDK
Second page reference: import wx from 'Weixin JS SDK'
Page created: wx. hideOptionMenu() is defined in the function;

That's it when it's done! But it didn't....
In this way, you don't need to get config permission. But one problem is that the first page you set doesn't take effect. The second page you jump to and the next page you can disable sharing! (I'm really surprised about this. I don't know why. I'm very sad. I hope your friend will leave a message!)
Let's talk about how I realized it: I added A page in front of the first page (page A needs to be forbidden to share) - page A (the function of page B is to jump, so that the function of page A can be realized)
The code on page B is attached below;

<template>
  <div></div>
</template>
<style></style>
<script>
import wx from 'weixin-js-sdk'
export default {
  name: 'activitySignUp',
  created () {
  // This page is for the first registration page to prohibit sharing
  },
  mounted () {
    var that = this
    wx.hideOptionMenu()
    setTimeout(function () {
      that.$router.push({path: '/activitySignUpIndex', query: {wUserId: that.wUserId, activityId: that.activityId}})
    }, 1500)
  }
}
</script>

All right, it's over! After that, you can write and use the first one at ease. I understand the second one. I hope that the people who know the reason will give me an answer. After reading it, let's pay attention to it!

Published 29 original articles, won praise 5, visited 20000+
Private letter follow

Tags: SDK npm encoding

Posted on Sat, 15 Feb 2020 23:35:02 -0500 by Pnop