<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

    <!--解决iphone横屏默认放大字体-->

    <meta name="viewport"

          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <title>互联网家装扮小程序预览页</title>

    <style>

        * {

            margin: 0;

            padding: 0

        }

        html {

            /*不想让iPhone横坚屏切换的时候调节文字*/

            -ms-text-size-adjust: 100%;

            -webkit-text-size-adjust: 100%;

            line-height: 1.6;

        }

        body {

            /*触摸禁止显示默认菜单*/

            -webkit-touch-callout: none;

            font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

            letter-spacing: .034em;

            background: #fff;

        }

        .content_inner {

            /*允许常单词换行到下一行*/

            word-break: break-word;

            -webkit-hyphens: auto;

            -ms-hyphens: auto;

            hyphens: auto;

        }

        .area_inner {

            padding: 20px 16px 12px;

            background-color: #fafafa;

        }

        /*居中最大宽度*/

        .primary_area_content_inner {

            max-width: 375px;

            margin-left: auto;

            margin-right: auto;

        }

        .area_content_inner {

            text-align: center;

        }

        .qr_code_inner {

            display: none!important;

            position: fixed;

            left: 0;

            right: 0;

            top: 20px;

            color: #717375;

            text-align: center;

        }

        @media screen and (min-width: 780px) {

            .qr_code_inner {

                display: block !important;

                top: 20px

            }

        }

        .qr_code_pc_inner {

            position: relative;

            width: 500px;

            margin-left: auto;

            margin-right: auto

        }

        .qr_code {

            position: absolute;

            right: -120px;

            top: 0;

            width: 140px;

            padding: 16px;

            border: 1px solid #d9dadc;

            background-color: #fff;

            word-wrap: break-word;

            word-break: break-all;

        }

        .qr_code p {

            font-size: 14px;

            line-height: 20px;

        }

        .qr_code_pc_img {

            width: 102px;

            height: 102px;

        }

    </style>

</head>

<body>

<div class="content_inner">

    <div class="area_inner">

        <!--预览区-->

        <div class="primary_area_content_inner">

            <div class="area_content_inner">

                <img src="./image/iphone.png">

                <img src="./image/iphone.png">

                <img src="./image/iphone.png">

            </div>

        </div>

    </div>

    <!--二维码-->

    <div class="qr_code_inner">

        <div class="qr_code_pc_inner">

            <div class="qr_code">

                <img src="./image/iphone.png" class="qr_code_pc_img">

                <p>手机微信"扫一扫"<br>立即体验小程序</p>

            </div>

        </div>

    </div>

</div>

</body>

</html>

微信小程序H5预览页面框架（二维码不隐藏）的更多相关文章

  1. 微信小程序H5预览页面框架

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 微信小程序开发——使用第三方插件生成二维码

    需求场景: 小程序中指定页面需要根据列表数据生成多张二维码. 实现方案: 鉴于需要生成多张二维码,可以将生成二维码的功能封装到组件中,直接在页面列表循环中调用就好了.也可以给组件添加slot,在页面调 ...

  3. mac版微信web开发者工具（小程序开发工具）无法显示二维码 解决方案

    微信小程序概念的提出,绝对可以算得上中国IT界惊天动地的一件大事,这可能意味着一场新的开发热潮即将到来, 我也怀着激动的心情准备全身心投入其中,不过截止目前,在官方网站上下载的最新版本都无法使用,打开 ...

  4. 【转】mac版微信web开发者工具（小程序开发工具）无法显示二维码 解决方案

    转自:https://www.cnblogs.com/stevenluo/p/6030445.html   微信小程序概念的提出,绝对可以算得上中国IT界惊天动地的一件大事,这可能意味着一场新的开发热 ...

  5. 微信小程序手机预览请求不到数据（最后一条不明所以）

    本地开发调试小程序时,用手机预览需要有如下设置:1.微信开发者工具中设置:不校验安全域名.web-view 域名.TLS 版本以及 HTTPS 证书.这样在有网络请求的时候,就可以访问本地的服务器了, ...

  6. 微信小程序-图片预览

    仅供参考: 1,wxml: <view class="foot" bindtap="previewImage">我的小程序码</view> ...

  7. 微信小程序，预览在开发工具上显示正常，手机预览二维码报request->fail错误，打开手机的调试功能又正常。

    这里错误很明显是属于网址错误,开发工具和手机调试都能走request->success: 唯独常规模式下无法显示. 最开始调试过很多方法,没找出原因.最后到小程序开发设置才发现,自己未配置服务器 ...

  8. 小程序对于华为Oppo的canvas二维码渲染数据量大

    setTimeout(()=>{ ctx.draw(false, function (e) { options.callback && options.callback(e); ...

  9. TODO：小程序手机预览调试

    TODO:小程序手机预览调试 1. 小程序注册,目前还未开通个人注册,主体类型为企业.政府.媒体.其他组织 2. 登录小程序,绑定开发者,获取AppID 3. 下载微信小程序示例-新片预告 https ...

随机推荐

  1. c++第一周测验

    本次得分为:14.00/14.00, 本次测试的提交时间为:2020-03-08, 如果你认为本次测试成绩不理想,你可以选择再做一次. 1 单选(1分) 下面程序片段哪个没错? 得分/总分 A. in ...

  2. elementui 在原生方法参数里，添加参数

    公司有个项目需求需要在一个列表中分别上传图片,饿了么的方法不支持传递index,可以这样传递: :on-change="(file,fileList)=>{return changeF ...

  3. 【Python】2.19学习笔记 成员运算符,身份运算符,运算符优先级

    成员运算符 暂时不会用,等学链表时再补充 \(in\) 与 \(not in\) \(in\):如果在指定序列中找到指定值,则返回\(true\) \(not in\):如果在指定序列中找到指定值,则 ...

  4. EPX Studio产品功能介绍

    EPX主要面向谁解决什么问题   EPX是什么? EPX基于计算机语言 EPX是利用基于Pascal的FastScript语言作为基础语言,在其中增加了许多函数与特性的一个扩展,将EPX组件本身融入到 ...

  5. docker系列详解<一>之docker安装

    1.Docker 要求 CentOS 系统的内核版本高于 3.10 ,查看本页面的前提条件来验证你的CentOS 版本是否支持 Docker . 通过 uname -r 命令查看你当前的内核版本 $ ...

  6. IE 跨域session丢失问题

    在测试时发现session 取不到值,以为是session赋值除了问题,但是在Chrome中一切正常,故排除此原因.那问题肯定出在浏览器身上里.于是一步一步调试,发现在IE中,如果页面跳转,Sessi ...

  7. 理解Golang组件protobuf

    什么是protobuf protocol buffers 是一种语言无关.平台无关.可扩展的序列化结构数据的方法,它可用于(数据)通信协议.数据存储等.是一种灵活,高效,自动化机制的结构数据序列化方法 ...

  8. 洛谷1265prim算法求最小生成树

    题目链接:https://www.luogu.com.cn/problem/P1265 最小生成树的prim算法跟dijkstra算法非常像,就是将点分成两个集合,一个是已经在生成树中的点的集合,一个 ...

  9. 题解 P4302 【[SCOI2003]字符串折叠】

    讲讲我的做法 题目大意:对一个字符串进行折叠是它长度最小 看一眼数据范围:哇!字符串长度不超过100!这是一道省选题,不可能给你太宽裕的时限,所以,题目基本暗示你要用\(n^{3}\)多一些的算法复杂 ...

  10. OpenCV-Python 图像上的算术运算 | 十一

    目标 学习图像的几种算术运算,例如加法,减法,按位运算等. 您将学习以下功能:cv.add,cv.addWeighted等. 图像加法 您可以通过OpenCV函数cv.add()或仅通过numpy操作 ...