微信小程序H5预览页面框架(二维码不隐藏)
<!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预览页面框架(二维码不隐藏)的更多相关文章
- 微信小程序H5预览页面框架
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 微信小程序开发——使用第三方插件生成二维码
需求场景: 小程序中指定页面需要根据列表数据生成多张二维码. 实现方案: 鉴于需要生成多张二维码,可以将生成二维码的功能封装到组件中,直接在页面列表循环中调用就好了.也可以给组件添加slot,在页面调 ...
- mac版微信web开发者工具(小程序开发工具)无法显示二维码 解决方案
微信小程序概念的提出,绝对可以算得上中国IT界惊天动地的一件大事,这可能意味着一场新的开发热潮即将到来, 我也怀着激动的心情准备全身心投入其中,不过截止目前,在官方网站上下载的最新版本都无法使用,打开 ...
- 【转】mac版微信web开发者工具(小程序开发工具)无法显示二维码 解决方案
转自:https://www.cnblogs.com/stevenluo/p/6030445.html 微信小程序概念的提出,绝对可以算得上中国IT界惊天动地的一件大事,这可能意味着一场新的开发热 ...
- 微信小程序手机预览请求不到数据(最后一条不明所以)
本地开发调试小程序时,用手机预览需要有如下设置:1.微信开发者工具中设置:不校验安全域名.web-view 域名.TLS 版本以及 HTTPS 证书.这样在有网络请求的时候,就可以访问本地的服务器了, ...
- 微信小程序-图片预览
仅供参考: 1,wxml: <view class="foot" bindtap="previewImage">我的小程序码</view> ...
- 微信小程序,预览在开发工具上显示正常,手机预览二维码报request->fail错误,打开手机的调试功能又正常。
这里错误很明显是属于网址错误,开发工具和手机调试都能走request->success: 唯独常规模式下无法显示. 最开始调试过很多方法,没找出原因.最后到小程序开发设置才发现,自己未配置服务器 ...
- 小程序对于华为Oppo的canvas二维码渲染数据量大
setTimeout(()=>{ ctx.draw(false, function (e) { options.callback && options.callback(e); ...
- TODO:小程序手机预览调试
TODO:小程序手机预览调试 1. 小程序注册,目前还未开通个人注册,主体类型为企业.政府.媒体.其他组织 2. 登录小程序,绑定开发者,获取AppID 3. 下载微信小程序示例-新片预告 https ...
随机推荐
- 《自拍教程45》Python_adb实时监控Logcat日志
接上一篇:adb命令_一键截取logcat日志, 有一天, 系统稳定性开发负责人找到我,希望我能在跑android 系统monkey的时候, 实时监控logcat的输出,如果一旦发现"jav ...
- (转)C代码优化方案
C代码优化方案 原文地址:http://www.uml.org.cn/c++/200811103.asp 目录 C代码优化方案 1.选择合适的算法和数据结构 2.使用尽量小的数据类型 3.减少运算的强 ...
- 在k3d上快速安装Istio,助你在本地灵活使用K8S!
作者丨Mitsuyuki Shiiba 原文链接: https://dev.to/bufferings/tried-k8s-istio-in-my-local-machine-with-k3d-52g ...
- 《ASP.NET Core 3框架揭秘》5折预售[发布试读章节]
<ASP.NET Core 3框架揭秘>于昨天在下午京东正式开始预售,并在半天之内销售近一千套.为了回馈读者,出版社与京东谈了一个5折的价格,这是一个连我都没有想到的价格,至少我写着几本书 ...
- vue-autoui自匹配webapi的UI控件
vue-autoui 是一款基于vue和element扩展的一个自动化UI控件,它主要提供两个控件封装分别是auto-form和auto-grid; 通过这两个控件可以完成大多数的信息输入和查询输出的 ...
- JDK中线程池参详细解析
在jdk中为我们提供了三种创建线程池的方式,但是在阿里的编码规范里面都是明确禁止使用这三种api去创建线程池,推荐我们去自定义线程池.为什么? 要回答为什么,我们需要明白创建线程池时,各参数的作用: ...
- android studio 导入RecyclerView
- Selenium系列(二) - 控制浏览器操作的详细解读
如果你还不想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识 ...
- VsCode编辑器那些事
1.怎么改成中文的? 按快捷键“Ctrl+Shift+P” 在框下点击“configur Display language" 会跳转至商店,选择插件下载“Chinese (Simplifie ...
- 一款带Web面板的轻量级、高性能内网穿透工具:nps使用教程
说明:内网穿透工具之前已经介绍了不少了,比如Frp.lanproxy.Holer等,现在再介绍个带Web面板的穿透工具nps,之前叫easyProxy,只是改名了而已,该工具是一款使用go语言编写的轻 ...