10分钟开发一款"一键二次元化"AI小程序

1. 创建人像卡通化应用

1. 登录云开发平台。通过以下链接 https://workbench.aliyun.com/application 登录 阿里云-云开发平台 ，使用您自己的阿里云账号登录。如果还没有阿里云账号，请进行注册或者使用支付宝等账号进行登录。

1. 打开应用列表 ，如之前未使用过该开发平台，首次使用需要创建自己的团队。这时候填写自己的团队名以及选择规模即可，然后同意云开发平台协议即可进入应用列表界面。

1. 创建应用。点击应用列表界面上的“创建应用”，开发语言先选择“Java”，然后在计算服务中选择“FC” 应用的小程序人像卡通化的示例模板，如图所示。点击“下一步”后输入应用的名称和介绍完成创建。

1. 填写基础应用信息。确保选择所属的产品region在上海区域。

   

1. 开通云服务。查看应用依赖的云服务的开通情况，未开通的服务右键点击立即开通，在新标签打开所有服务开通页，根据提示开通。开通后应用卡片环境管理后面的小图标会变成绿色的已开通对勾形状，完成应用的创建。

1. 云服务资源访问授权。如果您还没有登录过进行过授权，需要您点击一下云开发平台页面左下角的授权图标，进行 授权 。提醒：应用上线后会直接调用相关的云服务，开始按量计费，如果不需要保留相关的应用，请在活动结束后及时下线应用！

2. 应用配置

由于要使用 OSS 和 阿里云视觉智能开放平台，要配置一下 OSS 和 AK(AccessKey ID)、SK(AccessKey Secret)

1. 登录Ram控制台( https://ram.console.aliyun.com/users )选择

   创建

   用户

   ，选择

   编程访问

1. 记录AK和SK的值。创建完成后

   复制

   AccessKey ID 和 AccessKey Secret记录下来，后面要用到

1. 为用户添加权限。点击

   添加权限

   赋予刚才创建的用户存储OSS 和视觉智能平台权限。

在左侧列表里找到并双击添加

AliyunOSSFullAccess

和

AliyunVIAPIFullAccess

权限

1. 创建OSS Bucket桶。进入Bucket列表（ https://oss.console.aliyun.com/bucket ）点击

   创建Bucket

   ，弹出框弹出是否开通版本控制选择

   不开通

   。填写Bucket名称，区域要和应用的区域相同。创建完后把 Bucket名称 记下来，后面会用到。

1. 回到云开发平台应用界面，找到刚才创建应用卡片，点击

   应用配置

   出现具体的配置项，分别填入刚才创建用户的

   AccessKey ID

   AccessKey Secret

   ，以及Bucket桶名称，点击确定，配置完成。

3. 后端服务开发部署

1. 点击

   开发部署

   ，打卡线上CloudIDE，等待加载完成出现开发界面。

   

2. 点击CloudIDE左侧第一个Tab调出部署插件，点击下方的部署按钮进行一键

   部署

   。部署完成后生成一个免费的临时域名，记录下该临时域名，后面会用到。

部署完成后访问临时域名，如果出现如下界面，说明部署成功，记录该临时域名。

1. Tips：域名失效后可以获取重新获取免费域名。免费域名只有30分钟有效时间。如果在小程序开发过程中超过30分钟，请点击应用卡片图标查看应用信息，在绑定域名下方点击刷新重新获取一个免费域名。

4. 小程序前端开发

1. 克隆代码到本地。在应用卡片界面，我们可以看到两个代码仓库，一个是后端代码（也就是Cloud IDE里面的），另一个是前端代码，点击应用卡片上的前端仓库地址，出现完整的代码仓库配置，点击代码仓库链接进入Codeup页面，需要通过 git 将前端代码克隆本地进行调试。

在Codeup页面上克隆下载代码压缩包到本地，在本机进行解压缩，后面会用到。

1. 安装小程序IDE客户端。点击链接在支付宝官网上下载小程序IDE的客户端并进行安装。 https://render.alipay.com/p/f/fd-jwq8nu2a/pages/home/index.html

1. 打开前端代码项目。安装完成后启动小程序IDE客户端，找到前端代码解压缩后文件夹的路径打开项目。

1. 开前端代码项目打开后找到appconfig.js文件，将develop 后面的网址改成上面后端服务应用部署成功后生成的免费域名。

1. 在小程序IDE的右上角，选择一种机型重新编译一下即可, 点击AI小程序界面的开始就可以进行头像动漫化测试

6. 运行测试。点击小程序界面的下方开始进行试用。上传一张个人头像或者照片，进行动漫化处理。

7. 手机预览和调试（高阶步骤可以不做）

a. 在小程序IDE右上角，点击模拟器上方

真机调试

或者

预览

-即可打包自动映射到当前登录用户支付宝客户端-界面加载卡通动漫画小程序，初次点击真机调试或者预览需要支付宝扫码授权登录。登录后提示账号还未创建小程序，点击

从PC创建

。

b. 在支付宝开放平台输入小程序名点击创建，创建完成后自动跳转到小程序详情页面，按照下图依次点击，

添加

后端服务白名单，在弹出框里输入云开发平台生成的后端服务域名，添加成功后回到小程序IDE界面。

c. 回到小程序IDE的界面，已经自动绑定了小程序。再次点击

真机调试

预览

会出现下方弹窗，弹窗内点击进行

编译并推送到手机

d. 保证手机支付宝在前台运行，小程序会自动显示在手机支付宝界面上。用户首次点击开始制作时会访问获取当前用户会员基础信息，点击允许后跳转到制作页面添加和上传图片。若是想更换当前图片文件即可点击右上方更换图标进行更新。