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

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,内容安全 1000次 1年
对象存储 OSS,恶意文件检测 1000次 1年
简介: 快来完成云开发Web应用实战营第四次打卡,有机会赢取云开发Web周边T恤

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

云开发Web应用实战营

第四次打卡攻略

打卡地址:https://c.tb.cn/F3.ZukF3e

嘀,老人卡!!!

操作七步走:

1、登陆支付宝开发者网站:https://open.alipay.com/ 创建一个小程序。名字随意,自己能看懂就好。完成后先放一边凉快几分钟。

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

Image 1587.png

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

Image 1588.png

仅需要AliyunOSSFullAccess管理对象存储服务(OSS)权限和 AliyunVIAPIFullAccess 管理视觉智能API的权限

Image 1582.png

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

3、创建OSS存储Bucket,这里除了填写个名字,选择一个区域,其它都不用操作了。

Image 1590.png

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

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

Image 1597.png

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

Image 1585.png

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

Image 1586.png

  • accessKeyIdaccessKeySecret就是来自上面第二步的子帐号AccessKey信息。
  • ossBucketName 来自上面第三步操作中的Bucket 名称

把这三个参数配置完成后就可以点击,开发部署了。进入Cloud IDE后,直接找到左上方第一个图标,点击后,可以看到左下角的部署,点击它等待几分钟即可。

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

Image 1591.png

找到绑定域名,复制。

Image 1592.png

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

Image 1583.png

6、下载支付宝小程序开发者工具https://opendocs.alipay.com/mini/ide/download 安装完成后把应用开列中的前端代码拉取回来,并用该开发者工具打开。(这是打卡必要截图的一步哦)

Image 1585.png

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

Image 1580.png

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

Image 1593.png

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

  • 问题一,是没有按照上面步骤操作,把程序绑定域名加入小程序的白名单。会提示:"{error: 12}"
  • 问题二,是子帐号的权限添加不正确,导致上传图片时提示,"RAM Access Reject",该错误是添加的AI权限不对。无法对图片进程处理。只需要重新添加授权即可。不需要重启程序。
  • 问题三,部署完后端程序后,在浏览器里访问程序的页面提示:{"ErrorCode":"AccessDenied","ErrorMessage":"Feature 'URL root path' is not supported for account 1480926209154855"}这个目前需要联系阿里工具人员添加FC函数计算的白名单即可。在白名单生效后访问页面的信息是这样的。

Image 1594.png

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

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

  • 第一张图就是大概就是这个界面了。

Image 1595.png

  • 第二张图嘛,我猜是它了
    Image 1596.png

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

目录
相关文章
|
7天前
|
弹性计算 Java 关系型数据库
Web应用上云经典架构实践教学
Web应用上云经典架构实践教学
Web应用上云经典架构实践教学
|
15天前
|
Kubernetes 安全 Devops
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
39 10
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
|
7天前
|
弹性计算 Java 数据库
Web应用上云经典架构实战
本课程详细介绍了Web应用上云的经典架构实战,涵盖前期准备、配置ALB、创建服务器组和监听、验证ECS公网能力、环境配置(JDK、Maven、Node、Git)、下载并运行若依框架、操作第二台ECS以及验证高可用性。通过具体步骤和命令,帮助学员快速掌握云上部署的全流程。
|
21天前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
28天前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
30 7
|
28天前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
34 5
|
1月前
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
42 4
|
7天前
|
弹性计算 负载均衡 安全
云端问道-Web应用上云经典架构方案教学
本文介绍了企业业务上云的经典架构设计,涵盖用户业务现状及挑战、阿里云业务托管架构设计、方案选型配置及业务初期低门槛使用等内容。通过详细分析现有架构的问题,提出了高可用、安全、可扩展的解决方案,并提供了按量付费的低成本选项,帮助企业在业务初期顺利上云。
|
1月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
|
1月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
38 2