5網(wǎng)頁實(shí)現(xiàn)微信分享功能

• 一，首先在公眾號管理后臺“公眾號設(shè)置”的“功能設(shè)置”里填寫JS接口安全域名，域名需要通過ICP備案，沒有備案域名可以用SAE、BAE等平臺。此外，自定義分享功能需要通過微信認(rèn)證才能使用，沒有認(rèn)證的可以跟關(guān)系好的朋友借用權(quán)限，在他的JS接口安全域名設(shè)置這里填上你的域名和共享同一個(gè)開發(fā)者ID。
• 二，在需要調(diào)用JS接口的頁面引入微信JSSDK的JS文件 。這個(gè)文件在需要分享的頁面是必須要引用的，單獨(dú)特別重申一下，其他方面請閱讀官方文檔。

<script type="text/javascript"
    src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
    /*
     * 注意：
     * 1. 所有的JS接口只能在公眾號綁定的域名下調(diào)用，公眾號開發(fā)者需要先登錄微信公眾平臺進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。
     * 2. 如果發(fā)現(xiàn)在 Android 不能分享自定義內(nèi)容，請到官網(wǎng)下載最新的包覆蓋安裝，Android 自定義分享接口需升級至 6.0.2.58 版本及以上。
     * 3. 常見問題及完整 JS-SDK 文檔地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
     *
     * 開發(fā)中遇到問題詳見文檔“附錄5-常見錯(cuò)誤及解決辦法”解決，如仍未能解決可通過以下渠道反饋：
     * 郵箱地址：weixin-open@qq.com
     * 郵件主題：【微信JS-SDK反饋】具體問題
     * 郵件內(nèi)容說明：用簡明的語言描述問題所在，并交代清楚遇到該問題的場景，可附上截屏圖片，微信團(tuán)隊(duì)會(huì)盡快處理你的反饋。
     */
    $(function() {
        var url = location.href.split('#')[0];
        //alert(url);

        $.ajax({
            url : "wap_sign_signature.htm",
            data : {
                "url" : url
            },
            dataType : "json",
            timeout : 5000,
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                if (textStatus == "timeout") { // 請求超時(shí)
                } else {
                }
            },
            success : function(data, textStatus) {

                if (textStatus == "success") { // 請求成功
                    //alert(data.nonceStr);
                    //alert(data.timestamp);
                    //alert(data.signature);  
                    wx.config({
                        debug : false,
                        appId : 'wxc4cf8e62667f92ea',
                        timestamp : data.timestamp,
                        nonceStr : data.nonceStr,
                        signature : data.signature,
                        jsApiList : [ 'onMenuShareAppMessage',
                                'onMenuShareTimeline' ]
                    });
                }
            }
        });
    });
</script>

<script type="text/javascript">
    /*
     * 注意：
     * 1. 所有的JS接口只能在公眾號綁定的域名下調(diào)用，公眾號開發(fā)者需要先登錄微信公眾平臺進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。
     * 2. 如果發(fā)現(xiàn)在 Android 不能分享自定義內(nèi)容，請到官網(wǎng)下載最新的包覆蓋安裝，Android 自定義分享接口需升級至 6.0.2.58 版本及以上。
     * 3. 完整 JS-SDK 文檔地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
     *
     * 如有問題請通過以下渠道反饋：
     * 郵箱地址：weixin-open@qq.com
     * 郵件主題：【微信JS-SDK反饋】具體問題
     * 郵件內(nèi)容說明：用簡明的語言描述問題所在，并交代清楚遇到該問題的場景，可附上截屏圖片，微信團(tuán)隊(duì)會(huì)盡快處理你的反饋。
     */
    // 發(fā)送給朋友并返回結(jié)果
    /* wx.checkJsApi({
        jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'], 
        success: function(res) {
            alert(reg);
        }})
            // 以鍵值對的形式返回，可用的api值true，不可用為false// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}});
        }) */

    wx.ready(function() {

        /*  wx.checkJsApi({
            jsApiList: ['onMenuShareAppMessage'],
            success:function(res){
                alert(res.checkResult.chooseImage);
            }
        }) ; */
        var title = "魔法媽咪學(xué)院入學(xué)啦！好媽咪快進(jìn)來！";
        var myurl = "http://diy-haier.highset.cn/index.jsp";
        //分享給朋友
        wx.onMenuShareAppMessage({
            title : title, // 分享標(biāo)題
            desc : '海爾定制母嬰家電，讓你魔法加身，搞定養(yǎng)娃的大問題！', // 分享描述
            link : myurl, // 分享鏈接
            imgUrl : 'http://diy-haier.highset.cn/fx.jpg', // 分享圖標(biāo)
            type : 'link', // 分享類型,music、video或link，不填默認(rèn)為link
            success : function() {
                // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
            },
            cancel : function() {
                // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
            }
        });

        wx.onMenuShareTimeline({
            title : title, // 分享標(biāo)題
            link : myurl, // 分享鏈接
            imgUrl : 'http://diy-haier.highset.cn/fx.jpg', // 分享圖標(biāo)
            success : function() {
                // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
            },
            cancel : function() {
                // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
            }
        });

    });

    wx.error(function(res) {
        alert(res.errMsg);
    });
</script>

• 三、需要一個(gè)提供appid的token認(rèn)證的服務(wù)，

ello大家好，今天廣州藍(lán)景跟大家分享一些html的使用技巧。

1. 使用capture屬性打開設(shè)備攝像頭

正如input標(biāo)簽具有email、text和password屬性一樣，我們也可以通過一些屬性打開移動(dòng)設(shè)備的攝像頭以捕獲圖像。

那就是capture屬性，屬性值有兩個(gè)：

• user用于前置攝像頭
• environment用于后置攝像頭

<input type="file" capture="user" accept="image/*">

2. 網(wǎng)站自動(dòng)刷新

你可以在head標(biāo)簽中將網(wǎng)站設(shè)置為定時(shí)刷新！

<head>
    <meta http-equiv="refresh" content="10">
</head>

此代碼段可以實(shí)現(xiàn)每10秒刷新一次網(wǎng)站。

3. 激活拼寫檢查

你可以使用HTML的spellcheck屬性并將其設(shè)置為true以激活拼寫檢查。使用lang屬性指定待檢查的語言。

<input type="text" spellcheck="true" lang="en">

這是一個(gè)標(biāo)準(zhǔn)屬性，得到了大多數(shù)瀏覽器的支持。

4. 指定要上傳的文件類型

你可以使用accept屬性在input標(biāo)簽中指定允許用戶上傳的文件類型。

<input type="file" accept=".jpeg,.png">

5. 阻止瀏覽器翻譯

將translate屬性設(shè)置為no會(huì)阻止瀏覽器翻譯該內(nèi)容。如果你不想翻譯某個(gè)短語或單詞，例如logo、公司或品牌名稱，那就可以應(yīng)用這個(gè)屬性。

<p translate="no">Brand name</p>

6. 在input標(biāo)簽中輸入多個(gè)項(xiàng)目

這可以通過multiple屬性來完成。

<input type="file" multiple>

適用于文件和電子郵件。如果是電子郵件，則可以用逗號分隔。

7. 為視頻創(chuàng)建海報(bào)（縮略圖）

使用poster屬性，我們可以在視頻加載時(shí)，或者在用戶點(diǎn)擊播放按鈕之前，顯示指定的縮略圖。

如果不指定圖片，則默認(rèn)使用視頻的第一幀作為縮略圖。

<video poster="picture.png"></video>

8. 點(diǎn)擊鏈接自動(dòng)下載

如果你希望在單擊目標(biāo)資源的鏈接時(shí)下載特定資源，那就添加download屬性。

<a href="image.png" download>

今天就分享到這里，想要了解更多前端技術(shù)知識，可以關(guān)注我們廣州藍(lán)景。