用h5简单实现APP帮助中心(FAQ)，下次也可以用
2024-06-02 04:37:19
先看效果：
功能：
列表点击可以打开
点击下面的链接可以跳转到在线IM客服页面
页面功能简单，但是却常用，下面是代码
首页要引入2个js文件
<script src="./static/js/jquery-1.11.0.min.js"></script>
<script src="./static/js/jquery.collapse.js"></script>这2个库需要的可以网上找一下下载
下面是整体实现代码，可以直接复制使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"><script src="./static/js/jquery-1.11.0.min.js"></script><script src="./static/js/jquery.collapse.js"></script><title>在线客服</title><script>$(function() {$("#dowebok").collapse()})</script><style>*{padding: 0;border: 0;margin: 0;}a{text-decoration:none;}body{background-color: #eeeded;padding: 15px;}.head-title{display: flex;align-items: center;}.h3-title{font-size: 14px;background-color: #ff5b69;color: #fff;border-radius: 10px;padding: 5px 10px;}.question{margin: 20px 20px 10px 20px;}.example{background-color: #FFFFFF;border-radius: 10px;padding: 5px 5px 5px 10px;font-size: 14px;}.example h3{height: 40px;line-height: 40px;}.example a{color: #1a1a1a;font-weight: normal;font-size: 14px;width: 100%;display: block;}.example div{color: #999999;}.kefu{text-align: center;margin-top: 50%;}.kefu a{background-color: #b13d86;color: #FFFFFF;font-size: 14px;border-radius: 20px;padding: 5px 10px;}</style>
</head>
<body>
<div class="head-title"><div class="h3-title">常见问题可以点击下方展开。有其他疑问可以点击下方在线客服联系我们！</div><svg t="1669450712989" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1501" width="64" height="64"><path d="M584.704 998.4H439.296c-228.352 0-413.696-185.344-413.696-413.696V439.296c0-228.352 185.344-413.696 413.696-413.696h145.408c228.352 0 413.696 185.344 413.696 413.696v145.408c0 228.352-185.344 413.696-413.696 413.696z" fill="#FF4958" p-id="1502"></path><path d="M998.4 584.704V439.296c0-228.352-185.344-413.696-413.696-413.696H439.296C210.944 25.6 25.6 210.944 25.6 439.296v145.408c0 228.352 185.344 413.696 413.696 413.696h145.408c13.312 0 26.624-1.024 38.912-2.048 162.816-61.44 294.912-185.344 368.64-342.016 4.096-22.528 6.144-46.08 6.144-69.632z" fill="#FF4958" p-id="1503"></path><path d="M998.4 506.88v-67.584c0-228.352-185.344-413.696-413.696-413.696H439.296C210.944 25.6 25.6 210.944 25.6 439.296v145.408c0 219.136 169.984 398.336 385.024 412.672 288.768-11.264 527.36-217.088 587.776-490.496z" fill="#FF4F5D" p-id="1504"></path><path d="M584.704 25.6H439.296C210.944 25.6 25.6 210.944 25.6 439.296v145.408c0 143.36 72.704 269.312 183.296 343.04 56.32 17.408 115.712 27.648 178.176 27.648 322.56 0 584.704-262.144 584.704-584.704 0-34.816-3.072-67.584-9.216-100.352C898.048 125.952 752.64 25.6 584.704 25.6z" fill="#FF5463" p-id="1505"></path><path d="M584.704 25.6H439.296C210.944 25.6 25.6 210.944 25.6 439.296v145.408c0 96.256 32.768 185.344 88.064 256 81.92 48.128 177.152 74.752 279.552 73.728 296.96-4.096 538.624-250.88 535.552-547.84-1.024-75.776-17.408-147.456-46.08-212.992C807.936 74.752 702.464 25.6 584.704 25.6z" fill="#FF5A68" p-id="1506"></path><path d="M874.496 490.496c34.816-153.6 0-294.912-77.824-406.528-61.44-36.864-134.144-58.368-210.944-58.368H439.296C210.944 26.624 25.6 211.968 25.6 440.32v145.408c0 59.392 12.288 114.688 34.816 165.888 126.976 109.568 313.344 157.696 503.808 90.112 156.672-55.296 273.408-189.44 310.272-351.232z" fill="#FF606D" p-id="1507"></path><path d="M439.296 25.6C210.944 25.6 25.6 210.944 25.6 439.296v145.408c0 26.624 3.072 53.248 7.168 77.824C116.736 764.928 244.736 829.44 387.072 829.44c252.928 0 458.752-204.8 458.752-458.752 0-128-52.224-243.712-137.216-326.656-38.912-12.288-79.872-18.432-122.88-18.432H439.296z" fill="#FF6672" p-id="1508"></path><path d="M25.6 439.296v139.264c70.656 123.904 204.8 207.872 357.376 208.896 228.352 2.048 418.816-185.344 419.84-414.72 0-144.384-71.68-270.336-182.272-345.088-12.288-1.024-23.552-2.048-35.84-2.048H439.296C210.944 25.6 25.6 210.944 25.6 439.296z" fill="#FF6B78" p-id="1509"></path><path d="M529.408 25.6h-90.112C210.944 25.6 25.6 210.944 25.6 439.296v29.696c43.008 158.72 188.416 276.48 361.472 276.48 206.848 0 373.76-167.936 373.76-373.76C760.832 215.04 665.6 81.92 529.408 25.6z" fill="#FF717D" p-id="1510"></path><path d="M384 41.984c-33.792 0-66.56 5.12-97.28 14.336-74.752 29.696-139.264 79.872-186.368 144.384-30.72 50.176-48.128 109.568-48.128 173.056 0 183.296 148.48 331.776 331.776 331.776s331.776-148.48 331.776-331.776S567.296 41.984 384 41.984z" fill="#FF7782" p-id="1511"></path><path d="M384 374.784m-289.792 0a289.792 289.792 0 1 0 579.584 0 289.792 289.792 0 1 0-579.584 0Z" fill="#FF7D87" p-id="1512"></path><path d="M136.192 374.784a247.808 247.808 0 1 0 495.616 0 247.808 247.808 0 1 0-495.616 0Z" fill="#FF828D" p-id="1513"></path><path d="M384 374.784m-205.824 0a205.824 205.824 0 1 0 411.648 0 205.824 205.824 0 1 0-411.648 0Z" fill="#FF8892" p-id="1514"></path><path d="M510.976 381.952c92.16 0 167.936 74.752 167.936 167.936 0 6.144 0 12.288-1.024 18.432-19.456 9.216-39.936 15.36-61.44 20.48-19.456 4.096-38.912 7.168-60.416 9.216-5.12-9.216-15.36-15.36-26.624-15.36h-33.792c-16.384 0-29.696 13.312-29.696 29.696 0 16.384 13.312 29.696 29.696 29.696h33.792c12.288 0 23.552-7.168 27.648-18.432 22.528-2.048 44.032-5.12 64.512-10.24 17.408-4.096 32.768-9.216 49.152-15.36-20.48 68.608-83.968 118.784-159.744 118.784-92.16 0-167.936-74.752-167.936-167.936s75.776-166.912 167.936-166.912z m2.048-74.752c-67.584 0-128 27.648-172.032 71.68-28.672 28.672-49.152 63.488-61.44 102.4h-8.192c-19.456 0-35.84 16.384-35.84 35.84v55.296c0 19.456 16.384 35.84 35.84 35.84h47.104v-122.88c10.24-30.72 27.648-58.368 50.176-79.872 36.864-36.864 88.064-60.416 145.408-60.416s107.52 22.528 145.408 60.416c21.504 21.504 37.888 47.104 48.128 75.776v126.976h46.08c19.456 0 35.84-16.384 35.84-35.84v-56.32c0-19.456-16.384-35.84-35.84-35.84h-7.168c-11.264-38.912-32.768-73.728-61.44-102.4-44.032-43.008-105.472-70.656-172.032-70.656z" fill="#FFFFFF" opacity=".8" p-id="1515"></path></svg>
</div><div class="question">常见问题</div>
<div class="example" id="dowebok"><h3>1、为什么需要金币才能聊天</h3><div>您好，为了营造良好诚信的交友平台分为，也为了避免女性用户被过度骚扰，平台采取消耗金币的聊天交友模式，金币让对方了解您的实力，付费聊天能主动追求您喜欢的人并且得到及时回应，可靠高效哦。</div><h3>2、性别选错怎么办？</h3><div>您好，性别选择错误，请进入【我的】-【我的认证】-【实人认证】操作，实人认证后，性别将跟随身份证性别而变化</div><h3>3、亲密度有什么用？</h3><div>您好，亲密度是双方爱意的体现，互动越频繁，亲密度越高，达到15度后，将自动成为亲密好友，上线会及时收到上线通知。</div><h3>4、遇到诈骗如何处理？</h3><div>您好，抱歉给您不好的体验，若您在平台内遇到诈骗，请点击改用户资料，选择点击右上角-点击举报，并且协商诈骗经过。我们会有工作人员跟进处理，我们会不断优化用户体验。</div><h3>5、如何举报用户？</h3><div>"您好，如果您觉得对方用户有违规行为，您可以点击对方的个人资料-点击右上角-点击举报处理的哦。如有其他疑问可以“联系客服-提交反馈”为您解答"</div><h3>6、为什么提示内容违规？</h3><div>您好，系统已接入第三方检测系统，系统会自动检测内容是否违规，如显示内容违规建议您换其他内容进行发布。</div><h3>7、如何删除聊天记录？</h3><div>"1）、删除单个用户的聊天记录：长按该用户对话-【删除】即可删除聊天记录2）、右上角删除也可以删除非亲密好友的聊天记录"</div><h3>8、送多少礼物才可获得联系方式</h3><div>"您好，送礼本身语解锁联系方式无关，但为保障您的安全，建议您在平台内进行交友互动；如在使用过程中有遇到异常问题，可联系在线客服反馈。"</div>
</div>
<div class="kefu"><a id="kefu_url" href="">联系在线客服</a>
</div>
<script>//获取url参数function getQueryVariable(variable){var query = window.location.search.substring(1);var vars = query.split("&");for (var i=0;i<vars.length;i++) {var pair = vars[i].split("=");if(pair[0] == variable){return pair[1];}}return(false);}var kefu_url = getQueryVariable("kefu_url");$("#kefu_url").attr('href',kefu_url);
</script>
</body>
</html>用h5简单实现APP帮助中心(FAQ)，下次也可以用相关推荐
- 客户端相关知识学习（二）之h5与原生app交互的原理
前言 现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次 ...
- h5 与原生 app 交互的原理
作者:senntyou segmentfault.com/a/1190000016759517 现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如 ...
- h5与原生app交互的原理
h5 与原生 app 交互的原理 现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 ...
- WANLSHOP 直播短视频种草多用户电商系统源码自营+多商户+多终端（H5+小程序+APP）
WANLSHOP高级版 可用于自营+外包项目(多主体). 可用于外包定制开发项目. 提供开源源码,私有化部署.一款基于 FastAdmin + Uni-APP 开发的 多终端(H5移动端.APP.微信 ...
- 前端MUI+H5+HBuilderX开发APP（IOS，android），后台Springboot,java学习与实践文章，更新中（二）
前端MUI+H5+HBuilderX开发APP(IOS,android),后台Springboot,项目搭建,图标设置等,更新中(二) 新建我的第一个APP manifest.json: 图标设置: ...
- 基于Uni-APP多端「h5+小程序+App」高仿抖音小视频|直播|聊天实例
uni-ttLive 基于uni-app+uView-ui跨端开发短视频+直播聊天实例. 全新研发的一款多端仿制抖音短视频+直播+聊天项目,基于uniApp+Vue.js+Vuex+Nvue+uVie ...
- H5和原生APP之间的区别
原文:http://www.ui.cn/detail/247751.html 最近项目中因各种客观因素,移动端都是默认用的纯H5 APP,感受最深的就是各种坑啊,好大的坑啊.产品上线后,带着各种坑后的 ...
- Android——一个简单的APP模版
Android--一个简单的APP模版 述 效果视频 技术栈 地图.定位.导航 地图 定位 导航 偏好设置 当前导航信息 预定车位和订单结算 创建订单 计时服务传导 后台服务计时 订单结算 个人信息 ...
- android h5和原生方法调用,H5与原生APP之间的方法互通
最近做与app端的混合开发,了解到了H5与原生app端之间的方法互通 首先是我们给app端定义方法供他们使用(以vue为例) methods中定义一个方法名称 VContent() { console ...
最新文章
- 使用自动化插件release来管理maven项目的版本发布
- 利用vgg预训练模型提取图像特征
- 如何编写java请求_如何避免将Java请求从Java Web服务器发送到自身？
- Altium Designer20 PCB板子绘制
- 在线阅读试听视频小程序模板源码
- 基于概率的项目相似度之并行方法
- 变量的三重属性_TypeScript基础入门 - 变量声明(三)
- 於岳 linux实用教程(第2版),Linux实用教程 第2版 教学课件 ppt 作者 於岳 编著 06...
- 【转载】cocos2d-x类型转换(CCstring int string char UTF-8互转)以及字符串详解
- 五大傻瓜式移动应用开发工具
- 千月2021全新改版影视app系统源码 影视app全新双端开源系统 全开源 带投屏 带教程
- 基于ABAQUS蠕变储层稠油蒸汽吞吐开发过程数值模拟
- 现代密码学-CA与数字证书详解
- 关于数字IC设计中分频后的慢速时钟和以快时钟触发的信号的关系处理
- android 特殊符号
- vimium 成神之路-键盘党的胜利
- PHP实现简单计算器
- Vivado Digilent IP核
- 算法题 递增的三元子序列
- 干货|破解遗传算法——CryptoPups旺财，基于以太坊的区块链游戏（分享实录）...