Step 1: Bind the domain name
First, log in the wechat public platform, enter the “function setting” of the “public Account Setting”, and fill in the “JS interface security domain name”. You can set only the first level domain name, such as *.qq.com, so that the same company and different business departments can bind domain names.
Note: You can view the interface permissions in Developer Center after login.
Step 2: Import the JS file
Need to call in JS interface of HTML pages to introduce the following JS files, support (HTTPS) : res.wx.qq.com/open/js/jwe… For further improve service stability, when the resource is inaccessible, can change access: res2.wx.qq.com/open/js/jwe… (HTTPS is supported).
Note: The AMD/CMD standard module loading method is supported
Step 3: Write the wxconfig.js file
import axios from 'axios';
/ * * *@name: xxx
* @Date: the 2021-04-30 10:00:00 *@msg: wechat share friends, share circle of friends, H5 jump small program configuration *@param {object} pageInfo
* @return {*}* /
const wxConfig = (pageInfo) = > {
let ua = navigator.userAgent.toLowerCase();
let isWXWork = ua.match(/wxwork/i) = ='wxwork'; // Enterprise wechat
letisWeixin = ! isWXWork && ua.match(/MicroMessenger/i) = ='micromessenger'; / / WeChat
if(! isWeixin) {return;
}
axios({
method: 'post'.url: 'https://xxx.xxx.com/xxx/xxx'.data: {
JsSdkUrl: window.location.href
},
transformRequest: [function (data) {
let ret = ' ';
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
}
returnret; }].headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function (res) {
if (res.status === 200 && res.data) {
let data = res.data;
window.wx.config({
debug: false.// If debug mode is enabled, the return value of all API calls will be displayed in the client alert. If you want to view the parameters passed in, you can open it in the PC, and the parameter information will be printed in the log.
appId: data.appid, // Mandatory, the unique identifier of the public account
timestamp: data.timestamp, // Mandatory to generate the timestamp of the signature
nonceStr: data.nonceStr, // Mandatory to generate a random string of signatures
signature: data.signature, // Mandatory, signature
jsApiList: ['updateAppMessageShareData'.'updateTimelineShareData'].// Mandatory, a list of JS interfaces to be used
openTagList: ['wx-open-launch-weapp'.'wx-open-launch-app'.'wx-open-subscribe'.'wx-open-audio']});window.wx.ready(function () {
console.log('enter the ready')
window.wx.updateAppMessageShareData({ / / friends
title: pageInfo.shareTitle, // Share the title
desc: pageInfo.shareDesc, // Share the description
link: window.location.href, // Share link, the link domain name or path must be the same as the current page corresponding public number JS security domain name
imgUrl: pageInfo.shareImg, // Share ICONS
success: function () {
// The callback function executed after the user clicks share
console.log('updateAppMessageShareData success'); }});window.wx.updateTimelineShareData({ // Share your moments
title: pageInfo.shareTitle, // Share the title
link: window.location.href, // Share link, the link domain name or path must be the same as the current page corresponding public number JS security domain name
imgUrl: pageInfo.shareImg, // Share ICONS
success: function () {
// The setting succeeded
console.log('updateTimelineShareData success'); }})}); wx.error(function (res) {
If the config information fails to be verified, the error function is executed. For example, if the signature expires, the verification fails. You can run the debug mode of config to view the error information.
// It can also be viewed in the returned res parameter, where the signature can be updated for SPA
console.error('wx.config.error' + JSON.stringify(res));
});
window.wx.checkJsApi({
jsApiList: ['updateAppMessageShareData'.'updateTimelineShareData'].// List of JS interfaces to be tested. See Appendix 2 for a list of all JS interfaces.
success: function (res) {
console.log('checkJsApi', res) } }); }}); };export {
wxConfig
}
Copy the codeStep 4: The main.js file configuration ignores Vue checking for open labels
// Open tag is a custom tag, Vue will give a warning of unknown tags,
/ / can be configured Vue. Config. IgnoredElements to ignore the Vue to open check labels.
Vue.config.ignoredElements = ['wx-open-launch-weapp'];
Copy the codeStep 5: Import wxconfig.js to vUE component for necessary configuration
import { wxConfig } from '@/common/wxConfig';
// You can dynamically configure the data after obtaining the activity details
let pageInfo = {
shareTitle: 'Activity title'.// Share the title
shareDesc: 'Activity Description ~~'.// Share the description
shareImg: 'http://placehold.it/120x120/e84c10/ffffff? text=share' // Share ICONS
}
wxConfig(pageInfo);
Copy the codeAt this point, wechat to share friends, sharing circle of friends and other functions can be used normally.
Step 6: Create WX-open-launch-appellingP tags
If the style of the button is fixed and the text of the button is fixed, the following is sufficient.
<div v-if="isWeixin">
<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index? user=123&action=abc">
<script type="text/wxtag-template"></script>
</wx-open-launch-weapp>
</div>
Copy the codeIf you need to dynamically set the button copy and button style based on the state of the activity, using VUE to dynamically bind the style and copy will not work. The reason is that in the following code packages, the ones inside are no longer managed by VUE, so dynamic binding does not work.
<script type="text/wxtag-template">XXX</script>
Copy the code
The first time I tried to fetch the DOM of the button with native JS, and then dynamically bind the style and copy, I found that the dom was always null, so the path was blocked.
<button id="launch-inner-btn" class="btn"</button>document.getElementById('launch-inner-btn') // null
Copy the codeAfter a second discussion with colleagues, I decided to make all OF the WX-Open-launch-Regenerative P tags transparent and create a button(named Btn) that can dynamically set the words and styles of buttons.
Finally, the TAGS for WX-open-launch-appellate P and Btn were wrapped in a DIV, and the transparent TAGS for WX-open-launch-appellate P were added to the visible Btn. The ultimate effect is to see “Btn”, but you click the transparent “WX-open-launch-syndrome” TAB, which is a perfect way to activate apps.
.wx-launch-wrap {
display: inline-block;
width: 100%;
height: 100%;
}
.wx-launch-btn {
position: relative;
}
.wx-launch {
position: absolute;
left: 0;
top: 0;
z-index: 1;
opacity: 0;
overflow: hidden;
}
Copy the code <div v-if="isWeixin" lass="wx-launch-wrap wx-launch-btn">
<! "-- wX-open-launch-repealing P button, do set overflow: hidden; To ensure no overflow, set z-index to 10. Mask this button over the visible button Btn -->
<wx-open-launch-weapp
id="launch-btn"
class="btn wx-launch-wrap wx-launch"
:class="dynamicCss"
username="gh_xxxxxxxx"
path="pages/home/index? user=123&action=abc"
>
<script type="text/wxtag-template"></script>
</wx-open-launch-weapp>
<! Btn dynamicCss for dynamic setting CSS btnLabel for dynamic setting button text -->
<button class="btn" :class="dynamicCss">{{btnLabel}}</button>
</div>
Copy the codeAt this point, you can dynamically set the button styles and text. Can also be perfect to open the function of small procedures.
