H5 how to customize the page to share links in the micro-letter (Introduction + + can set the title picture)

What link is a custom to share?

Custom micro-channel sharing link refers to a link to this page via a card interface generation micro-letters, and the title of the card's content and images can be edited himself. FIG following effects

 

● Custom pages link example (with a title, Introduction, thumbnail)

● No custom Web links

 

 

As shown above, if not related processing, secondary share pages, the user sees or is the link, or is no content description + empty graph, copywriting shown above is actually the title tag acquired copywriter, I was online relevant examples investigation has indicated, if the picture is not set, will automatically get the browser to render the first picture, after a personal test, and did not realize (circle of friends the same token, do not do Photo Gallery).

 

solution

To reach the figure custom copy of the icon of the effect, we must adopt JS-SDK provides micro-channel, micro-channel JS-SDK is a micro-channel public platform for Web developers to provide web-based development within the micro-channel kits. Reference may be micro-channel JS-SDK documentation. (Public No. If you do not understand technology or without authentication, using wecard tools can also be related to the effect of implementation.)

Specific steps are as follows:

1, to prepare a record of the domain name space and bind to the domain name space to

2, log micro letter public platform, into the "number of public settings" feature set which fill js port security domain, this is to fill your browser to open a micro letter domain address, you can not add an IP address.

3, the introduction js file, you need to call the page js JS file access interface.

http://res.wx.qq.com/open/js/jweixin-1.2.0.js

4, through the config interface injection permission and verify the configuration (this step is considered the most critical step of the whole step, we must correct configuration information can be called JS-SDK.

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名,见附录1
    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

Guess you like

Origin www.cnblogs.com/lldbk12/p/11455596.html