如何快速将 APICloud 应用转换为微信公众号?

目录

概要

现在,APICloud 应用,可以一键生成微信公众号!

APICloud 基于积淀已久的 iOS/Android 原生引擎开发技术,结合微信公众号运行环境的特点,针对性地推出了为其量身定制的适配器环境,任何标准 APICloud 应用,都可以在不修改或极小修改之后,直接运行在微信环境中。

源码自有,灵活可配置的微信公众号解决方案!

基于 APICloud 应用生成的微信公众号,开发者可直接获取源码,部署到自己服务器上。核心配置文件,开发者可根据服务器环境需要,灵活修改。最重要的是: 为了便于开发者二次开发或与微信业务进一步对接,我们提供了足够开放和灵活的自定义扩展机制,开发者可根据业务需要,重写任意 APICloud 模块的内部实现。

步骤

1. 登录 APICloud 网站控制台,选择或新建一个 Native 原生应用.

微信公众号适配 - 如何快速将 APICloud 应用转换为微信公众号? - 图1

2. 点击 “云编译”页面的 “一键生成微信公众号”

微信公众号适配 - 如何快速将 APICloud 应用转换为微信公众号? - 图2

3. 点击 “一键生成微信公众号”按钮,等待编译完成.

微信公众号适配 - 如何快速将 APICloud 应用转换为微信公众号? - 图3

4. 部署

把云编译生成的压缩包,解压放到网站静态资源根目录,然后就可以通过类似 http://www.exapmle.com/A6055344415623/web_adapter/adapter.html 一类的值来访问.其中 A6055344415623 要替换为自己应用的 appId.

如果不想放在网站根目录,需要对应修改 web_adapter/script/config.js 中的相关配置.

5. 跨域访问问题

No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

如果控制台出现类似错误,说明当前预览微信公众号的网站与服务器接口不在同一个域名下,有两种解决方案:

  1. 修改服务器端接口设置,允许跨域访问.
  2. 将云编译生成的静态资源包放置在到网络接口所在的服务器,保证二者可以在同一域名下访问.

6. 原生模块适配问题

APICloud 现在可以自动适配原 APICloud 原生 App 中标准 WEB 技术相关的逻辑.涉及到使用 APICloud 原生模块的地方,还需要开发者自行定制开发.

为了保持代码写法的一致,我们提供了和 APICloud 原生引擎类似的扩展机制,开发者可基于此重写 APICloud 原生模块的相关逻辑.

开发者原有代码一般不需要做修改,只需要依照我们提供的扩展机制,针对性地添加部分原生模块的扩展代码,即可实现微信公众号的适配.详见下文 “扩展” 部分

扩展

APICloud 微信公众号适配器, 基于纯 Web 技术, 并针对微信的 Web 环境,有所优化.在接口实现上, 与 APICloud Native 引擎保持一致.基于此, 任意标准 APICloud 原生应用,都可以极低成本,迭代为微信公众号,甚至标准的网页应用.

APICloud 微信公众号适配器,在实现时,做了最大程度的开放性和灵活性设计.我们允许开发者重写任意 APICloud API 引擎对象或原生模块的任意方法和属性.

任意界面,只需要实现一个 apiadapter 方法,就可以在此方法内,拦截和重写 APICloud 模块方法的具体实现.

  1. /*
  2. 当 frame, window, adapter 级别同时实现此函数时,
  3. 加载优先级为: frame > window > adapter > 内置默认实现
  4. @payload:
  5. @moduleName 模块名.
  6. @method 方法名.
  7. @isSync 是否是同步方法.
  8. @params 调用模块方法时的参数.
  9. @frameDom frame 所在的 window dom对象.
  10. @winDom window 所在页面的 window dom 对象.
  11. @apiDom adapter 所在页面的 window dom 对象.
  12. @cbId 调用模块方法时,传递的回调函数的唯一标识.
  13. @callback 用于异步返回值的回调函数.(cbId, ret, err, del)=>{}
  14. @cbId 调用模块方法时,传递的回调函数的唯一标识.
  15. @ret 模块返回值.
  16. @err 错误信息.
  17. @del 调用后,是否删除此 cbId 对应的回调函数.
  18. 删除后,下一次基于同一 cbId调用callback,
  19. 将无法正确回传返回值.
  20. @return: 不作处理.如果不想处理某个模块方法, 应该显式返回字符串 'TO_NEXT_API_ADAPTER',
  21. 以便往上传播调用.
  22. */
  23. function apiadapter(payload) {
  24. /* TODO: 自定义的处理逻辑. */
  25. /* 默认不作处理. */
  26. return "TO_NEXT_API_ADAPTER";
  27. }

扩展建议

  • 异步方法的返回值,最好通过传入的 callbackcbId 传递.
  • 同步方法的返回值,可以直接 return 返回相关值.
  • 在处理 UI 类模块时,可在模块方法调用时添加一些自定义字段,以便于 apiadapter 能正确处理 UI 类模块的位置.如添加一个新的 parentDomId 字段,以便能自定义指定模块的父元素.

实例

实例中是演示了一款标准的使用APICloud平台开发的实例APP,以及这个实例APP在APICloud平台上,通过在云编译页面中选择“一键生成微信公众号”后,生成对应的微信公众号的网页包。

标准实例APP(APICloud原生应用)体验

iOS版本

微信公众号适配 - 如何快速将 APICloud 应用转换为微信公众号? - 图4

Anroid版本

微信公众号适配 - 如何快速将 APICloud 应用转换为微信公众号? - 图5

获取APICloud标准APP源码

https://github.com/apicloudcom/APICloud-7Days-Online-Training-Tutorials/tree/master/missfresh/widget

云编译生成的对应微信公众号体验

微信公众号适配 - 如何快速将 APICloud 应用转换为微信公众号? - 图6

获取对应的微信公众号源码

https://github.com/apicloudcom/APICloud-7Days-Online-Training-Tutorials/tree/master/missfresh/wechat_adapter_widget/

通过这个演示实例,大家可以更加深入的了解一款标准的APICloud应用,可以如何通过在APICloud平台上一键云编译来自动生成对应的微信公众号网页包。