Introduction to WeixinJSBridge, private weixinjsbridge
Webpage entry. There are three dots in the upper right corner. That's right. We use it! You only need to customize the buttons in the small list to share your content as you like.
Note: (WeixinJSBridge is valid only for webpages that can be opened inside)
Button 1 ------ send to friend
Copy codeThe Code is as follows:
Function sendMessage (){
WeixinJSBridge. on ('menu: share: appmessage', function (argv) {alert ("send to friend ");});
}
In this way, if you call the sendMessage function somewhere, you can change the response of the send friend button. Then, click it, and the "send to friend string" dialog box will pop up. Isn't it easy.
Sharing Functions
Copy codeThe Code is as follows:
WeixinJSBridge. invoke ('sendappmessage ',{
"Appid": "", // set appid to null.
"Img_url": imgUrl, // path of the image to be shared
"Img_width": "120", // Image Width
"Img_height": "120", // Image Height
"Link": url, // link to share
"Desc": "I am an introduction", // share content
"Title": "title. It's easy. "
}, Function (res) {/*** callback function, preferably set to null ***/});
Note: If you call this private function separately, it is reasonable,! If you open the page for the first time and call it directly, you must manually click the share to friend button in the upper right corner. After an address book pops up, it will be directly used, there is no problem. It seems that the same thing is initialized internally. Therefore, we recommend that you embed it directly into the binding method above.
As follows:
Copy codeThe Code is as follows:
Function sendMessage (){
WeixinJSBridge. on ('menu: share: appmessage', function (argv ){
WeixinJSBridge. invoke ('sendappmessage ',{
"Appid": "", // set appid to null.
"Img_url": imgUrl, // path of the image to be shared
"Img_width": "120", // Image Width
"Img_height": "120", // Image Height
"Link": url, // link to share
"Desc": "I am an introduction", // share content
"Title": "title. It's easy. "
}, Function (res) {/*** callback function, preferably set to null ***/
});
});
}
In this way, you can click the send to friend button to bring up the address book and select a single friend for sharing.
Similarly, sharing to a circle of friends also calls the invoke private function, but the button binding name is different.
Copy codeThe Code is as follows:
Function sendMessage (){
...... // The Code sent to a friend is omitted here
WeixinJSBridge. on ('menu: share: timeline ', function (argv ){
WeixinJSBridge. invoke ('effectimeline ',{
"Appid": "", // set appid to null.
"Img_url": imgUrl, // path of the image to be shared
"Img_width": "120", // Image Width
"Img_height": "120", // Image Height
"Link": url, // link to share
"Desc": "I am an introduction", // share content
"Title": "title. It's easy. "
}, Function (res) {/*** callback function, preferably set to null ***/});
});
});
}
Note: on is bound with "menu: share: timeline" instead of "menu: share: appmessage ". The same is true for invoke.
I have not tried another Weibo sharing. I don't know if it is useless. I want to try it. All sharing is to call the current account to share it.
Copy codeThe Code is as follows:
WeixinJSBridge. on ('menu: share: Weaver ', function (argv ){
WeixinJSBridge. invoke ('invalid weio ',{
"Content": dataForWeixin. title + ''+ dataForWeixin. url,
"Url": dataForWeixin. url
}, Function (res ){});
});
If the browser has not been initialized, all interfaces will be undefined. In order to avoid calling errors immediately, get the initialization completion RESPONSE event, and call sendMessage after Initialization is complete for binding.
As follows:
Copy codeThe Code is as follows:
If (document. addEventListener ){
Document. addEventListener ('weixinjsbridgeready', sendMessage, false);} else if (document. attachEvent ){
Document. attachEvent ('weixinjsbridgeready', sendMessage); document. attachEvent ('onweixinjsbridgeready', sendMessage );}
The following are some other functions:
Copy codeThe Code is as follows:
WeixinJSBridge. call ('hidetoolbar'); // hide the toolbar in the lower right corner.
WeixinJSBridge. call ('showtoolbar'); // display the toolbar in the lower right corner.
WeixinJSBridge. call ('hideoptionmenu '); // hide the three dots in the upper-right corner.
WeixinJSBridge. call ('showoptionmenu '); // three dots in the upper right corner are displayed.
I am a cainiao. I have finished writing and it is not easy to write. Please include it more!
Complete Test code (open ):
Copy codeThe Code is as follows:
<! DocType html>
<Html>
<Head>
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = no "/>
<Title> Interface Test </title>
<Script>
Function sendMessage (){
WeixinJSBridge. on ('menu: share: appmessage', function (argv ){
WeixinJSBridge. invoke ('sendappmessage ',{
"Appid": "", // set appid to null.
"Img_url": "", // path of the image to be shared
"Img_width": "120", // Image Width
"Img_height": "120", // Image Height
"Link": "http://www.bkjia.com", // share link
"Desc": "geek tag-http://www.bkjia.com", // share content
"Title": "discovering geeks tags-creating the best geeks Knowledge Sharing Platform"
}, Function (res) {/*** callback function, preferably set to null ***/
});
});
WeixinJSBridge. on ('menu: share: timeline ', function (argv ){
WeixinJSBridge. invoke ('effectimeline ',{
"Appid": "", // set appid to null.
"Img_url": "", // path of the image to be shared
"Img_width": "120", // Image Width
"Img_height": "120", // Image Height
"Link": "http://www.bkjia.com", // share link
"Desc": "geek tag-http://www.bkjia.com", // share content
"Title": "discovering geeks tags-creating the best geeks Knowledge Sharing Platform"
}, Function (res) {/*** callback function, preferably set to null ***/
});
});
Alert ("Call successful! Now you can click the button in the upper right corner to share it with friends or friends! ");
}
Function hideMenu (){
WeixinJSBridge. call ('hideoptionmenu ');
}
Function showMenu (){
WeixinJSBridge. call ('showoptionmenu ');
}
Function hideTool (){
WeixinJSBridge. call ('hidetoolbar ');
}
Function showTool (){
WeixinJSBridge. call ('showtoolbar ');
}
If (document. addEventListener ){
Document. addEventListener ('weixinjsbridgeready', sendMessage, false );
} Else if (document. attachEvent ){
Document. attachEvent ('weixinjsbridgeready', sendMessage );
Document. attachEvent ('onweixinjsbridgeready', sendMessage );
}
// Determine whether the webpage is called in
Var ua = navigator. userAgent. toLowerCase ();
If (ua. match (/MicroMessenger/I) = "micromessenger "){
} Else {
Alert ("the call failed. Scan the following QR code to open the webpage! ");
}
</Script>
</Head>
<Body>
<Center>
<H2> click <Button onclick = "hideMenu ()" style = "width: 100px; height: 100px; font-size: 16px; "> hide the three dots in the upper-right corner </button> <br/>
<Button onclick = "showMenu ()" style = "width: 100px; height: 100px; font-size: 16px; "> three dots in the upper-right corner are displayed </button> <br/>
<Button onclick = "hideTool ()" style = "width: 100px; height: 100px; font-size: 16px; "> hide the following guide </button> <br/>
<Button onclick = "showTool ()" style = "width: 100px; height: 100px; font-size: 16px; "> display the following guide </button> <br/>
</Center>
</Body>
</Html>