app微信引导页

于 2023-06-09 14:19:35 发布
阅读量151 收藏
点赞数
文章标签： 微信 html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53613764/article/details/131126581
版权

功能：用微信扫描二维码时，会提示跳转到浏览器中

制作过程：写一个html页面，放到服务器上生成网址，在生成二维码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>打开浏览器</title>

    <style>

    </style>

</head>

<body>

    <div id="container" style="display: none;">

    <div style='position:relative;padding-top:100px;color:#333;font-size: 22px;text-align: center;'>

        <i style='position: absolute;top: 10px;right: 10px;font-size: 100px' class='iconfont icon-jiantou'></i>

        <p style="font-weight: 600;">请点击屏幕右上角 [ ··· ] </p>

        <p>在浏览器打开</p>

    </div>

    </div>

    <script>

        var browser = {

            versions: function () {

                var u = navigator.userAgent, app = navigator.appVersion;

                        return {//移动终端浏览器版本信息

                            trident: u.indexOf('Trident') > -1, //IE内核

                            presto: u.indexOf('Presto') > -1, //opera内核

                            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核

                            gecko: u.indexOf('Gecko') > -1 && u.indexOf('Khtml') == -1, //火狐内核

                            mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端

                            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端

                            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器

                            iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器

                            iPad: u.indexOf('iPad') > -1, //是否iPad

                            webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部

                            wx: u.indexOf("MicroMessenger") > 0 //是否是微信

                        };

                        }(),

                        language: (navigator.browserLanguage || navigator.language).toLowerCase()

                    }, con = document.getElementById("container");

                    if (browser.versions.wx) {

                        con.style.cssText = "display:block";

                        window.location.href= 'https://api.huanuowei.cn/data/upload/app/11.apk';

                    } else if (browser.versions.android) {

                        // 此处写Andoird 的下载地址

                        window.location = "https://api.huanuowei.cn/data/upload/app/11.apk";

                    } else if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {

                        alert("iOS暂不支持下载哦~");

                        //TODO 此处写ios的下载地址

                        window.location = "";

                    } else {

                        window.location = "https://api.huanuowei.cn/data/upload/app/11.apk";

                    }

               

    </script>

</body>

</html>

Sean.萝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信引导页
08-21
这是个仿照微信引导页的代码 ，大家可以下来看看
微信公众号分享的引导页(附素材)
weixin_34354945的博客
10-29 1527
  参考 : https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1421141115 不过要提醒的是,这种自定义的分享,微信要即将废弃了   在微信公众号内应该是没办法唤起分享弹出框.(没深入研究过),暂时做了引导页去引导用户点击右上方按钮去分享 分享会用到:  微信JS-SDK  (需要验签)   第一步,程序后台...
微信小程序 引导页
Missbelover的博客
12-22 1716
实现打开小程序有引导页面 最后一张有立即体验的按钮，如何实现 ？ <swiper > <block wx:for="{{imgs}}" wx:for-index="index" wx:key="swiperItem" wx:for-item="item" > <swiper-item class="swiper-items" > <image class="swiper-image" src="{{item}}"></image
微信小程序--自定义新用户引导页面
海到无边天作岸 山登绝顶我为峰
11-27 3936
效果展示 Demo代码 wxml <view class='page-cont' wx:if="{{isTiptrue}}"> <view class='top'> <image src='../images/jiantou.png'></image> <view class='p_one'>添加「海轰Pro」小程序 坚持每天学习</view> </view> <view class='c
微信小程序开发之开发引导页面
小马总的博客
05-16 4624
一、开发思路 做过app开发的都知道引导页面需要使用本地存储、第一次用户安装的用户点击进入首页的时候会进行一个数据的存储，那么微信小程序思路是一样的，你可以设置一个启动页每次小程序打开的时候都会去加载这个启动页面，可以在启动的时候校验存储的数据、如果存储了数据就表示不需要再次打开引导页面，直接进入首页。 二、具体实现流程 1、新建一个启动页 在app.json中新增一个启动页面保存后在pa...
微信小程序的引导页实现代码
01-19
一、引导页 下给大家康康效果图是啥样舍的呢！！ 其实就是和轮播图差不多，就是当用户滑动到最后一页的时候显示跳转页面就完事了。 二、代码分析 第一步：先找到小程序目录下面的app.json然后在“pages”配置好页面...
【微信跳转接口】微信引导用户右上角打开浏览器，访问APP下载链接
11-25
【微信跳转接口】微信引导用户右上角打开浏览器，访问APP下载链接，相关文章地址：https://blog.csdn.net/qq15577969/article/details/103236861
android应用源码仿微信用户引导页源码.zip
12-16
源码参考，欢迎下载
android应用源码仿微信用户引导页源码-IT计算机-毕业设计.zip
04-05
Android应用源码开发Demo，主要用于毕业设计学习。
小程序引导页开发
LzzMandy的博客
05-15 969
了解一下Markdown的基本语法知识。
微信小程序 # 第一次进入的引导页设计
skysys的研究小屋
05-12 2659
思路： 如果是在app.js的onLaunch: function() {}方法中判断打开哪个界面的话会闪现配置文件中的第一个界面。 所以修改方案如下： 1.配置一个空白页，默认进入。 2.在空白页的onLoad方法中判断进入哪个界面，然后调用wx.redirectTo跳转到指定界面。 具体实现： 上图是目录结构。 blank.wxml是空白 blank.js // miniprogram/pages/blank.js Page({ onLoad(){ var isNotFirstInit =
微信小程序实现首次启动引导页只显示一次
且听真言
03-13 1万+
如果是在app.js的onLaunch: function() {}方法中判断打开哪个界面的话会闪现配置文件中的第一个界面。 所以修改方案如下： 1.配置一个空白页，默认进入。 2.在空白页的onLoad方法中判断进入哪个界面，然后调用wx.redirectTo跳转到指定界面。 例： 空白页 onLoad: function (options) { app.enterMai...
一、零基础入门微信小程序开发之创建项目工程同时完成引导页开发
明哥
03-04 1260
前言 创建这个系列博客的愿意是因为最近在加深微信小程序的学习,按照我之前的学习习惯是不喜欢记录一个系列的博客教程的,加上自己有拖延症就更不太愿意做这个事情了,同时我要给学生上课,但总是缺少教材所以就开了这个系列的博客,这里也想挑战一下自己,希望自己能坚持下来,不要断尾,重点我们还是要先介绍一下这个系列微信小程序的开发我们主要使用JavaScript语言进行主要语言开发，同时我们不涉及任何微信小程序开源组件，我们使用原生组件,教程为零基础入门。我会尽力不漏讲,如有漏讲后续在补充吧，本系列所有...
微信扫码下载app的前端界面代码
热门推荐
carson2440的专栏
07-05 3万+
下载app二维码扫码下载，当用户微信扫码下载时 微信不能直接下载应用，所以做了一个过渡界面给用户来交互响应。html的源代码如下。 <!DOCTYPE html> <!-- saved from url=(0049)http://upgrade.haogonge.com/inspection/index.html --> <html lang="en"><head><meta http-equiv="Content-Type" content="t
微信页面打开链接，引导在其他浏览器打开的引导页
qq_35091566的博客
12-26 1万+
<script> // 微信界面打开有图片罩住的效果js(这是symfony框架下的代码) var downurl= '<?= $downurl?>'; var wapurl = '<?= $wapurl?>'; function is_weixin() {
html 仿微信引导页,微信小程序的引导页实现代码
weixin_39942995的博客
06-09 535
前一段时间写了一个微信小程序的项目，其中就有引导页面这一功能模块，接下来给大家说一下这一块的怎么实现的以及一个思路吧！一、引导页下给大家康康效果图是啥样舍的呢！！其实就是和轮播图差不多，就是当用户滑动到最后一页的时候显示跳转页面就完事了。二、代码分析第一步：先找到小程序目录下面的app.json然后在“pages”配置好页面{"pages": ["pages/guidance/guidance",...
html 仿微信引导页,（一）微信小程序：实现引导页
weixin_31282885的博客
06-09 541
基本目录结构index目录下文件操作步骤1.针对index.wxmlhello,iwen开启小程序之旅View Code代码解析：定义容器，容器中包含图片(img)、文字(text)、按钮(通过view+text实现)2.其次对于index.wxss 进行html页面渲染/**index.wxss**/.index-container{display: flex;flex-direction: ...
仿微信引导页面HTML源码
爱酷码的博客
05-05 1038
源码介绍： 一款漂亮的仿微信引导页HTML源码 以文本形式打开 index.html 可直接编辑内容
微信小程序 新手引导页
最新发布
12-11
以下是微信小程序新手引导页的实现方法： 1.在小程序的app.js文件中添加以下代码，用于判断是否需要显示新手引导页： ```javascript App({ onLaunch: function () { // 判断是否需要显示新手引导页 var needGuide = wx.getStorageSync("needGuide"); if (!needGuide) { wx.setStorageSync("needGuide", true); } } }) ``` 2.在小程序的index.wxml文件中添加以下代码，用于显示新手引导页： ```html <!-- 新手引导页 --> <view wx:if="{{needGuide}}" class="guide"> <image src="/images/guide.png" class="guide-img" /> <button class="guide-btn" bindtap="hideGuide">立即体验</button> </view> ``` 3.在小程序的index.js文件中添加以下代码，用于控制新手引导页的显示和隐藏： ```javascript Page({ data: { needGuide: false }, onLoad: function () { // 判断是否需要显示新手引导页 var needGuide = wx.getStorageSync("needGuide"); if (needGuide) { this.setData({ needGuide: true }); } }, hideGuide: function () { // 隐藏新手引导页 wx.setStorageSync("needGuide", false); this.setData({ needGuide: false }); } }) ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值