oppo手机自带浏览器功能页面开发

人工智能其他案例ID：180543

👾

5 年经验· 中科软有限公司

微信扫码沟通，客服可协助直接对接工程师；如当前档期不合，也可继续推荐相似案例作者。

案例介绍

手机自带浏览器的搜索页和新闻详情页，负一屏的新闻详情页；主要用think.js+vue+dot.js开发，对于H5调试比较熟悉，由于H5比较注重性能，所以项目中接口大部分都是写在Node里面，在node里面进行数据处理，再返回到前端进行模板渲染；
项目职责：
1、新闻详情页主要用vue和think.js搭配使用，详情页主要功能是把一个整体的页面拆分成每个小组件进行拼凑，主要难点在于广告的插入和夜间模式的适配和评论模块的开发;1、广告插入主要是客户端提供一个广告的JS，在页面加载的时机去进行一个插入iframe的标签，里面就是广告的js;2、详情页面涉及商业化等多方面，因此涉及的比较多的埋点，例如广告，通常使用MutationObserver 去进行判断dom元素是否存在去进行埋点上报;3、由于浏览器的暗夜模式是内核做的一套反色效果，前端这边改不了样式，只能通过内核提供的过滤方法去进行暗夜模式的适配; 4、大部分的跳转，复制等逻辑都是调用浏览器提供的API去进行；

3、搜索主要用vue和调用客户端提供的浏览器api，由于搜索页涉及的场景比较多，且这个页面是常驻（即锁屏，切后台，跳转首页等），所以导致这个页面数据显示的场景比较复杂；目前改版是对搜索页的热榜改版，由原来以来客户端API数据改成接口，这样会造成数据拉取比较慢，（客户端可以在进去浏览器的时候就能拿到数据，而接口只能在页面加载的时候才能请求）。因此目前开发是采用首次进来通过接口拿数据，存储到本地，下次进来先加载本地的，然后再拉新的覆盖原来的。当时间过了一段时间，清空本地的重新拉取新数据，保持数据的时效性。除此之外，还要考虑多个场景的切换去进行一些还原，隐藏等操作。
4、负一屏新闻详情页主要是从浏览器的新闻详情页分出来的一个页面，只是对里面的一些功能进行删减。