H5網頁實現微信分享功能「轉」

5網頁實現微信分享功能

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


<script type="text/javascript"
    src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
    /*
     * 注意：
     * 1. 所有的JS接口只能在公眾號綁定的域名下調用，公眾號開發者需要先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。
     * 2. 如果發現在 Android 不能分享自定義內容，請到官網下載最新的包覆蓋安裝，Android 自定義分享接口需升級至 6.0.2.58 版本及以上。
     * 3. 常見問題及完整 JS-SDK 文檔地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
     *
     * 開發中遇到問題詳見文檔“附錄5-常見錯誤及解決辦法”解決，如仍未能解決可通過以下渠道反饋：
     * 郵箱地址：weixin-open@qq.com
     * 郵件主題：【微信JS-SDK反饋】具體問題
     * 郵件內容說明：用簡明的語言描述問題所在，并交代清楚遇到該問題的場景，可附上截屏圖片，微信團隊會盡快處理你的反饋。
     */
    $(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") { // 請求超時
                } 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接口只能在公眾號綁定的域名下調用，公眾號開發者需要先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。
     * 2. 如果發現在 Android 不能分享自定義內容，請到官網下載最新的包覆蓋安裝，Android 自定義分享接口需升級至 6.0.2.58 版本及以上。
     * 3. 完整 JS-SDK 文檔地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
     *
     * 如有問題請通過以下渠道反饋：
     * 郵箱地址：weixin-open@qq.com
     * 郵件主題：【微信JS-SDK反饋】具體問題
     * 郵件內容說明：用簡明的語言描述問題所在，并交代清楚遇到該問題的場景，可附上截屏圖片，微信團隊會盡快處理你的反饋。
     */
    // 發送給朋友并返回結果
    /* 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 = "魔法媽咪學院入學啦！好媽咪快進來！";
        var myurl = "http://diy-haier.highset.cn/index.jsp";
        //分享給朋友
        wx.onMenuShareAppMessage({
            title : title, // 分享標題
            desc : '海爾定制母嬰家電，讓你魔法加身，搞定養娃的大問題！', // 分享描述
            link : myurl, // 分享鏈接
            imgUrl : 'http://diy-haier.highset.cn/fx.jpg', // 分享圖標
            type : 'link', // 分享類型,music、video或link，不填默認為link
            success : function() {
                // 用戶確認分享后執行的回調函數
            },
            cancel : function() {
                // 用戶取消分享后執行的回調函數
            }
        });

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

    });

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

三、需要一個提供appid的token認證的服務，

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

1. 使用capture屬性打開設備攝像頭

正如input標簽具有email、text和password屬性一樣，我們也可以通過一些屬性打開移動設備的攝像頭以捕獲圖像。

那就是capture屬性，屬性值有兩個：

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

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

2. 網站自動刷新

你可以在head標簽中將網站設置為定時刷新！

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

此代碼段可以實現每10秒刷新一次網站。

3. 激活拼寫檢查

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

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

這是一個標準屬性，得到了大多數瀏覽器的支持。

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

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

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

5. 阻止瀏覽器翻譯

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

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

6. 在input標簽中輸入多個項目

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

<input type="file" multiple>

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

7. 為視頻創建海報（縮略圖）

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

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

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

8. 點擊鏈接自動下載

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

<a href="image.png" download>

今天就分享到這里，想要了解更多前端技術知識，可以關注我們廣州藍景。

動

視覺格式化模型，大體上將頁面中盒子的排列分為三種方式：

1. 常規流

2. 浮動

3. 定位

## 應用場景

1. 文字環繞

字體環繞

2. 橫向排列

## 浮動的基本特點

修改float屬性值為：

- left：左浮動，元素靠上靠左

- right：右浮動，元素靠上靠右

默認值為none

1. 當一個元素浮動后，元素必定為塊盒(更改display屬性為block)

2. 浮動元素的包含塊，和常規流一樣，為父元素的內容盒

## 盒子尺寸

1. 寬度為auto時，適應內容寬度

2. 高度為auto時，與常規流一致，適應內容的高度

3. margin為auto，為0.

4. 邊框、內邊距、百分比設置與常規流一樣

## 盒子排列

1. 左浮動的盒子靠上靠左排列

2. 右浮動的盒子考上靠右排列

3. 浮動盒子在包含塊中排列時，會避開常規流塊盒

4. 常規流塊盒在排列時，無視浮動盒子

5. 行盒在排列時，會避開浮動盒子

6. 外邊距合并不會發生

> 如果文字沒有在行盒中，瀏覽器會自動生成一個行盒包裹文字，該行盒叫做匿名行盒。

## 高度坍塌

高度坍塌的根源：常規流盒子的自動高度，在計算時，不會考慮浮動盒子

清除浮動，涉及css屬性：clear

- 默認值：none

- left：清除左浮動，該元素必須出現在前面所有左浮動盒子的下方

- right：清除右浮動，該元素必須出現在前面所有右浮動盒子的下方

- both：清除左右浮動，該元素必須出現在前面所有浮動盒子的下方

在線咨詢

上一篇：html select 元素下拉點擊事件
下一篇：一篇文章帶你了解HTML的網頁布局結構

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商