Skip to content

定制化MIP~定制化小说阅读器的接入联调与测试

Jump to bottom
craigchencc edited this page Mar 27, 2019 · 1 revision

熊掌号阅读器接入联调与测试

在根据极阅读器的开发文档完成小说的本地开发以后，需要在正式上线前进行熊掌号阅读器的接入联调和测试，保证熊掌号阅读器的最后接入时的用户体验。

模拟结果页的debug测试环境

模拟结果页的debug测试环境是用于让站长自测熊掌号阅读器在模拟线上结果页打开的非cache的环境，由于搜索结果页的打开是以iframe的形式打开，可能会引起部分问题，站长在使用熊掌号阅读器后，可根据此环境进行自测，及早修改问题。

如何使用模拟结果页的debug测试环境

可参考https://github.com/mipengine/mip-cli-plugin-sf，此处md里的说明文档，进行测试。 使用页面如下： 图片

途中输入框可输入测试地址。点击当前状态按钮，切换线下测试环境，使用非cache的地址测试，目前cache地址测试的环境开发中，预计9月14号可上线使用。

联调环境的介绍

熊掌号阅读器的联调是基于一个外部可用的模拟环境进行的，该环境与极速服务在百度搜索中运行的环境基本一致，在环境中联调测试后，可以作为上线前的依据和参考。

如何使用联调环境

当前版本的联调环境示例 https://m.baidu.com/wishwing/c/www.xmkanshu.com/book/mip/read?fr=xs_aladin_free&bkid=685640121&mip=1&crid=563

https://m.baidu.com/wishwing/c/s/ 为环境固定前缀，与搜索线上熊掌号阅读器访问时的URL方式一致 www.xmkanshu.com/book/mip/read?fr=xs_aladin_free&bkid=685640121&mip=1&crid=563 为小说自身URL，拼接在环境固定前缀之后，注意，此处不需要拼接额外协议。

当小说的链接为http链接访问时：

固定环境前缀为：https://m.baidu.com/wishwing/c/ 即当极速服务URL为http:// www.xmkanshu.com/book/mip/read?fr=xs_aladin_free&bkid=685640121&mip=1&crid=563 时，联调环境完整链接为：https://m.baidu.com/wishwing/c/www.xmkanshu.com/book/mip/read?fr=xs_aladin_free&bkid=685640121&mip=1&crid=563

当极速服务链接为https链接访问时：

当提供的测试环境为https访问时，固定环境前缀为：https://m.baidu.com/wishwing/c/s/ 即当极速服务URL为 https:// www.xmkanshu.com/book/mip/read?fr=xs_aladin_free&bkid=685640121&mip=1&crid=563 时，联调环境完整链接为：https://m.baidu.com/wishwing/c/s/www.xmkanshu.com/book/mip/read?fr=xs_aladin_free&bkid=685640121&mip=1&crid=563

环境要求

由于当前提供的是较为正式的联调环境，所以在接入前烦请提前做如下准备，以满足接入联调环境的要求接入联调环境的要求。。

1、组件上线。如果阅读器有额外功能的组件，开发完成需要上线，请参考站长组件提交上线流程 2、完成审核。在组件完成上线后，修改自身页面的组件地址引用，完成页面校验审核。附：MIP在线校验地址 3、服务页面上线。接入联调环境时，页面会被MIP Cache系统抓取，所以联调环境的链接需要是外部可访问的线上链接，如果与小说接入时的真实域名一致，则更好。小说页面上线后，可以通过MIP的校验预览看线上的服务是否能正常被抓取并通过校验。

联调注意事项

在联调测试时，注意以下几个方面的问题，容易提升联调开发的效率。

跨域问题

在 https://m.baidu.com/wishwing/c/s/ 此环境下，使用的是 mipcdn域名，也就是取的是缓存，请求第三方接口时，会存在不同域下的跨域问题 因此后端 接口 需要支持 CORS

node express

app.use('/router',(req, res, next)=>{
    if( /mipcdn.com(:[0-9]+)?$/.test(req.headers.origin) ){
        res.header('Access-Control-Allow-Origin', req.headers.origin)
        res.header('Access-Control-Allow-Credentials','true');
    }
})

页面跳转配置

跳转路径 不能使用 未带域名的绝对路径 【MUST NOT】

// bad
<a href="/xxx/xx.html">跳转</a>  // 【MUST NOT】
MIP.viewer.open('/xxx/xx.html') // 【MUST NOT】
// good
<a href="./xx.html"> 跳转 </a>
MIP.viewer.open('https://www.example.com/xxx/xx.html')

悬浮元素问题

在 iOS 的 iframe 中，如果页面中包含了使用 display: fixed 定位的元素，在页面发生滚动时，这些元素并不会遵循 fixed 的特性停留在页面的同一位置，而会发生明显的上下跳动，十分影响视觉效果。 我们会使用一个相当 HACK 的做法：创建一个 body 的兄弟节点

在mip中 使用 fixed时，必须使用mip-fixed组件， 如此组件不含有滚动时的场景时，以及控制fixed元素是否显示时出现在问题，可加still属性，记住此属性使用后一定在m.baidu.com环境进行验证

<mip-fixed still></mip-fixed>

熊掌号阅读器组件内的json

在熊掌号阅读器组件内的json配置出错后，会影响整个阅读器的使用，注意配置合法的json；

页面状态配置

在每个页面头部配置json-ld（mipShellConfig），描述页面的状态需要有合法的json配置，否则影响阅读器的整体使用；

小说URL的Spider抓取

小说URL的spider抓取，由于小说的特殊性，小说的URL需要站点提供相关的接口供百度spider抓取，形式为xml的schema，可参考小说mip化正排资源—XML格式及规范

测试要求

覆盖机型

IOS：7-11（包括大屏和小屏）

Android：4-7（包括大屏和小屏）

覆盖浏览器

ios浏览器：手百、safari、qq、uc、chrome、百度浏览器、手百极速版、简单搜索

android浏览器：手百、qq、uc、安卓自带、chrome、百度浏览器、手百极速版、简单搜索

测试点

熊掌号阅读器的页面显示正常； 阅读器的翻页、设置、目录等功能正常； 广告的返回渲染功能正常；

Clone this wiki locally