开放下载!《15分钟打造你自己的小程序》(内附详细代码)

《15分钟打造你自己的小程序》独家电子书上线啦!零基础开发你自己的支付宝小程序,手把手教你从入门到精通的宝典。ToDo待办事项小程序、个人相册小程序、花呗支付小程序、运动步数小程序、云笔记小程序,五大实操小程序云让你更懂云上生活~

PC端打开 https://developer.aliyun.com/topic/download?id=149 可直接下载!

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

开放下载!《15分钟打造你自己的小程序》(内附详细代码)

目录
开放下载!《15分钟打造你自己的小程序》(内附详细代码)

精彩导读

什么是小程序云?

小程序云是阿里云面向小程序场景提供的一站式云服务,帮助开发者实现一云多端的业务战略。开发者可通过小程序云支撑各类小程序前端,在一朵云内实现统一的资源管理、统一的数据运营和统一的业务设计。

小程序云提供小程序 Serverless 和小程序云应用服务,帮助小程序开发者降低研发和运维成本。

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

本教程介绍如何使用小程序Serverless服务开发一款简单的个人相册小程序。图片存储,是所有应用开发里最常见的场景之一。借助小程序云开发能力,可以提升功能开发效率,提高数据隐私保护能力。

步骤一:开发支付宝小程序

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

  1. 打开小程序开发者工具。
  2. 在左侧导航栏选择支付宝 > 小程序。
  3. 单击模板选取,然后单击开放能力页签,选择个人相册模板并单击下一步。

开放下载!《15分钟打造你自己的小程序》(内附详细代码)

  1. 设置项目名称和路径,然后单击完成。
  2. 打开手机支付宝App扫描弹出的登录二维码。登录后,选择已创建的支付宝小程序应用完成关联,然后单击确定。
  3. 当提示绑定阿里云账号时,单击前往绑定阿里云账号,然后在打开的验证页面选择一种账号验证方式并完成验证。或右键单击左侧的server|未关联目录,然后选择关联Serverless。

说明:确保您要绑定的阿里云账号已关联支付宝账号。如果尚未关联,在阿里云账号页面,单击第三方账号绑定绑定支付宝。
开放下载!《15分钟打造你自己的小程序》(内附详细代码)

  1. 在项目文件列表中找到app.js文件,配置以下信息,然后保存。

    • appId是小程序的ID。您可以在蚂蚁金服开放平台的支付宝小程序页面查看App ID。
    • spaceId、clientSecret和endpoint在小程序Serverless控制台创建服务空间后可以获得。

开放下载!《15分钟打造你自己的小程序》(内附详细代码)

步骤二:调试小程序

打开小程序模拟器,在弹出的服务授权框中仔细阅读《用户授权协议》后选择同意。
开放下载!《15分钟打造你自己的小程序》(内附详细代码)

小程序Serverless代码详解

  • 初始化
    在使用小程序Serverless服务前,需要您在小程序中安装小程序Serverless客户端SDK并初始化。小程序Serverless客户端SDK的更多信息请参见安装客户端SDK2.2版本
// client/app.js
import MPServerless from '@alicloud/mpserverless-sdk';

const mpserverless = new MPServerless({
  uploadFile: my.uploadFile,
  request: my.request,
  getAuthCode: my.getAuthCode,
}, {
  appId: ' ', // 小程序应用标识
  spaceId: ' ', // 服务空间标识
  clientSecret: ' ', // 服务空间 secret key
  endpoint: ' ' // 服务空间地址,从小程序Serverless控制台处获得
});          
  • 页面加载时添加授权
    在调用小程序Serverless服务前,需要先调用authorize接口请求授权,支付宝小程序的授权请求参数authProvider应为alipay_openapi, 更多authorize接口信息请参见authorize
// client/app.js
async onSubmit() {
await mpserverless.user.authorize({
      authProvider: 'alipay_openapi',
      // authType: 'anonymous'
})
},  
  • 全局使用serverless
    在小程序Serverless客户端SDK初始化完成后,可以将实例化的mpserverless对象放入App全局对象中,这样SDK就可以全局使用了。
// client/app.js
App({
  mpserverless,
}); 

当需要使用SDK时只需从全局对象中获取mpserverless,就可以调用了。
以下示例实现了在其他文件中调用小程序Serverless的数据库服务,向files集合中插入了一条数据。

// 其他文件调用
const { mpserverless } = getApp()
// 添加文件数据
mpserverless.db.collection('files').insertOne( { name: '数据表名称', userId: '数据表ID' })    
  • 读取文件数据
    以下代码实现了在页面加载完成后,调用find接口请求数据库,查询当前用户下的相册信息,更多find接口信息请参见find
async onReady() {
  const result = await mpserverless.db.collection('files').find({ userId: '用户id' })
  this.setData({
      files: result.result || [],
  })
},     
  • 选择本地图片
    以下代码实现了调用小程序的my.chooseImage接口拍照或从本地相册中选择图片,然后调用file.uploadFile接口将图片上传至小程序Serverless的文件服务中。更多信息请参见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);
      },
    });
  },     
  • 将图片保存到数据库
    以下代码实现了将包括图片的上传路径、图片描述等图片信息保存到云数据库photos集合中。
  async submit() {
    const obj = { urls: '图片路径', details: '图片描述', fileId: '文件id' }
    await mpserverless.db.collection('photos').insertOne(obj)
    my.navigateBack()
  },

藏经阁系列电子书

阿里云开发者社区——藏经阁系列电子书,汇聚了一线大厂的技术沉淀精华,爆款不断。
点击链接获取海量免费电子书:https://developer.aliyun.com/topic/ebook
开放下载!《15分钟打造你自己的小程序》(内附详细代码)

上一篇:公开下载 | 淘票票首次公开小程序开发秘籍,踩过坑才知道怎么走!


下一篇:免费下载 | “在家实践”指定教材!7天学会ECS