天天看点

云开发Web应用实战营第四次打卡攻略

为了那件耀眼的T恤,我决定拼一把。

云开发Web应用实战营

第四次打卡攻略

打卡地址:

https://c.tb.cn/F3.ZukF3e

嘀,老人卡!!!

操作七步走:

1、登陆支付宝开发者网站:

https://open.alipay.com/

创建一个小程序。名字随意,自己能看懂就好。完成后先放一边凉快几分钟。

2、创建一个子帐号(降低风险)

云开发Web应用实战营第四次打卡攻略

添加完成后,需要给该用户添加权限;

云开发Web应用实战营第四次打卡攻略

仅需要

AliyunOSSFullAccess

管理对象存储服务(OSS)权限和

AliyunVIAPIFullAccess

管理视觉智能API的权限

云开发Web应用实战营第四次打卡攻略

然后在认证管理,点击最下边的创建AccessKey,完成后记得把相应的

AccessKey ID

AccessKey Secret

保存下来。

3、创建OSS存储

Bucket

,这里除了填写个名字,选择一个区域,其它都不用操作了。

云开发Web应用实战营第四次打卡攻略

完成OSS创建后可以得到Bucket 名称。

4、创建应用(注意自己的所在区,因为它跟上面的OSS存储区域要对应),应用名称随便能看懂就好。

云开发Web应用实战营第四次打卡攻略

创建应用时注意这个Region可用区是不是跟OSS的区域一致。

云开发Web应用实战营第四次打卡攻略

完成后这里需要对应用于的配置添加几个参数。

云开发Web应用实战营第四次打卡攻略
  • accessKeyId 和accessKeySecret就是来自上面第二步的子帐号

    AccessKey

    信息。
  • ossBucketName 来自上面第三步操作中的Bucket 名称

把这三个参数配置完成后就可以点击,开发部署了。进入

Cloud IDE

后,直接找到左上方第一个图标,点击后,可以看到左下角的部署,点击它等待几分钟即可。

半根烟的时间过去后,可以看到部署成功,同时可以看到一个绑定的临时域名,可以直接复制这个临时域名,或者回到应用列表里点击,查看应用信息获取域名。

云开发Web应用实战营第四次打卡攻略

找到绑定域名,复制。

云开发Web应用实战营第四次打卡攻略

5、回到支付宝开发者网站,点击刚才创建的小程序。找到开发设置,把复制的域名添加到白名单完成操作。

云开发Web应用实战营第四次打卡攻略

6、下载支付宝小程序开发者工具

https://opendocs.alipay.com/mini/ide/download

安装完成后把应用开列中的前端代码拉取回来,并用该开发者工具打开。(这是打卡必要截图的一步哦)

云开发Web应用实战营第四次打卡攻略

由于我不知道怎么在IDE里直接拉取代码,所在手动下载后,在IDE打开。

云开发Web应用实战营第四次打卡攻略

在IDE里打开代码,工具会自动编译,并可以看到右边的模拟器画面。

云开发Web应用实战营第四次打卡攻略

点击开始游戏后,可能会遇到以下一些奇怪问题。

  • 问题一,是没有按照上面步骤操作,把程序绑定域名加入小程序的白名单。会提示:"{error: 12}"
  • 问题二,是子帐号的权限添加不正确,导致上传图片时提示,"RAM Access Reject",该错误是添加的AI权限不对。无法对图片进程处理。只需要重新添加授权即可。不需要重启程序。
  • 问题三,部署完后端程序后,在浏览器里访问程序的页面提示:

    {"ErrorCode":"AccessDenied","ErrorMessage":"Feature 'URL root path' is not supported for account 1480926209154855"}

    这个目前需要联系阿里工具人员添加FC函数计算的白名单即可。在白名单生效后访问页面的信息是这样的。
云开发Web应用实战营第四次打卡攻略

如果可以看到这个页面,恭喜你,小程序成功部署。

7、最后,最重要的就是截图,完成打卡

  • 第一张图就是大概就是这个界面了。
云开发Web应用实战营第四次打卡攻略
  • 第二张图嘛,我猜是它了
    云开发Web应用实战营第四次打卡攻略

好了,完成上面操作表示本次实验成功。离T恤又进一步了。

继续阅读