2、详情页

3、生成结果页

4、生成海报

引导弹框

上新角色时如何让用户快速的看到角色，或者上新功能时如何让用户快速的体验新功能，这块做了一个引导弹框管理类，用来管理弹框。

1、引导弹框

2、引导弹框管理设计

当有新功能/新角色上线时 引导用户去体验，如果要做成可配置化，就需要解藕，当不同活动上线的时候也可以使用。

活动弹框包含两个部分，第一个是活动图片，第二个是关闭按钮，图片可以通过下发来配置，但是图片的点击跳转，最好也能够通过配置下发，关闭按钮的逻辑是统一的，点击之后就关闭当前弹框。

弹框数据结构

弹框列表

dialog1dialog2dialog3...dialogn

3、实现弹框管理器

//用于弹框的频控管理类
export function canShowDialogById(id) {
        //判断弹框是否可以展示
        const list = uni.getStorageSync('dialog_id_list') || [];
        // 判断 list 中是否包含 id
        const isIdInList = list.includes(id);
        // 如果 id 存在于 list 中，则返回 false；否则返回 true
        return !isIdInList;
}
//保存弹框展示
export function saveDialogTimeById(id) {
        uni.setStorageSync('dialog_id_list', id);
}
export function getDialogItem(list) {
        if (!list) {
                return null;
        }
        // 使用 find 方法查找符合条件的 item
        const foundItem = list.find(item => {
                return item && item._id && canShowDialogById(item._id);
        });
        console.log("get dialog item", foundItem);
        return foundItem || null;
}

2. 弹框类

<template>
        <view class="mask">view>
        <view class="modal">
                <image class="modal-image" :src="dialogItem.image" mode="widthFix" @click="gotoDetail">image>
                <image class="close-button" src="/static/images/icon_close.png" @click="closeModal">image>
        view>
template>
<script>
        export default {
                name: "custom-dialog",
                props: {
                        dialogItem: {
                                type: Object,
                                required: true
                        }
                },
                data() {
                        return {
                        };
                },
                methods: {
                        closeModal() {
                                console.log("close modal");
                                this.$emit('closeModal');
                        },
                        gotoDetail() {
                                this.$emit('gotoDetail');
                        },
                }
        }
script>
<style>
        .mask {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 9999;
        }
        .modal {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 80vw;
                /* 宽度为屏幕宽度的80% */
                text-align: center;
                z-index: 19999;
        }
        .modal-image {
                width: 100%;
                height: auto;
                /* 图片高度自适应 */
                z-index: 19999;
        }
        .close-button {
                margin-top: 20px;
                /* 调整关闭按钮与图片间距 */
                width: 40px;
                /* 调整关闭按钮的大小 */
                height: 40px;
                /* 调整关闭按钮的大小 */
                display: block;
                margin: 0 auto;
                z-index: 19999;
                /* 将关闭按钮水平居中 */
        }
style>

推荐角色

当用户生成当前角色后，给用户推荐其他角色，让整个流程更加完善，提高用户体验，不然用户生成一个角色之后又要返回去选其他角色

1、通过算法推荐，可以动态调整。

2、直接指定，方便配置下发。

1、推荐算法

1、活动角色

如果是活动角色，从活动列表中获取同性别角色。如果没有同性别角色，获取其他性别角色。

2、其他角色

优先找同朝代，同身份、同性别的角色，如果没有同身份的角色、找同性别不同身份的角色，如果没有同性别、不同身份的角色 查找其他朝代同性别、同身份的角色。

暂时无法在飞书文档外展示此内容

3、朝代关联关系

朝代关联

清朝

民国

明朝

宋朝

...

...

4、推荐角色剔除

对用户已经生成过的角色不再推荐,从推荐列表中进行剔除，不然达不到让用户体验多个角色的目标。

2、手动配置推荐角色

直接在数据库中关联下发推荐的角色，下发的推荐角色不可以更改，但是可以定制化推荐。

{
    "dynasty": "商周",
    "dynasty_label": "商周",
    "gender": "male",
    "image_list": [
        "https://env-00jxh1m2drwc.normal.cloudstatic.cn/hot-style/%E5%95%86/%E5%95%86%E5%91%A8-%E5%A7%AC%E5%8F%9101.png",
        "https://env-00jxh1m2drwc.normal.cloudstatic.cn/hot-style/%E5%95%86/%E5%95%86%E5%91%A8-%E5%A7%AC%E5%8F%9102.png"
    ],
     "recommend_list": [
        "1",
        "2"
    ],
    "intro": "姬发",
    "name": "姬发",
    "role": "武将"
    "count":0
}

3、新增角色生成次数数据

每个角色生成时，上报一条生成数据，用于推荐算法的使用，推荐时可以从其他用户使用最多的角色里面进行选择。新增count字段。用于统计角色生成次数

{
    "dynasty": "商周",
    "dynasty_label": "商周",
    "gender": "male",
    "image_list": [
        "https://env-00jxh1m2drwc.normal.cloudstatic.cn/hot-style/%E5%95%86/%E5%95%86%E5%91%A8-%E5%A7%AC%E5%8F%9101.png",
        "https://env-00jxh1m2drwc.normal.cloudstatic.cn/hot-style/%E5%95%86/%E5%95%86%E5%91%A8-%E5%A7%AC%E5%8F%9102.png"
    ],
    "intro": "姬发",
    "name": "姬发",
    "role": "武将"
    "count":0
}

4、随机推荐算法

用户已经使用过，如何推荐，用户未使用过，如何推荐。

根据选择偏好比例推荐：

根据用户选择历史人物的性别和朝代比例，结合用户的选择偏好，给出推荐列表。

避免重复推荐：

确保推荐的历史人物不与用户已选择过的历史人物角色重复。广告接入

广告接入采用尽量少打扰用户的方式，用户进入时不会看到广告，只有其他操作时才让用户看广告。

场景场景截图广告类型广告样式时机频控对应代码

列表页

原生广告-横幅

用户下滑获取更多时，插入广告，首页默认展示3个底图，上滑时 是否可以在第5个位置放广告？其他页面类似。

合成中

原生广告-格子

合成时放在合成文案的下面

每次合成时都展示

// wxml文件

开始合成

激励广告

用户点击开始穿越的时候展示只有看完广告之后才可以开始穿越，不然不可以穿越

看一次广告可以穿越几次？

小程序上线碰到的问题1、小程序备案

由于没有公司，也不想做个人小程序，所以弄了个人工商的小程序，按照微信的收费工商的一年300元。万能淘宝可以解决，懂的都懂。

2、算法备案

由于小程序涉及到换脸功能，需要AI算法备案，这个当时愁死了，但是最后还是解决了，也没花啥钱，在淘宝上问了一家开口5888元，最后不到100元搞定。

最后

喜欢的同学可以扫码体验一下，有想交流的也可以留言。