1. 创建人像卡通化应用
- 登录云开发平台。通过以下链接 https://workbench.aliyun.com/application 登录 阿里云-云开发平台 ，使用您自己的阿里云账号登录。如果还没有阿里云账号，请进行注册或者使用支付宝等账号进行登录。
- 打开应用列表https://workbench.aliyun.com/application，如之前未使用过该开发平台，首次使用需要创建自己的团队。这时候填写自己的团队名以及选择规模即可，然后同意云开发平台协议即可进入应用列表界面。
- 创建应用。点击应用列表界面上的“创建应用”，开发语言先选择“Java”，然后在计算服务中选择“FC” 应用的小程序人像卡通化的示例模板，如图所示。点击“下一步”后输入应用的名称和介绍完成创建。
workbench.aliyun.com/application
百阿里云
云开发训练营
帮助
云开发社区
wom
新建应用
元风格化小程序
产品列表
Step3
Step2
Step1
云服务管理
填写基础信息
小程序人像...
应用列表
通过示例模板或解决方案快速开始搭建应用
解决方案
开发语言
PHP
Nodejs
Python
Java
成员列表
计算服务
其他
ASK?
SAE?
FC?
解决方案
示例模板
MobILe
Mobile
小程序人像卡通化
(FCSpringboot)
下一步
取消
- 填写基础应用信息。确保选择所属的产品region在上海区域。
workbench.aliyun.com/application
百阿里云
云开发训练营
帮助
云开发社区
wom
新建应用
元风格化小程序
产品列表
Step1
Step3
Step2
小程序人像...
云服务管理
应用列表
填写基础信息
所层产品
二次元风格化小程序
解决方案
成员列表
应用名称
二次元小程序
Region
华东2(上海)
应用介绍
二次元小程序
应用图标
上传应用图标尺寸规格300kb
Codeup代码仓库
输入要绑定的codeup代码仓库地址
上一步
下一步
授权
新建应用
Step3
Step2
Step1
云服务管理
填写基础信息
小程序人像...
所属产品
默认产品
应用名称
二次元小程序
华东2(上海)
Region
应用介绍
二次元小程序
应用图标
上传应用图标尺寸规格300kb
Codeup代码仓库
输入要绑定的codeup代码仓库地址
下一步
上一步
- 开通云服务。查看应用依赖的云服务的开通情况，未开通的服务右键点击立即开通，在新标签打开所有服务开通页，根据提示开通。开通后应用卡片环境管理后面的小图标会变成绿色的已开通对勾形状，完成应用的创建。
新建应用
Step2
Step1
Step3
小程序人像...
填写基础信息
云服务管理
依赖的云服务
参考价格
已开通
容器镜像服务/AlicloudContainerRegistry
默认实例免费详情
立即开通
API网关/APIGateway
0.06元/万次详情
已开通
函数计算/FunctionCompute
0.0133元/万次详情
立即开通
日志服务/LogService
0.0115元/GB/天详情
已开通
免费详情
专有网络/VirtualPrivateCloud
完成
上一步
- 云服务资源访问授权。如果您还没有登录过进行过授权，需要您点击一下云开发平台页面左下角的授权图标，进行授权。提醒：应用上线后会直接调用相关的云服务，开始按量计费，如果不需要保留相关的应用，请在活动结束后及时下线应用！
2. 应用配置
由于要使用 OSS 和 阿里云视觉智能开放平台，要配置一下 OSS 和 AK(AccessKey ID)、SK(AccessKey Secret)
- 登录Ram控制台(https://ram.console.aliyun.com/users)选择
创建用户，选择编程访问
ram.console.aliyun.com/users/new
百阿里云
搜索文档,控制台,API,解决方案和资源
?
资用
工单
备案
官网
支持
企业
简体
RAM访问控制
RAM访问控制用户/创建用户
创建用户
概览
人员管理
用户账号信息
显示名称
登录名称
用户组
@1900482857636068.onaliyun.com
xl_alipay
xL_alipay
用户
+添加用户
设苦
访问方式
SsO管理
用户使用账号密码访问阿里云控制台
控制台访问
权限管理
启用AccessKeyID和Accesskeysecret,支持通过API或其他开发工具访问
编程访问
国
授权
返回
确定
口
权限策咯管理
品
RAM角色管理
OAuth应用管理(公测中)
- 记录AK和SK的值。创建完成后
复制AccessKey ID 和 AccessKey Secret记录下来，后面要用到
RAM访问控制用户/创建用户
创建用户
若开通编程访问,请及时存Accesskey信息,页面关闭后将无法再次获取信息.
用户信息
下载CSV文件
操作
状态
登录密码
AccessKeyID
AccessKeySecret
用户登录名称
无
Lu5kdV
复制
成功
xl_alipay@1900482857636068.onaliyun.com
j5We69
LTAI4
添加权限
添加到用户组
- 为用户添加权限。点击
添加权限赋予刚才创建的用户存储OSS 和视觉智能平台权限。
RAM访问控制
用户
用户
RAM用户是一个身份实体,它通常代表您的组织中雷要访问云资源的人员或应用程序
通常的操作步骤如下:
1.创建用户,并为用户设查登录密码户登录控台场)创建Accesskey应用程序调用A问场).
2.添加用户到用户组(需要先在创建用户组并完成对用户组的授权)
创建用户
输入登录名,用户ID或AccessKeyID
用户登录名称/显示名称
备注
操作
创建时间
xl_alipay@1900482857636068.onaliyun.co
2021年1月4日12:29:10
添加到用户组
添加权限
xL_alipay
在左侧列表里找到并双击添加 AliyunOSSFullAccess 和 AliyunVIAPIFullAccess 权限
添加权限
云账号全部资源
指定资源组
请选择或输入资源组名称进行搜索
被授权主体
X
xlalipay@1900482857636068.onaliyun.com
选择权限
系统策略
新建权限策略
自定义策略
清空
已选择(2)
国?
请输入权限策略名称进行模糊搜索.
AliyunOssFullAccess
权限策略名称
备注
AliyunVIAPiFullAccess
AilyunvisionAIReaaumlyAcc...
只读访问省能视见A务ViSionAi)的y权X限
管理lot固件安全检测(FSS)的权限
AliyunFSSFullAccess
只读访问Iot固件安全检测(FSS)的权限
AliyunFSSReadOnlyAccess
管理视觉智能API的权限
AliyunVIAPiFullAccess
确定
取消
- 创建OSS Bucket桶。进入Bucket列表（https://oss.console.aliyun.com/bucket）点击
创建Bucket，弹出框弹出是否开通版本控制选择不开通。填写Bucket名称，区域要和应用的区域相同。创建完后把 Bucket名称 记下来，后面会用到。
创建Bucket
创建存储空间
注意:Bucket创建成功后,您所选择的存储类型,区域不
不支持变更.
Bucket名称
alipayss
8/63
地域
华东2(上海)
相同区域内的产品内网可以互通:订购后不支持更换区域,请谨慎选择.
Endpoint
osS-cn-shanghai.aliyuncs.com
存储类型
低频访问存储
标准存储
归档存储
标准:高可靠,高可用,高性能,数据会经常被访问到.
如何选择适合您的存储类型?
同城冗余存储
关闭
启用
Hot
0sS将您的数据以几余的方式存储在同一区域(Region)的3个可用区(on)中.提供机房
级容灾能力.更多详情请参见同城冗余存储.
同城几余存储能提高您的数据可用性,同时会采用相对较高的计费标准.请查看
价格详情.同城冗余存储属性开启后,将不支持关闭.
版本控制
开通
不开通
Hot
开启版本控制特性后,针对数据的覆盖和删除操作将会以历史版本的形式保存下来.
了解版本控制.当前未开启版本控制功能,数据删除或被覆盖后将无法找回.
读写权限
公共读
私有
公共读写
七:叫去这门根你童两点八江
取消
确定
- 回到云开发平台应用界面，找到刚才创建应用卡片，点击
应用配置出现具体的配置项，分别填入刚才创建用户的AccessKey ID和AccessKey Secret，以及Bucket桶名称，点击确定，配置完成。
应用配置
二次元小程序
二次元小程序@二次元风格化小程序
88
二次元小程序
预发环境
线上环境
日常环境
查看应用信息
绑定域名
线上[Offline]
日常[Offline]
预发[Offline]
经过授权能...
LTAI4CC
accessKeyld
开发部署
Tmmmvr1uyir
经过授权能...
LU5LHES
accesskeySecret
应用配置
成员管理
环境管理
和endpoint...
ossBucketName
li
代码仓库:git@codeup.aliyun.com:51
批量添加环境变量
添加一条环境变量
前端仓库:git@codeup.aliyun.com1..
创建时间:2021-01-0412:45:53
确定
取消
3. 后端服务开发部署
- 点击
开发部署，打卡线上CloudIDE，等待加载完成出现开发界面。
二次元小程序@二次元风格化小程序
88
二次元小程序
查看应用信息
日常[Offline
预发[Offline]
线上[Offline]
]
开发部薯
成员管理
环境管理
应用配置
代码仓库:
git@codeup.aliyun.com:5ea06182f89c9700014a...
前端仓库:
git@codeup.aliyun.com:5ea06182f89c9700014a...
创建时间:
2021-01-0412:45:53
- 点击CloudIDE左侧第一个Tab调出部署插件，点击下方的部署按钮进行一键
部署。部署完成后生成一个免费的临时域名，记录下该临时域名，后面会用到。
WwoRbendhpealyuncom
编辑
文件
选择
帮助
视图
application-dev.yml
部署
测试
Artifactupload
店W
main
config
application-dev.yml
src
resources
日常环境
aliyun:
#芋州州誉村井井书料村共共并扎并拌AKK配#补补补并林拼并#并#
W寸u面10O
#拼护排护相排件排件排指排排排需要开通人脸动浸化使用限带排指供排排并护芋排件拼护
路由,函数映射表
alc:
regioncn-shanghai
ANY
image
accesskeyId:$faccesskeyId
accesssecret:$laccesskeySecret
添加一条路由
从文件同步
保存到文件,
#州州誉街井粉井州折推州折街折原图片传OSS配州料
众
用户需知:部署调试,将会在您为此应用开通的云服务
05s:
上,按照该应用所属解决方案的描述去创建和使用具体的
输出
CloudWorkbench
资源.
116:59:59应用:一次元小程序
外肉让可NA卸仕务完!
开始[云函数部智任务]
应用:
[16:59:59]
二次元小程序
部智镜像:registry-ypc.cn-shh/
[17:00:40]应用:
二次元小程序
workbench2021010400469211:1609837695
[17:00:00]
准备保活函数..
应用:二次元小程序
应用:
二次元小程序
[17:00:05]
[云函数部舍任务]热行中...
二次元小程序
[17:00:08]
[云函数部智任务]执行中...
应用
二次元小程序
[17:00:11]应用:
[云函数部署任务]执行中..
[云函数部署任务]执行成功!
应用:
[17:00:14]
二次元小程序
开始[网关域名绑定任务]
应用:
[17:00:15]
二次元小程序
[网关域名绑定任务]执行成功!
二次元小程序
应用:
[17:00:19]
域名:https://testiyjduutimy407gha.wrkbechacom
应用:
[17:00:19]
二次元小程序
级域名
http://
C83530c0sangnai.actouoa.cm
1f6d5651d364a6b9adccbob83
.com进行测试验证(还需要进行OVAE解折,且罐名生效有避迟,如果法访问请的心等待)
timbiy407Lgha.workbechap.m进行
testiyjduutim
应用:二次元小程序
[17:00:20]
云开发应用[TEST]环境部暑成功!
部舌
调试控制台
终端
输出
行1.列1空格:2LFUTF8统文本
ymasterS飞预览
部署完成后访问临时域名，如果出现如下界面，说明部署成功，记录该临时域名。
testlyjduutimiy407gha.workbenchapi.com
WhitelabelErrorPage
Thisappicationhasnoexplicitmappingfor/erorsoyourseingthisaack
TueJan0509:02:44UTC2021
Therewasanunexpectederror(type-NotFound,sttu404)
Nomessageavailable
- Tips：域名失效后可以获取重新获取免费域名。免费域名只有30分钟有效时间。如果在小程序开发过程中超过30分钟，请点击应用卡片图标查看应用信息，在绑定域名下方点击刷新重新获取一个免费域名。
二次元小程序应用信息
二次元小程序@二次元风格化小程序
88
所属产品:
二次元风格化小程序
二次元小程序
Rogion
cn-shanghai
二次元小程序
应用名称:
查看应用信息
应用ID
2021010400469211
创管时间:
2021-01-0412:45:53
日常
预发[Offline]
线上[Offline]
创建人员:
xlhuang2020
二次元小程序
应用介绍:
开发部薯
码仓库:
应用账单
运维监控
gitcodeupalyncom5e01829900
解决方索:
小程序人像卡通化(FCSpringboot)
环境管理
应用配置
成员管理
鼓上环娟
预发环填
日常环城
已都
部吾状态:
代码仓库:
git@codeup.aliyuncomea0682899700014a...
刷新
绑定城名:
git@codeup.aliyun.com:5ea06182f89c9700014a..
前端仓库:
创建时间:
2021-01-0412:45:53
取消
确定
4. 小程序前端开发
- 克隆代码到本地。在应用卡片界面，我们可以看到两个代码仓库，一个是后端代码（也就是Cloud IDE里面的），另一个是前端代码，点击应用卡片上的前端仓库地址，出现完整的代码仓库配置，点击代码仓库链接进入Codeup页面，需要通过 git 将前端代码克隆本地进行调试。
代码仓库克隆下载配置
二次元小程序@二次元风格化小程序
二次元小程序
应用名称
报6
二次元小程序
代码仓库
gigcodoupaynm
查看应用信息
请输入密钥
密钥
日常[Offine]
线上[Offline]
预发[Offline]
开发部署
运维监控
应用账单
标题
成员管理
环境管理
应用配置
已有SSH密钥(1)
代码仓库:git@codeup.aliyuncom:1
标题:workbench_auto
前端仓库:git@codeup.allyun.com1a.
中
shYSAABNACHCDAOABABAOCMCANX6E5CDTHINGMISLS
创建时间:2021-01-0412:45:53
取消
添加SSH密钥
在Codeup页面上克隆下载代码压缩包到本地，在本机进行解压缩，后面会用到。
COdeUPAlYUNCOM501889900042021
搜索当前库或跳转
用
首页>FErepo_2021-01-04_20210...
体验透镜
送请
分支1
合并请求
只成员
概览+
流水线
标签
安全
报表
源文件(2.42M)
提交
master
+创建流水线
克隆/下载
FErepo2021-01-042021010400469211
企业管理员
企业可见
WebIDE
SSH
HTTPS
FErepo2021-01-0420210104004692
autocommitfromcloudworkbench
xlhuang2020提交于昨天13:01
assets/images
管理SSH密钥?立即查看
pages
util
git@codeup.aliyun.com:5ea06182f8
app.acss
下载TAR
下载ZIP
appjs
app.ison
- 安装小程序IDE客户端。点击链接在支付宝官网上下载小程序IDE的客户端并进行安装。https://render.alipay.com/p/f/fd-jwq8nu2a/pages/home/index.html
- 打开前端代码项目。安装完成后启动小程序IDE客户端，找到前端代码解压缩后文件夹的路径打开项目。
小程序
打开项目
支付宝
支付宝小程序是一种全新的开放模式,它可以被便捷地获取和传,为终端用户提供更优的用户体验.查看更多
小程序
小程序插件
模版选取
最近使用
服务直达部件
13:28
淘宝
卡通动漫画化
中容益
ANIMEST
钉钉
颜
键动曼
高德
已失效
香港版支付宝
天猫精灵
FErepo_20
FErepo_
/Users/xi/Downloads/FErepo_
/Users/xi/Downloads/FErepo_2
支付宝loT
- 开前端代码项目打开后找到appconfig.js文件，将develop 后面的网址改成上面后端服务应用部署成功后生成的免费域名。
Pot16020101020001
<I>
普通编译
选择关联小程序
小程序
编辑
云开发
调试器
上传
详情登录
预览
模拟器
真机调试
点击这里重新编译X
资源管理器
HD中
appconfig.js
100%
打开的编辑器
appconfigjs
支付宝
13:08
100%
appconfig-jsappconfigjs
卡通动漫画化
收藏
*半
*小程序当前运行的版本
*develop:开发版.
*tria:体验版.
FEREPO_2021-01-042021010400469211...
*release:发布版.
ANIMESTYLE
一键动漫
颜
gray:灰度版
assets
paqes
util
importenvfrom/util/env-config
11
app.acss
import[
upload_tile-api
app./s
13
person-cartoon-api
appjson
from'/util/common';
JSappconfig.js
mini.projectjson
这个位置得环境根据需求处理
consTpathNaMe
snapshot.png
WAR1813
"http://testiyjduutimiy3yjmrd.obenchap.cm
develop:"htt
deveLop:"http://127.0.0.1:8080"
/develop:
http://30.25.108.95:8080
http://30.25.108.132:9013影开发版
/deveLOp:
triat:'体验版
版//体验版
release:发布版,//发布版
gray:"灰度版,/灰度版
水'developli
ienvl;//此处自行修改
大纲
[apathName
1上传path
develop
'spathName]$fupLoad_file_ap1)
exportconstupload_file_url
trial
release
调试器
问题
输出
Devserver:Done行10列37格2LFUTF8Javascipt
自动刷新
页面路径
pages/index/index
- 在小程序IDE的右上角，选择一种机型重新编译一下即可, 点击AI小程序界面的开始就可以进行头像动漫化测试
太
普通编译
</>
清缓存
真机调试
模拟器
编辑器
上传
预览
详情
调试器
LD中
100%
iPhone5
iPhone
17:25
100%
320X568Dpr2.0
收藏
iPhone6
序当前运行的版本
eLop:开发版.
375x667Dpr:2.0
动漫
at:体验版.
iPhone6Plus
ease:发布版.
灰度版
414X736Dpr:3.0
iPhone7
envfrom'./util/env_config';
375x667Dpr:2.0
iPhone7Plus
d_file_api,
on-_cartoon_api
/util/common'"
位置得环境根据需求处理
pathNaMe二
lop:"http://testiyjduutim8iy407gha.wkbecha.com"
evelop:"http://127.0.0.1:8080"
evelop:"http://30.25.108.95:8080,斌
evelop:"http://30.25.108.132:9013发版
:体验版//体验版
ase:发布版,//发布版
灰度版,/灰度版
elop'lienv]://此处自行修改
path
constupLoad_fileurl
L$tpathName]stupload_file_api'
开始
SAOO
6. 运行测试。点击小程序界面的下方开始进行试用。上传一张个人头像或者照片，进行动漫化处理。
1401
100%
卡通动漫画化|
娘
undefined
提交照片
1401
100%
<卡通动漫画化
收
urdehined
下载图片
7. 手机预览和调试（高阶步骤可以不做）
a. 在小程序IDE右上角，点击模拟器上方真机调试或者预览-即可打包自动映射到当前登录用户支付宝客户端-界面加载卡通动漫画小程序，初次点击真机调试或者预览需要支付宝扫码授权登录。登录后提示账号还未创建小程序，点击从PC创建。
购D中
appconfigojs
iPhone5
appcor
创建小程序
支付宝
1234567
卡通
当前账号下还未创建小程序,请点击下方按钮创建小程序;创建成功后可
在左上角"选择关联小程序"中切换.
ANIM
从PC创建
从支付宝扫码创建
10
创建
11
12
13
14
15
16
/这个位置得环境根据需求处理
constpathName
17
18
develop:"http://testiyjduutim81y41uvd.workbenchapi.com"
//develop:"http://127.0.0.1:8080"
19
/develop:"http://30.25.108.95:8080斌
20
开发版
21
develon:http://30.25.108.132:9013//影
b. 在支付宝开放平台输入小程序名点击创建，创建完成后自动跳转到小程序详情页面，按照下图依次点击，添加后端服务白名单，在弹出框里输入云开发平台生成的后端服务域名，添加成功后回到小程序IDE界面。
品手机查
人脸动漫2ID:2021002121635009
设置
开发服务
版本管理
开发设置
基础设置
多端发布支持
第三方授权管理
AMPE开放计划
灰度管理
开发信息
云监控
暂无
设置
接口加签方式:
云服务
IP白名单:
未设置
设置
质量洞察
支付宝网关:
https://openapi.alipay.com/gateway.do
代码托管
设置
未设置
应用网关:
安全信息
消息服务
设置
接口内容加密方式:
开发设置
NEW
服务器域名白名单
添加
小程序管理
还可以添加0个
注意:域名添加或除后仅对新版本生效,老版本仍使用修改前的域名配置
c. 回到小程序IDE的界面，已经自动绑定了小程序。再次点击真机调试或者预览会出现下方弹窗，弹窗内点击进行编译并推送到手机。
211-mastere98/6/296f813161010a0687ce8001967002
一小程序升友者工具
appconfig?Js-
B
</>
普通编译
人脸动漫2
云开发
清缓存
预览
详情
编辑器
模拟器
真机调试
调试器
上传
酌D中
appconfigjs
iPh
自动预览
扫码预览
appconfig.js
appconfig.js
+2m寸
**
小程序当前运行的版本
*develop:开发版.
水trial:体验版.
42021010400469211...
*release发布版.
*gray:灰度版
*
小程序会自动显示在支付宝
请保持支付宝在手机前台运行
10
importenvfrom/util/env_config
import(
需要版本10.1.70+的客户端
12
upload_hileapi,
13
person-cartoon_api
14
from/util/common';
编译并推送到手机
15
json
这个位置得环境根据需求处理
17
constpathName二
构建日志
18
develop:"http://testiyjduutim8yud.orkbenchap.com"
Idevelop:"http://127.0.0.1:8080"
19
//develop:"http://30.25.108.95:8080
deveLop:"http://30.25108132:9013影开发版
21
22
trial:体验版体验版
23
release:"'发布版,//发布版
d. 保证手机支付宝在前台运行，小程序会自动显示在手机支付宝界面上。用户首次点击开始制作时会访问获取当前用户会员基础信息，点击允许后跳转到制作页面添加和上传图片。若是想更换当前图片文件即可点击右上方更换图标进行更新。
1403
100%
卡通动漫画化|
妆
urdehined
提交照片
100%
1403
<卡通动漫画化
收
urdefined
下载图片
