支付宝小程序入门

左手的ㄟ右手 2022-03-06 15:34 657阅读 0赞

###  ###

*   *  概述
     *   *  1、平台入驻
         *   *  1.1、支付宝端
             *  1.2、钉钉端
         *  2、个人小程序
         *   *  2.1、什么是个人小程序
             *  2.2、个人小程序的账号要求
         *  3、个人小程序VS企业小程序
         *   *  3.1、相同点
             *  3.2、差别
             *  开发个人小程序文档
             *   *  文件目录
                 *   *  json
                     *  axml
                     *  acss（AntFinancial Style Sheet）
                     *  js
             *  3.3、开发者入驻、创建小程序、开发前准备（设置接口加签方式，设置白名单，添加开发者/体验者）
         *  4、开发者工具介绍
         *  5、蚂蚁金服 开放平台
         *  6、研发助手
         *  7、版本管理规范
         *  8、疑难解答和开发交流可以加官方的钉钉开发交流群
         *  9、关注小程序生活号，获取最新信息
         *  10、小程序管理后台【创建，查看，编辑，提交自己的小程序】

## 概述 ##

### 1、平台入驻 ###

#### 1.1、支付宝端 ####

[点击申请入驻][Link 1]  
[小程序通用框架][Link 2]

#### 1.2、钉钉端 ####

[点击申请入驻][Link 3]  
[钉钉开发文档][Link 3]

### 2、个人小程序 ###

#### 2.1、什么是个人小程序 ####

个人小程序指主体账号为个人所开发的小程序。

#### 2.2、个人小程序的账号要求 ####

*  需要有一个经过实名认证（实名认证超过7天）的支付宝个人主体账号
 *  这个账号不是任何支付宝企业账号的子账号（例如不能作为其它企业账号的开发管理员）

### 3、个人小程序VS企业小程序 ###

#### 3.1、相同点 ####

无论是个人还是企业，开发小程序所采用的流程、框架、开发工具和技术是一样的。

#### 3.2、差别 ####

*  目前开放给个人主体账号的行业类目比企业要少一些，后续会调整。
 *  开放给个人主体账号的功能和API比企业要少一些，例如目前个人主体账号不支持支付功能，后续会调整。

#### 开发个人小程序文档 ####

[开发个人小程序文档][Link 4]  
小程序的核心是一个响应式的数据绑定系统。

##### 文件目录 #####

*  小程序分为`app` 和 `page` 两层。app 用来描述整体程序，page 用来描述各个页面。
    
     *  app 由app.js, app.json, app.acss 三个文件组成，必须放在项目的根目录。
     *  App代表顶层应用，管理所有页面和全局数据，以及提供生命周期方法。它也是一个构造方法，生成App实例。一个小程序就是一个App实例。
 *  page 由四个文件组成，分别是：page.js, page.json, page.acss, page.axml  
    pege页面生命周期：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpeW9vbWV0YWw_size_16_color_FFFFFF_t_70]

###### json ######

*  app.json 是小程序的全局配置，在这个 json 文件中可以记配置小程序的页面集合，  
    通用的的状态栏、导航条、标题、窗口背景色等。
 *  小程序的所有页面路径必须写在 app.json 中，路径从项目根目录开始且不能包括后缀名，pages 的第一个页面就是小程序的首页。如"pages/index/index"  
    [app.json][]
 *  page.json 是小程序的页面配置，可以定义单页面的json信息，会覆盖app.json中window属性配置。  
    [page.json][]

###### axml ######

*  axml总体上可以理解为小程序的html,有自己的解析语法。

###### acss（AntFinancial Style Sheet） ######

*  app.acss是小程序的公共样式，可以在页面的 axml 中直接使用 app.acss 定义的选择器，影响所有页面的样式。支持rpx（responsive pixel）和文件导入。不支持属性选择器。  
    [acss][]

###### js ######

*  app.js 是小程序公共的逻辑脚本文件，在这个文件中可以监听小程序的生命周期，声明全局变量，调用框架提供的丰富 API。

#### 3.3、开发者入驻、创建小程序、开发前准备（设置接口加签方式，设置白名单，添加开发者/体验者） ####

> [https://docs.alipay.com/mini/introduce/register][https_docs.alipay.com_mini_introduce_register]

*  创建好小程序之后可以获得APPID，每个账号最多可以创建10个小程序
 *  [在支付宝平台申请免费的ssl证书][ssl]
 *  [了解用户授权][Link 5]  
    通过调用getAuthCode这个jsapi获取用户授权，在success回调中可以获取到authcode，js代码如下：

my.getAuthCode({
      scopes: 'auth_user', // 主动授权：auth_user，静默授权：auth_base。或者其它scope
      success: (res) => {
      
        if (res.authCode) {
          // 认证成功
          // 调用自己的服务端接口，让服务端进行后端的授权认证，并且种session，需要解决跨域问题
          my.httpRequest({
            url: 'https://isv.com/auth', // 该url是您自己的服务地址，实现的功能是服务端拿到authcode去开放平台进行token验证
            data: {
              authcode: res.authCode,
            },
            success: () => {
              // 授权成功并且服务器端登录成功
            },
            fail: () => {
              // 根据自己的业务场景来进行错误处理
            },
          });
        }
      },
    });

*  [下载服务端SDK][SDK]
 *  [下载安装开发者工具][Link 6]，[开发者工具操作说明][Link 7]
 *  设计小程序UI之前，建议先查看小程序[设计文档][Link 8]，[设计资源下载，有Sketch组件库和Photoshop组件库][Sketch_Photoshop]
 *  写代码之前，建议先看小程序[开发文档][Link 9]

### 4、开发者工具介绍 ###

[开发者工具介绍][Link 7]

### 5、蚂蚁金服 开放平台 ###

如果有疑问或者有想法交流可以到[支付宝开放社区][Link 10]

### 6、研发助手 ###

使用支付宝扫码可以唤起小程序研发助手:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpeW9vbWV0YWw_size_16_color_FFFFFF_t_70_pic_center]

*  开发者可以看到“我管理的” 和 “我开发的”两部分的所有小程序。  
    1、“我管理的” 意味着开发者是当前小程序的管理员，可以点击进入版本详情页，查看当前小程序的所有版本详情  
    2、“我开发的”说明当前用户是小程序的开发者身份，目前版本还不能进入详情页，后续版本会支持。

### 7、版本管理规范 ###

[点击查看][Link 11]

### 8、疑难解答和开发交流可以加官方的钉钉开发交流群 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpeW9vbWV0YWw_size_16_color_FFFFFF_t_70_pic_center 1]

### 9、关注小程序生活号，获取最新信息 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpeW9vbWV0YWw_size_16_color_FFFFFF_t_70_pic_center 2]

### 10、小程序管理后台【创建，查看，编辑，提交自己的小程序】 ###

[小程序管理后台][Link 12]

[Link 1]: https://docs.alipay.com/mini/introduce
[Link 2]: https://docs.alipay.com/mini/framework/
[Link 3]: https://open-doc.dingtalk.com/microapp/personnal/fdzxvg
[Link 4]: https://docs.alipay.com/mini/individual/dev-getting-started
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpeW9vbWV0YWw_size_16_color_FFFFFF_t_70]: /images/20220302/ae8e51c2bb7b41de8f8bc4eaf21b82b7.png
[app.json]: https://docs.alipay.com/mini/framework/app
[page.json]: https://docs.alipay.com/mini/framework/page
[acss]: https://docs.alipay.com/mini/framework/acss
[https_docs.alipay.com_mini_introduce_register]: https://docs.alipay.com/mini/introduce/register
[ssl]: https://apacc.cloud.alipay.com/#/antcloud/firstLogin?gotoUrl=https%3A%2F%2Fapacc.cloud.alipay.com%2F%23%2Fantcloud%2Ffreessl
[Link 5]: https://docs.alipay.com/mini/introduce/authcode
[SDK]: https://docs.open.alipay.com/54/103419/
[Link 6]: https://docs.alipay.com/mini/ide/download
[Link 7]: https://docs.alipay.com/mini/ide/overview
[Link 8]: https://docs.alipay.com/miniapp/design
[Sketch_Photoshop]: https://docs.alipay.com/mini/design/kyser2
[Link 9]: https://docs.alipay.com/miniapp/developer/getting-started
[Link 10]: https://openclub.alipay.com/index.php?c=thread&a=subforum&fid=66
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpeW9vbWV0YWw_size_16_color_FFFFFF_t_70_pic_center]: /images/20220302/12f541856b224161a0e10a3055067975.png
[Link 11]: https://semver.org/lang/zh-CN/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpeW9vbWV0YWw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20220302/7940033348f54c54aa40c0c4119cafd7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpeW9vbWV0YWw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20220302/4361764cce1545889d1f344b8fad932b.png
[Link 12]: https://open.alipay.com/platform/miniIndex.htm#/