<!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. Oracle 11.2 RAC on Redhat 6.5 安装最佳实践

    本文讲述了在Redhat 6.5 上安装Oracle 11.2 RAC的详细步骤,是一篇step by step指南,全文没有什么技术难度,只要一步步跟着做就一定能安装成功. 环境介绍 分类 项目 说 ...

  2. MATLAB神经网络（1） BP神经网络的数据分类——语音特征信号分类

    1.1 案例背景 1.1.1 BP神经网络概述 BP神经网络是一种多层前馈神经网络,该网络的主要特点是信号前向传递,误差反向传播.在前向传递中,输入信号从输入层经隐含层逐层处理,直至输出层.每一层的神 ...

  3. C++ 小练习，一个整型数字的处理

    #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> //输入一个任意位数的int整数,并判断该整数的位数,并输出每一位数(每个数字中间用空 ...

  4. Python习题集（四）

    每天一习题,提升Python不是问题!!有更简洁的写法请评论告知我! https://www.cnblogs.com/poloyy/category/1676599.html 题目 如果一个 3 位数 ...

  5. 下载网页中的 pdf 各种姿势，教你如何 carry 各种网页上的 pdf 文档。

    关联词: PDF 下载 FLASH 网页 HTML 报告 内嵌 浏览器 文档 FlexPaperViewer swfobject. 这个需求是最近帮一个妹子处理一下各大高校网站里的 PDF 文档下载, ...

  6. 解决Tomcat控制台输出乱码问题

    解决Tomcat控制台输出乱码问题 打开Edit Configuration,在VM options一栏输入 -Dfile.encoding=UTF-8 然后到IDEA的bin目录找到 idea64. ...

  7. Elasticsearch系列---多字段搜索

    概要 本篇介绍一下multi_match的best_fields.most_fields和cross_fields三种语法的场景和简单示例. 最佳字段 bool查询采取"more-match ...

  8. python turtle笔记

      Turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制,在这个平面坐标系中移动,从而在它 ...

  9. Spring框架——IOC 容器的创建与使用

    企业级开发框架 Spring Framework 是整个 Spring 生态的基础,各个模块都是基于 Spring Framework 衍生出来的. Spring 的两大核心机制 IOC 控制翻转.A ...

  10. CSS导入方式和六种选择器

    1.css的导入方式 1.1 行内嵌式 1.2 内部方式 1.2.1含义: css代码写在<head>的<style>标签中 1.2.2 优点 方便在同页面中修改样式 1.2. ...