2. 程式人生 > >[JS]二維碼分享到微信

[JS]二維碼分享到微信

阿新 • • 發佈：2019-02-03

純JS實現微信二維碼分享，其中需要使用qrcode.js

<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="./qrcode.js" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            window.onload = function() {
                (function
 
() {
                    //獲取放置微信二維碼的DIV
                    var content = document.getElementById("qrcode");
                    //設定屬性
                    var qrcode = new QRCode(content, {
                        width: 200,
                        height: 200
                    });
                    //設定二維碼內容
 

                    var defaultContent = "http://blog.csdn.net/konaji";
                    qrcode.makeCode(defaultContent);
                })();
            }

            /**
             * 關閉微信分享視窗
             */
            function hideWeiXin() {
                var weixinDiv = document.getElementById("weixinDiv"
 
);
                weixinDiv.style.display = "none";
            }

        </script>
        <style type="text/css">
            #weixinDiv{
                background-color:#FFF;
                border: 1px solid ;
                width:300px;
                height:300px;
                /*下面是頁面固定居中*/
                position:fixed;
                *position:absolute; 
                top:50%; 
                left:40%; 
                margin:-50px 0 0 -50px;
            }
            #hideWeiXinDiv{
                text-align: right;
                float: right;
                padding-right: 10px;
                padding-top: 2px;
            }
            #qrcode{
                width:200px;
                height:200px;
                margin: 0px auto;
            }
        </style>
    </head>
    <body>
        <div id="weixinDiv">
            <div>
                <h3 style="float: left;">分享到微信朋友圈</h3>
                <a id="hideWeiXinDiv" onclick="hideWeiXin()">關閉</a>
            </div>
            <div id="qrcode">
                <img alt="" style="">
            </div>
        </div>
    </body>
</html>

相關推薦

[JS]二維碼分享到微信

純JS實現微信二維碼分享，其中需要使用qrcode.js <html> <head> <meta charset="utf-8" />

使用jquery.qrcode生成二維碼實現微信分享功能

pen spa blog 插件 詳情 空間 asc inf pan 前言： 最近有個這樣的需求，在pc端的商品詳情頁增加分享功能。 微博分享、QQ好友分享、QQ空間分享這些都很常見。但是微信分享我還沒有手動寫過（以前改過）。 最終效果如下圖： 解決方案：使用jque

微信掃二維碼下載-微信遮蔽下載解決方案

需求：想讓使用者在微信掃描二維碼或者點選就能下載APP，並統計被掃描次數。 兩種實現方法： 1.一般我們用草料生成二維碼，如果沒有註冊的話只能生成一個包含下載網址的靜態碼，沒有統計功能，而且出了自己截圖儲存外，草料是不會儲存你的二維碼的。 如果註冊草料後，可以選擇生成活碼。所謂活碼，就是一個指向頁面，然

EasyWeChat、微信公眾平臺實現帶引數二維碼、微信事件處理以及微信詳細使用者資訊獲取

為了滿足使用者渠道推廣分析和使用者帳號繫結等場景的需要，公眾平臺提供了生成帶引數二維碼的介面。使用該介面可以獲得多個帶不同場景值的二維碼，使用者掃描後，公眾號可以接收到事件推送。 目前有2種類型的二維碼： 1、臨時二維碼，是有過期時間的，最長可以設定為在二維碼生成後的30天（即2592000秒）後過期，但能

如何實現一個二維碼支援微信支付和支付寶支付

直接上一個網站吧，反正現在開發都是越來越簡單了 https://www.hotapp.cn/shouqian     芝麻收款二維碼 提交一個微信支付二維碼，一個支付寶支付 二維碼，會生成一個二維碼，

二維碼手機微信掃描識別裝置

// 獲取終端的相關資訊 var Terminal = { // 辨別移動終端型別 platform : function(){ var u = navigator.userAg

解決mui-app微信二維碼分享

var Intent = null, File = null, Uri = null, main = null; var shares = null; var shareImageUrl = ''; mui.plusReady(function() {

通過微信二維碼分享自己的軟體

我們希望讓使用者通過掃描二維碼下載apk，但是微信遮蔽了這種方式，那麼需要如何做呢？經過這幾天的查閱，發下以下四種方法還是蠻不錯的，不過在進行以下操作的時候，首先要確保我們的app已經上傳到應用寶並通過了稽核。 第一種方式：修改下面url的appid，然後生成

微信小程式自定義二維碼分享圖--Canvas畫圖及注意事項

    在一二月份做專案的時候，需要做一個微信小程式的自定義的二維碼，在此記錄與分享如何用Canvas畫圖怎麼自定義一個美觀的二維碼分享圖。     先展示下效果：     展示的是一個個人中心的

vue.js 二維碼生成組件

onf 引入 post data png 單位 res 大小 tab 安裝 通過NPM安裝 npm install vue-qart --save 插件應用 將vue-qart引入你的應用 import VueQArt from ‘vue-qart

一個簡單的qrcode.js二維碼例項

業務背景：背景比較簡單就是將資料存入二維碼中並生成二維碼！  程式碼：   1. qrcode.jsp      （所需要的依賴 qrcode.min.js  自行百度下載）  在jsp中引入qrcode.min.js <script sr

基於HTML5 Canvas的純JS二維碼生成外掛--qrious

qrious是一款基於HTML5 Canvas的純JS二維碼生成外掛。通過qrious.js可以快速生成各種二維碼，你可以控制二維碼的尺寸顏色，還可以將生成的二維碼進行Base64編碼。 qrious.js二維碼外掛的可用配置引數如下： 引數 型別 預設

圖片合成，使用canvas，做一個漂亮的二維碼分享

timg.jpgmycode.jpg<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <st

小程式生成二維碼分享朋友圈的功能

一、如何生成小程式分享頁面的二維碼？通過後臺介面可以獲取小程式任意頁面的二維碼，具體可以參考https://developers.weixin.qq.com/miniprogram/dev/api/qrcode.html可以選擇你所需要的小程式碼，給到後臺相應的引數生成即可。

js 二維碼掃描

應用在h5瀏覽器的掃一掃二維碼， 用到getUserMedia qrcode.js庫（解析二維碼的庫） _aa={};_aa._ab=function(f,e){var d=qrcode.width;var b=qrcode.height;var c=true;

QRCode.js 二維碼生成並能夠長按識別

今天天氣很好，窗外雲捲雲舒，溫度適宜，煦風。 泡一杯茶，坐下來，靜下心，思緒在我的程式碼王國裡翱翔，飛呀飛呀我的驕傲放縱。。。 。。飛累了，就停下來說說QRCode.js生成二維碼這頭事吧！ QR

js二維碼生成

一、引入js檔案 <!– 第一步：引進js檔案 –> <script type=”text/javascript” src=”js/jquery.min.js”> \ <script type=”text

【Java】生成JS二維碼

前言   小編最近在公司遇到一個新的需求，需要生成一個二維碼，我們專案經理並給出了實現的思路，主要是JSP新增一個控制元件，js裡面寫實現的方法即可，關鍵點是使用兩個js外掛。 內容 一、JSP頁面   1.新增一個按鈕 <shiro:hasPe

JS二維碼生成外掛—QRCode

一、  簡介 QRCode是一個用於生成二維碼的 JavaScript 庫。主要是通過獲取 DOM 的標籤,再通過 HTML5Canvas 繪製而成,不依賴任何庫。但是在使用過程中配合jQuery一起使用的話編碼更加簡便一些 二、  使用介紹 a)  所需檔案（jquery

js二維碼生成外掛“jquery.qrcode.min.js”

<!doctype html> <html>     <head> &nb