今天遇到一个在Cocos 导出的h5页面里面需要加上打开微信小程序链接的需求。这个是一个很常见的需求。下面小实验这个过程。首先想到h5，不得不提一下微信开发提供的JSSDK。这个js库提供一些跳转小程序的附加能力。要使用这个库。我们可以在我们打包出的html 引入https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
实验过程，我们先建一个cocos 测试用例，用的是2d空模板。这次实验版本用3.73版本。（3.8x也是无问题）在场景创建一个按钮，并在按钮加上一个监听跳转。这个方法从官方文档jssdk提供。代码如下 window['wx'].miniProgram.navigateTo({url: "/pages/test/test"});
import { _decorator, Button, Component, Node, NodeEventType } from 'cc';const { ccclass, property } = _decorator;@ccclass('TestSDK')export class TestSDK extends Component { @property({type:Button}) public wxBtn:Button; start() { this.wxBtn.node.on(NodeEventType.TOUCH_START,this.onJumpPage,this); } private onJumpPage(){ if(window['wx']){ window['wx'].miniProgram.navigateTo({ url: "/pages/test/test", success: function() { console.log("跳转成功"); }, fail: function(err) { alert("跳转失败：" + JSON.stringify(err)); } }); } } update(deltaTime: number) { }}
但是在使用的时候需要判定一下window['wx'] 是否存在避免出错。使用jssdk 打开test的页面。编写完，将脚本挂在canvas 下，拖动按钮，完成这个监听流程。 <scripttype="text/javascript"src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
由于每次打包会被删除html文件，可以提前创建一个模板避免每次删除后再添加情况。Cocos 的资料准备完成后。接下来就需要在小程序客户端进行测。准备好自己的小程序。官方提供是测试号。小程序当中，加入web-view的组件，填写cocos的测试地址。代码如下，注意，这个代码只是临时的地址。一般情况下是走https的域名。本地没有证书，就用这样本地测试即可。<web-viewsrc="http://192.168.52.1:7456/web-mobile/web-mobile/index.html"/>
小程序创建2个页面，一个index,一个是test跳转用的。test是我们跳转的页面。确保app.json 的页面存在。这个时候想测试效果。需要关闭校验https和业务域名，方便调试。在微信开发端就可以实现跳转。完成2个步骤。这样就可以测试到cocos 里面可以借助jssdk 实现跳转小程序页面的目的。代码并不多，实验过程非常容易能实现出来。关键的地方是借助webview 搭配jssdk 实现跳转小程序页面了。webview可以载入cocos 导出的h5小游戏。h5借助jssdk提供的能力可以和小程序进行交互。这个实验在没有业务域名和https校验下实现。好了，今天实验就到这里。
