<!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. libfastcommon总结(一)加载主机上所有网卡的IPv4的地址

    头文件为local_ip_func.h 主要接口 load_local_host_ip_addrs();//加载主机网口所有IPv4地址到列表    print_local_host_ip_addrs ...

  2. 为什么 String 是 immutable 类

    二哥,你能给我说说为什么 String 是 immutable 类(不可变对象)吗?我想研究它,想知道为什么它就不可变了,这种强烈的愿望就像想研究浩瀚的星空一样.但无奈自身功力有限,始终觉得雾里看花终 ...

  3. JAVA-阿里云短信服务

    1.引入相关依赖 <!--lombok--> <dependency> <groupId>org.projectlombok</groupId> < ...

  4. 从零开始学习R语言(三)——数据结构之“矩阵(Matrix)”

    本文首发于知乎专栏:https://zhuanlan.zhihu.com/p/60140022 也同步更新于我的个人博客:https://www.nickwu.cn/blog/id=129 3. [二 ...

  5. MySQL笔记(8)-- 索引类型

    一.背景 前面我们讲了SQL分析和索引优化都涉及到了索引,那么什么是索引,它的模型有什么,实现的机制是什么,今天我们来好好讨论下. 二.索引的介绍 索引就相当书的目录,比如一本500页的书,如果你想快 ...

  6. Thinkphp绕过宝塔getshell

    可以看到直接被拦了,经测试这里是敏感函数字符拦截,大部分有用的敏感函数都被拦了,这里面被拦的是phpinfo() Emmmm,怎么办呢..... 直接执行代码不行,那么就写入代码吧,用file_put ...

  7. git 使用和一些错误

    一.简单使用 Git是目前世界上最先进的分布式版本控制系统,用于自动记录每次文件的改动,但是和所有版本控制系统一样,只能跟踪文本文件的改动,比如TXT文件,网页,所有的程序代码等,而图片.视频这些二进 ...

  8. 为什么我推荐你用Ubuntu开发?

    前言: 鱼哥在做多媒体开发时,领导倒逼我们用Ubuntu开发,后来才发现它的牛逼和高效.所以对于还在用Windows上开发的朋友,鱼哥建议,趁周末,搞个双系统,切到Ubuntu上开发, Ubuntu最 ...

  9. Servlet(一)----快速入门

    ## Servlet:server applet *  概念:运行在服务端的小程序 *  servlet就是一个接口,定义了Java类被浏览器访问到(tomcat识别)的规则. *  将来我们自定义一 ...

  10. MySQL----DML(增删改表中数据)

    ##DML:增删改表中的数据 1.添加数据 *语法: *  insert into 表名(列名1,列名2,...列名n) values (值1,值2,...值n); *注意: 1.列名和值要一一对应. ...