2. 程式人生 > 其它 >H5微信開啟後引導使用者去瀏覽器

H5微信開啟後引導使用者去瀏覽器

阿新 • • 發佈：2020-12-17

技術標籤：微信小程式小程式

效果圖

素材1+素材2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <
 
script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <title>H5引導頁</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    
    body {
        width: 100%;
        height: 100%;
        background: #FFFFFF;
    }
    
    .bg
 
 {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        background: rgba(0, 0, 0, 0.9);
        text-align: end;
        overflow: hidden;
        padding: 1rem 5px 0 1rem;
    }
    
    .bg img {
        width: 93%;
 

        height: auto;
    }
</style>

<body>
    <div class="app">
        <div class="bg"><img src="https://img.796t.com/res/2020/12-17/20/5b15117f54f5fb0ec3d92a2339d3bd4a.png" alt=""></div>
        <h2>內容</h2>
    </div>
    <script>
        window.onload = function() {
	        var fontSize = $(window).width() / 18.75; //螢幕的寬
	        $("html").css("font-size", fontSize + "px");
	        if (IsWeixinOrAlipay() == 13) {
	                $(".bg").css('display', 'block')
	            } else {
	                console.log(IsWeixinOrAlipay())
	            }
        }

        function IsWeixinOrAlipay() {
            var ua = window.navigator.userAgent.toLowerCase();
            //判斷是不是微信
            if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                return 13;
            }
            //判斷是不是支付寶
            if (ua.match(/AlipayClient/i) == 'alipayclient') {
                return 12;
            }
            //哪個都不是
            return 0;
        }
    </script>
</body>

</html>

相關推薦

H5微信開啟後引導使用者去瀏覽器

技術標籤：微信小程式小程式 效果圖 素材1+素材2 <!DOCTYPE html> <html lang="en">

H5微信網頁授權java後端SpringBoot實現

本文使用weixin4j工具包，實現SpringBoot中微信網頁授權功能，並獲取使用者資訊。

vue 純前端實現微信H5支付（微信外瀏覽器）(解決H5微信支付報錯）

僅供參考 H5支付文件https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=9_20&index=1 1.傳送請求所需要的引數

【前端】H5 + 微信小程式實現評價星級

評價星星的邏輯是先用五個未填充的星星顯示在介面上，然後當用戶點選到某一個星星，比如點選了第三個星星，則將前三個星星迴圈用有填充的星星替代，這樣便感覺是選中了三個星星一樣。

小程式訪問https顯示網路錯誤，微信開啟https空白、瀏覽器訪問正常 解決方案

部門研發的小程式，部分使用者反饋經常打不開或者開啟速度慢，用瀏覽器訪問正常。

企業微信開啟除錯

1.下載企業微信PC端 2.繫結企業微信開發者：在企業微信管理端-我的企業微信外掛-開發者工具進行勾選

h5微信二次分享

//後臺提供的介面返回必須的四個引數 signature簽名，appid，nonceStr 生成簽名的隨機串timestamp，時間戳

微信開啟網址新增在瀏覽器中開啟提示的辦法

使用微信開啟網址時，無法在微信內開啟常用下載軟體，手機APP等。網上流傳的各種微信開啟下載連結，微信一更新基本失效。大家常用的方法是，彈出一個遮罩提示使用者在新的瀏覽器視窗開啟，再也不用管微信如何的更新。

微信開啟分享連結並且檢測是否有APP，若有APP則跳轉開啟APP，沒有則跳轉下載介面

最近在做專案的時候遇到這麼一個需求，就是APP分享連結到微信上，從微信上開啟連結，若有APP則跳轉APP，若沒有則跳轉下載頁面，在網上找了很多部落格，很多內容，做了一下總結貼出來，歡迎大家一起交流分享。

H5 微信端掃描二維碼(未完成)

技術標籤：後端程式碼c# 1.引用微信的js 2.配置 wx.config({ debug: false, appId: data.appid,// appid資訊

H5微信公眾號授權的簡單實現步驟

前言 昨天因為有一個專案上面需要實現h5微信授權工作。所以花了兩個小時來完成這個功能。​

如何臨時釋出部署Cocos小遊戲到Linux伺服器，讓別人能在微信開啟

兩個星期前，我們釋出了第一個小遊戲教程： 教程：製作一個小遊戲送給喜歡的TA（不會程式設計也能學會哦）

記一次PC版微信崩潰後歷史聊天記錄丟失的處理（已解決）

先說下起因和經過，那天啟動PC版微信時提示是否切換目錄，當時沒留意，就點了否，就看到開啟後，微信歷史訊息都為空了，只有一個個最近的聯絡人，但點進去沒任何記錄，意識到可能有問題了，開啟磁碟一看，微信所在的

NO---22 H5在ios端微信瀏覽器中，input事件觸發後頁面不復位的問題

之前在做公眾號網頁時候在ios微信瀏覽器遇到一個奇怪的問題，就是input框失去焦點系統鍵盤收起後，頁面還是處於向上滾動的狀態，並沒有復位成輸入之前的狀態。你再次點選頁面時就已經錯位了，目前只發現部分ios在微信

js判斷h5頁面地址的開啟方式（微信、pc、移動端）

1 function isOpenMode(){ 2//平臺、裝置和作業系統 3var system = { 4win: false, 5mac: false,

微信iOS版7.0.17正式版更新：上線青少年模式，開啟後“搖一搖”、“附近的人”等功能將不可用

10 月 2 日訊息 據網友投稿，微信iOS版7.0.17正式版更新，上線青少年模式。此外，還可以在會話的表情面板搜尋表情。

微信掃碼下載，H5引導頁

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,use

解決 ubuntu 20.04 安裝 deepin-wine 企業微信後無法開啟驗證圖片的問題

技術標籤：deepinlinuxubuntu 當 Ubuntu 安裝 deepin-wine 的企業微信後，出現驗證圖片刷不出來的時候。

微信瀏覽器中H5使用wx-open-launch-app開啟第三方APP

1、在微信開放平臺配置關聯相關APP、微信小程式、微信公眾號； 2、在微信公眾號中設定安全域名；

uniapp h5 使用JSAPI微信支付 當前頁面的URL未註冊 重新整理頁面後支付正常

今天在做使用uview-ui vue頁面製作h5網站的時候，遇到一個bug，在當前支付頁面點選支付，就會報錯，提示當前頁面的URL未註冊。如下圖：