Home Web Front-end Front-end Q&A Sharing interface developed by WeChat Related content

Sharing interface developed by WeChat Related content

Jun 20, 2018 pm 04:20 PM
WeChat

I have been working on WeChat service account development recently. I will briefly summarize it to facilitate my own learning, accumulation and sharing with everyone:

Environment introduction:

Spring Spring MVC Mybatis

Development language:

JAVA

In the development of WeChat public platform, WeChat only announced an interface and encryption and decryption based on the HTTP protocol Algorithm SDK, during the development process, you can configure data according to your needs, call relevant interfaces, or refer to the more mature WeChat public account SDK based on java language. The author quotes the currently popular

## weixin-java-tools

You can refer to: Click to open the link

weixin-java-mp-2.9.0.jar was introduced in the project and weixin-java-common-2.9.0.jar can directly call relevant functional interfaces and complete jssdk certification

## Sharing interface:

##        1. Backstage preparation:

                      Build a public control class: WeXinJsSdkController, complete jssdk authentication through ajax access:

@Controller
@RequestMapping("jssdk")
public class WeXinJsSdkController {
	
	@Autowired
	private WxMpService wxMpService;
	
	@RequestMapping(value = "/config", method = RequestMethod.GET)
	@ResponseBody
	public WxJsapiSignature wxJsSdkConfig(HttpServletRequest request,String url) {
		try {  // 直接调用wxMpServer 接口 
			WxJsapiSignature wxJsapiSignature = wxMpService.createJsapiSignature(url);
			return wxJsapiSignature;
		} catch (WxErrorException e) {
			return null;
		}
	}
	  
}
Copy after login
   

2. Page initialization js configuration related Interface:


   <%--通过config接口注入权限验证配置--%> 
        /* 初始化jssdk  分享功能  */
 	$.get("${basePath}/jssdk/config.do",{url:window.location.href},function(data,status){
 		if(status == "success"){
 			wx.config({
 			    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
 			    appId: data.appId, // 必填,公众号的唯一标识
 			    timestamp: data.timestamp, // 必填,生成签名的时间戳
 			    nonceStr: data.nonceStr, // 必填,生成签名的随机串
 			    signature: data.signature,// 必填,签名,见附录1
 			    jsApiList: [&#39;checkJsApi&#39;, &#39;onMenuShareTimeline&#39;, &#39;onMenuShareAppMessage&#39;, &#39;onMenuShareQQ&#39;] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
 			 
 			});  
 		
 			
 			wx.ready(function(){
 			  //	layer.msg("jssdk初始化成功");
 			    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,
 			    //所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
 			
 			      <%-- 分型内容  分享给朋友、朋友圈、 --%> 
 		            var shareData = {  
 		                title: &#39;${requestScope.atc.trainsubject}&#39;,  
 		                desc: &#39;${description}&#39;,  
 		            //  link: &#39;https://www.baidu.com&#39;,  // 分享域名要和当前域名保持一致!!
 		                imgUrl: &#39;http://www.cyfd.cn/tektcrm/EventNoti/images/attendance.png&#39;,  
 		                success: function (res) {  
 		                   // alert(&#39;已分享&#39;);  
 		                },  
 		                cancel: function (res) {  
 		                   // alert(&#39;已取消&#39;);  
 		                },  
 		                fail: function (res) {  
 		                   // alert(JSON.stringify(res));  
 		                }  
 		            };  
 		            
 		                <%--分享给朋友接口--%>  
 		            wx.onMenuShareAppMessage(shareData);  
 		               <%--分享到朋友圈接口--%>  
 		            wx.onMenuShareTimeline(shareData);  
 		               <%--分享到QQ朋友接口--%>  
 		            wx.onMenuShareQQ(shareData);  
 			
 			});
 			wx.error(function(res){
 			    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,
 			    //也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
 			//	layer.msg(res);
 			});
 			
 		}
 		},"json");
Copy after login
Learning lies in constant exploration, thinking and summarizing records. Friends who like it are welcome to leave a message below and make progress together with you!


This article explains the relevant content of the sharing interface developed by WeChat. For more related content, please pay attention to the php Chinese website.

related suggestion:Learn basic knowledge for front-end engineers


##About JavaScript Basic related explanations

Related explanations about object-oriented design

The above is the detailed content of Sharing interface developed by WeChat Related content. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

deepseek image generation tutorial deepseek image generation tutorial Feb 19, 2025 pm 04:15 PM

DeepSeek: A powerful AI image generation tool! DeepSeek itself is not an image generation tool, but its powerful core technology provides underlying support for many AI painting tools. Want to know how to use DeepSeek to generate images indirectly? Please continue reading! Generate images with DeepSeek-based AI tools: The following steps will guide you to use these tools: Launch the AI ​​Painting Tool: Search and open a DeepSeek-based AI Painting Tool (for example, search "Simple AI"). Select the drawing mode: select "AI Drawing" or similar function, and select the image type according to your needs, such as "Anime Avatar", "Landscape"

gateio Chinese official website gate.io trading platform website gateio Chinese official website gate.io trading platform website Feb 21, 2025 pm 03:06 PM

Gate.io, a leading cryptocurrency trading platform founded in 2013, provides Chinese users with a complete official Chinese website. The website provides a wide range of services, including spot trading, futures trading and lending, and provides special features such as Chinese interface, rich resources and community support.

List of handling fees for okx trading platform List of handling fees for okx trading platform Feb 15, 2025 pm 03:09 PM

The OKX trading platform offers a variety of rates, including transaction fees, withdrawal fees and financing fees. For spot transactions, transaction fees vary according to transaction volume and VIP level, and adopt the "market maker model", that is, the market charges a lower handling fee for each transaction. In addition, OKX also offers a variety of futures contracts, including currency standard contracts, USDT contracts and delivery contracts, and the fee structure of each contract is also different.

gateio exchange app old version gateio exchange app old version download channel gateio exchange app old version gateio exchange app old version download channel Mar 04, 2025 pm 11:36 PM

Gateio Exchange app download channels for old versions, covering official, third-party application markets, forum communities and other channels. It also provides download precautions to help you easily obtain old versions and solve the problems of discomfort in using new versions or device compatibility.

Ouyi Exchange app domestic download tutorial Ouyi Exchange app domestic download tutorial Mar 21, 2025 pm 05:42 PM

This article provides a detailed guide to safe download of Ouyi OKX App in China. Due to restrictions on domestic app stores, users are advised to download the App through the official website of Ouyi OKX, or use the QR code provided by the official website to scan and download. During the download process, be sure to verify the official website address, check the application permissions, perform a security scan after installation, and enable two-factor verification. During use, please abide by local laws and regulations, use a safe network environment, protect account security, be vigilant against fraud, and invest rationally. This article is for reference only and does not constitute investment advice. Digital asset transactions are at your own risk.

Sesame Open Door Login Registration Entrance gate.io Exchange Registration Official Website Entrance Sesame Open Door Login Registration Entrance gate.io Exchange Registration Official Website Entrance Mar 04, 2025 pm 04:51 PM

Gate.io (Sesame Open Door) is the world's leading cryptocurrency trading platform. This article provides a complete tutorial on spot trading of Gate.io. The tutorial covers steps such as account registration and login, KYC certification, fiat currency and digital currency recharge, trading pair selection, limit/market transaction orders, and orders and transaction records viewing, helping you quickly get started on the Gate.io platform for cryptocurrency trading. Whether a beginner or a veteran, you can benefit from this tutorial and easily master the Gate.io trading skills.

How to copy Xiaohongshu copywriting. Graphical tutorial on how to copy Xiaohongshu copywriting. How to copy Xiaohongshu copywriting. Graphical tutorial on how to copy Xiaohongshu copywriting. Jan 16, 2025 pm 04:03 PM

Learn to easily copy Xiaohongshu copywriting! This tutorial teaches you step by step how to quickly copy Xiaohongshu video copy, saying goodbye to tedious steps. Open the Xiaohongshu APP, find the video you like, and click on the [Copywriting] area below the video. Long press the copy text and select the [Extract Text] function from the pop-up options. The system will automatically extract the text, click the [Copy] button in the lower left corner. Open WeChat or other applications, such as Moments, long press the input box, and select [Paste]. Click Send to complete the copy. It's that simple!

The difference between H5 and mini-programs and APPs The difference between H5 and mini-programs and APPs Apr 06, 2025 am 10:42 AM

H5. The main difference between mini programs and APP is: technical architecture: H5 is based on web technology, and mini programs and APP are independent applications. Experience and functions: H5 is light and easy to use, with limited functions; mini programs are lightweight and have good interactiveness; APPs are powerful and have smooth experience. Compatibility: H5 is cross-platform compatible, applets and APPs are restricted by the platform. Development cost: H5 has low development cost, medium mini programs, and highest APP. Applicable scenarios: H5 is suitable for information display, applets are suitable for lightweight applications, and APPs are suitable for complex functions.

See all articles