Micro-trust built-in browser private interface Weixinjsbridge Introduction _javascript Tips

Source: Internet
Author: User

Micro-letter Web Access, the upper right corner has three small dots, yes, we use it! We can share our own content as we wish by customizing the buttons under the Dot list.

Note: (Weixinjsbridge can only be valid on pages opened in micro-letters)

Button one------send to friends

Copy Code code as follows:

Function SendMessage () {

Weixinjsbridge.on (' Menu:share:appmessage ', function (argv) {alert ("Send to Friend");

}

In this way, as long as the SendMessage function can be called somewhere to change the response to send a friend button, and then click, will pop up "sent to friend string", is not very simple.

Share function

Copy Code code as follows:

Weixinjsbridge.invoke (' Sendappmessage ', {
"AppID": "",//appid set empty on the good.
"Img_url": imgurl,//share with the picture path
"Img_width": "120",//Picture width
"Img_height": "120",//Picture height
"link": URL,//share with link address
"desc": "I am An Introduction",//share content Introduction
"title": "The headline, again simple." "
}, function (res) {/*** callback function, preferably set to empty ***/});

Note that if the private function of this micro-trust is taken out of the call alone, it makes sense, but! The first time you open the page directly call it, anyway, there is no reflection, you must manually, click on the top right corner to share to the friend button, to be popped up once the address book, back to the direct use, there is no problem, it seems that the internal initialization of what things. Therefore, it is recommended to embed directly in the above binding method.

As follows:

Copy Code code as follows:

Function SendMessage () {
Weixinjsbridge.on (' Menu:share:appmessage ', function (argv) {

Weixinjsbridge.invoke (' Sendappmessage ', {

"AppID": "",//appid set empty on the good.
"Img_url": imgurl,//share with the picture path
"Img_width": "120",//Picture width
"Img_height": "120",//Picture height
"link": URL,//share with link address
"desc": "I am An Introduction",//share content Introduction
"title": "The headline, again simple." "
}, function (res) {/*** callback function, preferably set to empty ***/

});

});
}


In this way, you click to send to the Buddy button, you can directly pop-up directory to choose ' Single ' friends to share.

Similarly, sharing the circle of friends is called invoke private function, but the button binding name is different.

Copy Code code as follows:

Function SendMessage () {



...//omit send to Buddy code here



Weixinjsbridge.on (' Menu:share:timeline ', function (argv) {

Weixinjsbridge.invoke (' Sharetimeline ', {

"AppID": "",//appid set empty on the good.
"Img_url": imgurl,//share with the picture path
"Img_width": "120",//Picture width
"Img_height": "120",//Picture height
"link": URL,//share with link address
"desc": "I am An Introduction",//share content Introduction
"title": "The headline, again simple." "
}, function (res) {/*** callback function, preferably set to empty ***/});

});

});

}

Note that on the binding "Menu:share:timeline" is not "menu:share:appmessage". Invoke inside too.

Also a microblogging share, I did not try, do not know if there is no use, want to play the try, all share is to call the current micro-trust account share.

Copy Code code as follows:

Weixinjsbridge.on (' Menu:share:weibo ', function (argv) {
Weixinjsbridge.invoke (' Shareweibo ', {
"Content":d ataforweixin.title+ ' +dataforweixin.url,
"url":d ataforweixin.url
}, function (res) {});
});


If the micro-trust browser has not been initialized internally, all interfaces will be undefined. In order to avoid going in immediately call error, get micro-letter initialization completes response event, initialization completes call SendMessage to bind.

As follows:

Copy Code code as follows:

if (Document.addeventlistener) {
Document.addeventlistener (' Weixinjsbridgeready ', SendMessage, false); }else if (document.attachevent) {
Document.attachevent (' Weixinjsbridgeready ', SendMessage);  Document.attachevent (' Onweixinjsbridgeready ', SendMessage); }

Here are a few other small features:

Copy Code code as follows:

Weixinjsbridge.call (' Hidetoolbar '); Hide the bottom right tool bar

Weixinjsbridge.call (' ShowToolbar '); Show the bottom right tool bar

Weixinjsbridge.call (' Hideoptionmenu '); Hide the top-right corner three dots button.

Weixinjsbridge.call (' Showoptionmenu '); Displays a three-point button in the upper-right corner.


I am a rookie, finished writing, writing is not good, please include a lot!


Complete test code (open with micro-letter):

Copy Code code as follows:

<!doctype html>

<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> micro-communication interface test </title>

<script>
Function SendMessage () {
Weixinjsbridge.on (' Menu:share:appmessage ', function (argv) {
Weixinjsbridge.invoke (' Sendappmessage ', {

"AppID": "",//appid set empty on the good.
"Img_url": "",//share with the picture path
"Img_width": "120",//Picture width
"Img_height": "120",//Picture height
"Link": "Http://www.jb51.net",//share with link address
"desc": "Geek Label--http://www.jb51.net",//share content Introduction
"title": "Find the Geek tag-do the best geek knowledge sharing platform"
}, function (res) {/*** callback function, preferably set to empty ***/

});
});

Weixinjsbridge.on (' Menu:share:timeline ', function (argv) {

Weixinjsbridge.invoke (' Sharetimeline ', {

"AppID": "",//appid set empty on the good.
"Img_url": "",//share with the picture path
"Img_width": "120",//Picture width
"Img_height": "120",//Picture height
"Link": "Http://www.jb51.net",//share with link address
"desc": "Geek Label--http://www.jb51.net",//share content Introduction
"title": "Find the Geek tag-do the best geek knowledge sharing platform"
}, function (res) {/*** callback function, preferably set to empty ***/
});

});


Alert ("Call succeeded!") Now you can share it with your friends or friends by the upper right corner button! ");

}

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);
}

To determine if a Web page is invoked in a micro-letter
var ua = Navigator.userAgent.toLowerCase ();
if (Ua.match (/micromessenger/i) = = "Micromessenger") {
} else {
Alert ("Call failed, please sweep with a micro-letter, scan the following two-dimensional code to open the Web page!") ");
}

</script>

<body>
<center>
<button onclick= "Hidemenu ()" style= "WIDTH:100PX;HEIGHT:100PX;FONT-SIZE:16PX;" > Hide top right corner three dots </button> <br/><br/>
<button onclick= "ShowMenu ()" style= "WIDTH:100PX;HEIGHT:100PX;FONT-SIZE:16PX;" > show three dots in top right corner </button> <br/><br/>
<button onclick= "Hidetool ()" style= "WIDTH:100PX;HEIGHT:100PX;FONT-SIZE:16PX;" > Hide the following guide strips </button> <br/><br/>
<button onclick= "Showtool ()" style= "WIDTH:100PX;HEIGHT:100PX;FONT-SIZE:16PX;" > show the following guide bar </button> <br/><br/>
</center>
</body>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.