<!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: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, 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;

            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. 微信小程序手机预览请求不到数据（最后一条不明所以）

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

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

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

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

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

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

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

  6. 微信小程序左右滑动切换页面示例代码--转载

    微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...

  7. 微信小程序从零开始开发步骤-引入框架WeUI

    首先来看下WeUI的官方介绍: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.在微信小程序的开发过程中,涉及到的前端 ...

  8. 微信小程序开发07-列表页面怎么做

    接上文:微信小程序开发06-一个业务页面的完成 github地址:https://github.com/yexiaochai/wxdemo 我们首页功能基本完成,我对比了下实际工作中的需求,完成度有7 ...

  9. 微信小程序：设置启动页面

    一.功能描述 微信小程序启动时,首先运行app.js,然后才跳转到第一个页面,也就是启动界面. 设置启动界面,只需要调整app.json的pages信息的位置,放在第一条的page记录便是启动界面

随机推荐

  1. Simulink仿真入门到精通（八） M语言对Simulink模型的自动化操作及配置

    8.1 M语言控制模型的仿真 M语言与Simulink结合的方式: 在Simulink模型或模块中使用回调函数 在M语言中调用与模型相关的命令,控制模型的建立,设置模块的属性,增删信号线,以及运行模型 ...

  2. 03 Uipath调用VBA脚本，处理excel文档格式

    前言: 在平时我们的工作中,经常需要使用Uipath自动的导入大量数据到Excel表格中,但是却发现,数据导入到Excel之后,格式却是很乱,基本不能看,就像下图: ​ 而Uipath对Excel的操 ...

  3. JS高精度乘法计算问题（牛客网乘法-求 a 和 b 相乘的值，a 和 b 可能是小数，需要注意结果的精度问题）

    用到的知识点===> toFixed(num); toFixed() 方法可把 Number 四舍五入为指定小数位数的数字; 参数num: 代表小数位数: 例:var num = 5.56789 ...

  4. 在k3d上快速安装Istio，助你在本地灵活使用K8S！

    作者丨Mitsuyuki Shiiba 原文链接: https://dev.to/bufferings/tried-k8s-istio-in-my-local-machine-with-k3d-52g ...

  5. PPP协议（简述）

    PPP协议(链路层协议):用于点对点信道.互联网用户通常需要连接到某个ISP(运营商)之后才能接入到互联网,PPP协议是用户计算机和ISP(运营商)进行通信时所使用的数据链路层协议.该协议可支持同一时 ...

  6. 当AI遇上K8S：使用Rancher安装机器学习必备工具JupyterHub

    Jupyter Notebook是用于科学数据分析的利器,JupyterHub可以在服务器环境下为多个用户托管Jupyter运行环境.本文将详细介绍如何使用Rancher安装JupyterHub来为数 ...

  7. 手动生成WebService代理类

    方式一: 手动生成WebService代理类需要把一句生成语句,如 wsdl.exe /l:cs /out:D:/ProxyServices.cs http://localhost/WebServic ...

  8. 【Weiss】【第03章】练习3.21：单数组模拟双栈

    [练习3.21] 编写仅用一个数组而实现两个栈的例程.除非数组的每一个单元都被使用,否则栈例程不能有溢出声明. Answer: 很简单,一个栈从数组头起,一个栈从数组尾起,分别保留左右栈头索引. 如l ...

  9. kafka使用指南

    快速开始 本教程假设您刚刚开始,并且没有现有的Kafka或ZooKeeper数据.由于Kafka控制台脚本对于基于Unix和Windows的平台是不同的,因此在Windows平台上使用bin\wind ...

  10. Journal of Proteome Research | Quantitative Subcellular Proteomics of the Orbitofrontal Cortex of Schizophrenia Patients （精神分裂症病人眶额叶皮层亚细胞结构的定量蛋白质组学研究）（解读人：王聚）

    期刊名:Journal of Proteome Research 发表时间:(2019年10月) IF:3.78 单位: 里约热内卢联邦大学 坎皮纳斯州立大学 坎皮纳斯州立大学神经生物学中心 卡拉博大 ...