个人小程序免费制作(开放下载！《15分钟打造你自己的小程序》（内附详细代码）)

独家电子书《15分钟打造自己的小程序》上线啦！自己的支付宝小程序基础开发，手把手教你从入门到精通。ToDo待办小程序、个人相册小程序、花呗支付小程序、锻炼步数小程序、云笔记小程序，五款实用小程序云让你更好的了解云上生活~

在PC端打开https://developer.aliyun.com/topic/download? Id = 149可以直接下载！

点击下载
15分钟免费打造自己的小程序。

目录

目录

什么是小程序云？

小程序云是阿里云为小程序场景提供的一站式云服务，帮助开发者实现多云业务战略。开发者可以通过小程序云支持各类小程序前端，在一个云端实现统一资源管理、统一数据操作、统一业务设计。

小程序云提供小程序无服务器和小程序云应用服务，帮助小程序开发者降低R&D和运维成本。

试读:个人相册小程序开发

本教程介绍了如何使用applet无服务器服务开发一个简单的个人相册applet。图像存储是所有应用程序开发中最常见的场景之一。借助小程序云的开发能力，可以提高功能开发和数据隐私保护的效率。

第一步:开发支付宝小程序。

开发支付宝小程序项目请参考以下步骤:

说明：确保您要绑定的阿里云账号已关联支付宝账号。如果尚未关联，在阿里云账号页面，单击第三方账号绑定绑定支付宝。

说明:确保您要绑定的阿里云账户已经与支付宝账户关联。如果没有，在阿里云账户页面，点击绑定支付宝的第三方账户绑定。

打开小程序模拟器，在弹出的服务授权框中仔细阅读《用户授权协议》后选择同意。

打开小程序模拟器，仔细阅读弹出的服务许可框中的用户许可协议，然后选择同意。

//client/app . js 导入MPServerless from & # 39@ Ali cloud/MP server less-SDK & # 39；； const MP server less = new MP server less({ uploadFile:my . uploadFile， request: my.request， getAuthCode:my . getAuthCode， }，{ appId:& # 39；'，//applet应用ID spaceId:& # 39；'，//service空identity client secret:& # 39；'//service 空之间的密钥 端点:& # 39；'//service 空地址，从小程序无服务器控制台 })获取；加载页面时添加授权
在调用servlet无服务器服务之前，需要调用authorize接口请求授权。支付宝小程序的授权请求参数authProvider应该是支付宝_openapi。有关授权接口的更多信息，请参考授权。

//client/app . js async on submit(){ await MP server less . user . authorize({ auth provider:& # 39；支付宝_ openapi & # 39， //authType:& # 39；匿名& # 39； }) }，全局使用Serverless
小程序Serverless客户端SDK初始化后，可以将实例化的mpserverless对象放入app全局对象中，这样SDK就可以全局使用了。

//client/App . js App({ MP server less， })；需要使用SDK时，只需从全局对象中获取mpserverless，即可调用。
下面的示例实现了在其他文件中调用applet Serverless的数据库服务，并将一段数据插入files集合。

//其他文件调用 const { MP server less } = getapp() //添加文件数据 MP server less . db . collection(& # 39；文件& # 39；).insertOne({ name:& # 39；数据表的名称& # 39；，userId:& # 39；数据表ID & # 39})读取文件数据
下面的代码实现了页面加载后，调用find接口请求数据库，查询当前用户下的专辑信息。有关查找界面的更多信息，请参考查找。

async on ready(){ const result = await MP server less . db . collection(& # 39；文件& # 39；).查找({ userId:& # 39；用户id & # 39}) 这个。setdata ({ files: result。result || []， }) }，选择本地图片
下面的代码可以调用小程序的my.chooseImage接口进行拍照或者从本地相册中选择图片，具体见my.chooseImageuploadFile。

attach() { // 选取照片 my.chooseImage({ chooseImage: 1, success: res => { const path = res.apFilePaths[0]; const options = { filePath: path, headers: { contentDisposition: 'attachment', }, }; // 上传图片 mpserverless.file.uploadFile(options).then((image) => { const { imgs } = this.data imgs.push(image.fileUrl) this.setData({ imgs, }); }).catch(console.log); }, }); },

async submit() { const obj = { urls: '图片路径', details: '图片描述', fileId: '文件id' } await mpserverless.db.collection('photos').insertOne(obj) my.navigateBack() },版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。