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>

今天就分享到这里，想要了解更多前端技术知识，可以关注我们广州蓝景。