交叉营销插件
1 展示规范
设定屏幕宽度：750
1.1 单图+轮播
1.2 横向 3|4 图
1.3 全部展开
2 素材规范
小程序/小游戏要接入交叉营销，需提供以下几个资源：
2.1 图标
- 144×144，PNG，直角，不透明，可以是游戏 Logo，建议不要添加文字。
示例 1：游鱼玩
示例 2：全民耍剑
2.2 广告语
- 1-6 个字（英文算半个），默认使用游戏名称，允许自定义。
示例 1：更多好玩~
示例 2：一起来耍剑！
2.3 其它
- appId：小程序/小游戏 appId
- path：打开的页面路径，可选，如果为空则打开首页
- extraData：需要传递给目标小程序的数据，可选
参考 小程序官方文档
3 资源
3.1 素材
3.2 代码
3.2.1 NPM 包
3.2.2 独立文件
4 使用说明
4.1 第一步：引入 SDK
可以使用 NPM
npm i --save @minipx/recommender也可以直接将上述的独立文件（根据实际需要选择一款即可）拷贝到项目内
4.2 第二步：使用 SDK
// 使用 ES6 语法
import Recommender from '@minipx/recommender';
// 或者：
// import Recommender from './path/to/recommender.umd';
// 使用 ES5 语法
const Recommender = require('@minipx/recommender');
// 或者：
// const Recommender = require('./path/to/recommender.umd');
new Recommender({
appId: '<当前小游戏的 appId>',
openId: '<当前登录用户的 openId>',
// 数据加载完成后的回调
onReady: function(games, recommender) {
// games 为 null 或数组
// recommender 为当前营销组件实例
if (games && games.length) {
// 构造本地的 UI
} else {
// 可能什么也不需要做
}
},
// 默认每八秒切换下一个 App
onChange: function(game, recommender) {
if (game) {
// 构造本地的 UI，显示游戏图标/名称
// 绑定点击事件，调用 recommender.navigateTo(game)
} else {
// 可能什么也不需要做
}
},
});重要提示：
游戏间的跳转，必须使用 SDK 提供的 navigateTo 接口，否则无法准确统计数据
recommender.navigateTo(game)4.2.1 单图+轮播
new Recommender({
...
// 默认每八秒切换下一个 App
onChange: function(game, recommender) {
if (game) {
// 构造本地的 UI，显示游戏图标/名称
// 绑定点击事件，调用 recommender.navigateTo(game)
} else {
// 可能什么也不需要做
}
},
});4.2.2 横向 3|4 图
new Recommender({
...
// 数据加载完成后的回调
onReady: function(games, recommender) {
// games 为 null 或数组
// recommender 为当前营销组件实例
if (games && games.length) {
// 获取随机的 n 个游戏
const random3games = recommender.getGames(3);
// const random4games = recommender.getGames(4);
// 构造本地的 UI
} else {
// 可能什么也不需要做
}
},
});4.2.3 全部展开
new Recommender({
...
// 数据加载完成后的回调
onReady: function(games, recommender) {
// games 为 null 或数组
// recommender 为当前营销组件实例
if (games && games.length) {
// 构造本地的 UI
// 创建按钮，绑定点击事件，点击后展开显示所有的游戏
} else {
// 可能什么也不需要做
}
},
});4.3 第三步：配置 game.json
在 game.json 中配置 navigateToMiniProgramAppIdList，内容为允许跳转的 appId 列表
{
...
"navigateToMiniProgramAppIdList": [
"wxb17a18edcbb93d0a",
"wx644ce1d1c71f5a61",
"wx88d09e8d4cff63ef",
"wx954573275883779c",
...
]
}P.S. 请询问支持人员获取可以跳转的 AppID 列表
4.4 第四步：配置 request 合法域名
在微信小游戏的开发者后台，配置 request 合法域名
https://box.minipx.cn
https://log.minipx.cn