评论

QQ小程序和浏览器小程序接入之吃螃蟹篇

介绍了微信小程序如何通过简单的改造接入浏览器和QQ小程序,指出了一些接入时需要注意的要点。

借着小程序的东风,公司里的其他平台也在尝试与微信小程序打通,承载平台里的多个内容场景和流量入口,给用户更加流畅的使用体验,二次访问的平台有效解决了用户留存和转化问题。前段时间应业务要求,正好有机会尝试了QQ小程序和浏览器小程序的接入预研,也分享一些经验给有需要的同学。


浏览器小程序

浏览器小程序(也叫QB小程序)目前整个接入流程是已经打通了的,目前有一个较为简陋的介绍和接入页面供开发者使用,另外需要注意,目前QB小程序是没有官方的PC开发者工具的,开发者需要在微信的开发者工具上完成开发和测试,然后使用QB官方提供的接入页面来进行真机调试和发布。需要注意的是,不管是哪种小程序,目前都只支持安卓哦~

首先用微信扫描二维码,打开接入页面,这里可能会提示说内核需要更新,按照提示更新就好。

https://softimtt.myapp.com/browser/weapp/debugger/html/debug_entry.html?lastCheckEnv=1552356521289


扫描之后会打开一个如下的页面,这里可以注册一个唯一的小程序包名,下方会展示一个qbDebugKey的说明,这个key是关联设备的,第一次注册之后,只能用注册的设备进行登录。如果想要别的设备来登录怎么办呢?别担心,下面还有。


登录完成之后,就可以在“开发者权限管理”里面添加别的设备的qbDebugKey了,只有被创建者添加的设备才能够登录,另外,我们还需要把所有注册的qbDebugKey全部添加到小程序app.json里面的window对象下。



接下来我们就可以正式来调试小程序了,首先在微信开发者工具里保证页面已经能顺利跑起来,然后点击真机调试按钮


再点击接入页面的“微信扫码”,就会用微信打开真机调试下的小程序,然后再点击页面上的圆点,可以回到接入页面,这时候点击启动QB打开小程序,就可以顺利呼起浏览器来打开小程序啦,是不是很简单。

如果确认没有问题的话,从右上角的菜单,选择“上传体验”,通过填写版本号就可以生成一个测试小程序的访问地址,可以把它分享给别人打开了~测试完毕之后,在接入页面选择版本提审,就可以发布正式环境咯。



需要确认的问题

别太高兴,这里只是万里长征的第一步,如果你有一个小程序想从微信迁移过来或者hybrid的应用改造成小程序,你会发现很多问题。

  1. 很多微信小程序依赖于第三方插件的功能,例如我们的波洞使用了腾讯视频插件来播放动画,但是在QQ平台上是没有提供这些插件的,这种涉及到第三方的问题很可能影响到你们的接入流程。

  2. 登陆态:不论是QQ小程序还是浏览器小程序,都和微信使用的是同一套登陆流程:首先,通过wx.login()接口获取临时登录凭证code,然后通过wx.request把code传递给你们的后台,后台拿着appid和appsecret以及code找平台接口服务进行换票,获取用户唯一标识openid和会话秘钥session_key,后台根据这两个值计算出一个自定义登陆态返回给小程序端,以后每次请求都需要带上这个自定义登陆态当做cookie使用(小程序里是没有cookie的,需要开发者自己模拟)。但是这里需要注意的是,不论是哪个平台,平台接口服务返回的登录态和微信是不同的,这里意味着如果要做账号打通的话,需要现有的小程序后台做一些改造。

  3. 缓存问题:有的业务可能和我们一样有一些下载的需求,如果是这种内容的话,那么你可能会头大了。目前浏览器小程序和QQ小程序都是继承了微信小程序的缓存策略,也就是用户自定义的缓存内容和临时缓存各10M,可能导致业务体验有比较大的降级。

  4. 唤起APP策略:假如说你们有一个自己的APP,想通过小程序进行唤起APP的操作,目前的话在平台上都会受到类似于白名单的限制,在QQ浏览器的接入指引已经有了现成的方案,需要在APP侧和小程序侧都进行对应的改造,QB会将小程序发出的schema来拉起APP,也可以用来传递参数;另外如果是在小程序的web-view组件里打开的H5里拉起APP,schema貌似不会被QB给处理,所以无法拉起。



QQ小程序

在写作本文的时候QQ小程序尚在开发中,整个流程还尚未跑通,不过从目前初步了解的印象来看,QQ小程序对开发者的体验要好一些,一方面QQ小程序提供了Windows/macos的开发者工具,虽然尚不支持真机的X5调试,只能vConsole(这点QB也是一样的),另外开发者也是需要去官网上申请一个开发者账号来获取appid的,目前还没进入公测阶段所以暂时没拿到邀请码,这里就只能忽略啦~相对来说整个流程还是要正规很多。


(目前的开发者工具,还处于雏形阶段)

另外提个建议,开发者工具在发起cgi请求的时候都会带上一个Origin: http://127.0.0.1:port 的header,在调试cgi的时候这里会导致跨域报错,这个时候就要依赖于开发者工具的代理功能啦,把这个header删掉就可以正常请求了。



不过配上代理相对来说还是有一些不方便,比如微信开发者工具登陆的时候如果配了代理,那么加载二维码就会失败。这里如果能做一些优化就好了。


由于时间有限,QB小程序和QQ小程序的接入探秘就只能到这里了,后面如果有机会再尝试的话会在更新一些内容,希望这篇文章对想要接入的你们有一点点帮助,那就好了,我们下回见~


点赞 4
收藏
评论

2 个评论

  • 康纳斯
    康纳斯
    2019-06-12

    你好请问egret白鹭做完的项目,接如qq小程序,默认的那个玩一玩是不能用的吗

    2019-06-12
    赞同
    回复 1
    • 成碟青瓜过大海
      成碟青瓜过大海
      2019-06-14

      不可以的,玩一玩跟qq小程序不太一样,你得下载qq小程序开发者工具才行

      2019-06-14
      回复
  • 杭州弧途科技有限公司
    杭州弧途科技有限公司
    2019-04-03

    先给点个赞。

    2019-04-03
    赞同
    回复
登录 后发表内容