uniapp develops WeChat public account JSSDK to share with friends and in Moments

This diary mainly records the problems I encountered at work. Step into the trap for those who have never been exposed to it!

Functional Requirements:

Click the upper right corner to share it with friends or share it in Moments. When the person being shared clicks it, it will be automatically authenticated. (Automatic authentication is implemented through the backend, but I think the official API can also be called through the frontend to make authentication requests)

Development environment:

uniapp, view

Install:

In uniapp, you can use the module method to reference WeChat js-sdk. If there is a problem with the direct download from WeChat official website, you can use jweixin-module.

- NPM installation method (if you don’t know how to use NPM, don’t use this method)

npm install jweixin-module --save

- How to download and use (traditional citation method)

Download address:https://unpkg.com/[email protected]/lib/index.js

-Official complete API
WeChat official JSSDK documentation

Configure JS secure domain name

Here you need to log in to the official account backend – official account settings – function settings to see that you can configure a JS secure domain name.
At the same time, you must also add the IP address of this domain name to the whitelist in the basic configuration.

use:

NPM：

// weixinModule.js
var jweixin = require('jweixin-module')
function WXConfig(_this){
    
    
//这个URL 路径中不可以带有hash值 即不能又 #后面的的内容（包含#）
//这里使用到了encodeURIComponent() 下文中会说明原因为什么要使用它
let URL = window.encodeURIComponent(location.href.split('#')[0])
	_this.$reqHttp({
    
    
		url:"/setWxConfig",
		data:{
    
    
			url: URL //我这里将当前页面的URL传给后端进行签名
		},
		success:(res) => {
    
    
			jweixin.config({
    
    //这里是个函数，非对象
				debug: true, // 调试，发布的时候改为false
				appId: res.data.appid,//后端接口获取
				nonceStr: res.data.noncestr,//后端接口获取
				timestamp: res.data.timestamp,//后端接口获取
				signature: res.data.signature,//后端接口获取
				jsApiList: [ // 可能需要用到的能力 需要啥就写啥。多写也没有坏处
					'updateAppMessageShareData',
					'updateTimelineShareData',
				]
			})
			jweixin.ready(function(){
    
    
				// 分享给朋友
				jweixin.updateAppMessageShareData({
    
     
				    title: '快看！这里有个帅哥', // 分享标题
				    desc: '你看我帅不帅', // 分享描述
					 // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				    link: 'http://你的域名/index?inviteCode=2222',//这里可带参数，必须是同配置的JS安全域名一致
					imgUrl:'http://你的域名/images/shuai.png',// 必须是同配置的JS安全域名一致
				    success: function () {
    
    }
				})
			})
		}
	})
}

export default {
    
    
	WXConfig
}

Note:imgUrl If is empty, the IOS phone prompt cannot be empty, and Android phones can share it. It is recommended not to be empty

//index.vue
<script>
import weixinModule from "./weixinModule.js"
onLoad(){
    
    
	weixinModule.WXConfig(this)
}
</script>

Reference method

<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
//其它的代码与上面基本一样

Common errors and causes

invalid signatureSignature error. It is recommended to check in the following order:

1. Confirm that the signature algorithm is correct and can be verified usingofficial tools. (http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign)

2.ConfirmationconfigmediumnonceStr(js中驼峰标准大写S), timestampgiven It is a match in the middle of the namenoncestr, timestamp.

3. Confirmurl that the page is completeurl (please confirm on the current pagealert(location.href.split('#')[0])), including a>'http(s)://' part, and '? The GET parameter part after ', but does not include the part after '#'hash.

4.Confirmation configneutral appidgiven to youjsapi_tickettarget appidmatch.

5. Make sure to cache access_token and jsapi_ticket. (The token has been cached and is being requested again. The ticket depends on the situation)

6. Make sure that the url you obtain for signing is obtained dynamically. If it is a static page of html, it is passed on the front end< a i=3> will be sent to the background for signature. The front-end needs to use to obtain the link of the current page excluding the part (available < /span>because once the page is shared, the WeChat client will add other parameters at the end of your link, If the current link is not obtained dynamically, the page signature after sharing will fail. ), obtain, and needajaxurljs'#'hashlocation.href.split('#')[0]encodeURIComponent

More error references:

https://blog.csdn.net/weixin_39706415/article/details/89138183
Insert image description here