支付宝小程序开发与注意事项

注册企业支付宝，作为小程序的登录账户

地址：支付宝小程序

企业账号注册: 支付宝

注册、登录

选择所需的项目类型

创建一个小程序并填写信息

下载开发工具

地址：下载 ｜ 小程序

创建我的第一个支付宝小程序

支付宝小程序组成部分分类

1、js负责页面逻辑。

3、       xml负责页面结构。

　3、css负责页面样式。

4、json负责页面配置。

1、文件结构

小程序分为 app 和page两层，用来描述整个应用

l  app.js 小程序逻辑

l  app.json 小程序全局配置

l  app.acss 小程序全局样式表

2、项目配置

App.json配置

Json下window的配置

Js文件

生命周期

getAPP（） 方法

getApp方法在支付宝中和微信中使用方法相同

只需在当前js页面中引入app即可

Var app =getApp()

然后通过app.globalData 进行数据获取即可

预览或真机调试（选择关联应用）

需要创建小程序或者选择已有的

项目人员与插件管理

设置默认启动页与路由参数

上传代码进行全息检测并发布

页面跳转

小程序中跳转页面

        my.navigateTo({

          url: '/pages/one/index?key=value&key1=value1'

        })

小程序中返回上一个页面

       使用my.navigateBack（）的方法

       注：无论是微信小程序还是支付宝小程序中页面栈最多为十层，若达到十层后则可能会出现按钮无效页面无法回退等功能

my.navigateTo 和 my.redirectTo不允许跳转到选项卡（tabbar）页面；若需跳转到tabbar 页面，请使用 my.switchTab。

接受参数

在onload 事件中接收传递的数据

页面标题设置与修改

全局设置默认页面标题

修改单个页面的标题则需要到页面的json文件下进行修改

动态修改当前页面标题

my.setNavigationBar

设置底部导航栏

Taber与titleBar

在app.json文件中进行配置

与pages 同级即可

更多参数以及配置请在以下网址中查询：

小程序 tabBar、titleBar 多语言配置 ｜ 小程序

事件介绍

使用方式：

Ontap 点击事件 在该页面的.js 文件中的 Page 里定义onTap 对应的事件处理函数即可

事件类型

事件分为冒泡事件和非冒泡事件：

·     冒泡事件：以关键字 on 为前缀，当组件上的事件被触发，该事件会向父节点传递。

·     非冒泡事件：以关键字 catch 为前缀，当组件上的事件被触发，该事件不会向父节点传递。

事件绑定的写法同组件的属性，以 key、value 的形式。

·     key 以 on 或 catch 开头，然后跟上事件的类型，如 onTap、catchTap。

·     value 是一个字符串，对应 Page 中定义的函数名，不存在时触发事件会报错。

文档地址：事件介绍 ｜ 小程序

ACSS语法参考

ACSS 和 CSS 规则完全一致，100% 可以用。同时为更适合开发小程序，对 CSS 进行了扩充，ACSS 支持 px，rpx，vh，vw 等单位。

ACSS 已经帮开发者做了不同手机端的样式兼容性处理。

数据绑定                          

文档地址：数据绑定 ｜ 小程序

运行机制

1、 热启动和冷启动

·        冷启动： 当用户打开未启动过，或者是已经销毁的小程序时，称为冷启动。此时小程序会执行初始化，初始化完成后，会触发 onLaunch 回调函数。

·          热启动： 当用户打开已经关闭但仍处于后台运行的小程序时，称为热启动。在这种情况下，小程序并不会被销毁后重启，而仅是从后台切换到前台，此时，onShow 函数会触发，onLaunch 回调函数不会被触发。

2、前台 / 后台运行

·        前台运行： 当用户首次打开小程序时候，小程序会处于前台运行状态。

·        后台运行： 用户点击右上角关闭按钮关闭小程序，或者按下设备 Home 键离开支付宝 App 时，小程序并不会直接销毁，而是进入后台运行状态。

·        从后台运行切换为前台运行： 当未被系统销毁的小程序再度被打开或者激活时，会从后台运行切换为前台运行。

可在 app.js 中注册前台 / 后台切换的回调函数。当小程序从后台进入前台显示时会触发  onShow，当小程序从前台到后台时会触发  onHide。

缓存

开启本地缓存数据，进行存储、获取和删除等控制。 单个小程序的缓存总上限为 10 MB。 同步方法会阻塞当前任务，直到同步方法处理返回。异步方法不会阻塞当前任务。

注意事项

1.     小程序不支持使用 cookie，不支持 session。推荐使用小程序缓存。

2.     使用了缓存 API 必须使用清除 API，否则缓存不会被清除掉。

3.    打开小程序报错“系统异常，暂时无法启动，请稍后再试”， 支付宝APP 版本过低，不支持某些 API 或者组件，会报这样的错误。建议做 兼容 处理。

小程序分包

版本要求：基础库 1.14.0 或更高版本；支付宝客户端 10.1.60 或更高版本，若版本较低，建议做兼容处理；小程序开发者工具 0.40 或更高版本。

为了满足日益复杂的小程序业务需求，同时提升首次打开速度，支付宝小程序从客户端 10.1.60 版本开始支持分包加载功能。

开发者可以按需将小程序划分为若干个不同的子包。小程序使用分包功能时，会默认有一个主包，启动页面和 tabBar 所有页面都放在主包中，同时包含了小程序所需的公共资源（例如 js 脚本等）。在服务端构建时，会根据开发者的配置，打成不同的分包，用户在使用小程序进入对应分包的页面时，客户端会下载该分包，并进行解析和渲染。

使用建议：

·        对体积较大的小程序项目，建议使用此功能。

·        主包只保留最常用的核心页面（首页、tabBar 页面和其他公共资源），将小程序中不经常使用的页面放到多个分包中，启动时只加载主包，使用时按需下载分包，不要一次性下载整个代码包，以提升首页启动速度。

·        对于经常会访问到的待跳转页面，尽可能将该页面所在的分包配置成分包预下载，以提升页面跳转速度。

·        如果小程序由不同的团队协作开发，建议使用此功能。

打包与引用原则

开发者配置subPackages 后，服务端将按 subPackages 配置的路径进行打包，subPackages 配置路径外的目录将被默认打包到主包中。

启动页面和 tabBar的所有页面都必须放在主包中。

每个分包的根目录不能是另外一个分包内的子目录。

分包之间不能相互引用对方包中的资源（比如图片和 js 脚本等），分包可以引用主包和自己包内的资源。

分包和主包是分别独立打包的，同一个js模块会在主包和分包中分别存在。

分包的大小限制

1、整个小程序所有分包大小不超过 8M

2、 单个分包或主包大小不能超过 2M。

3、 微信小程每个包的限制同样为2M ，但所有包的最大限制为20M

查看当前分包的大小

若已完成分包加载配置，可在小程序开发者工具点击 详情 查看小程序当前分包大小。

分包预下载

安装依赖

1、 IDE 左侧功能面板中选择 NPM 依赖管理 添加以下依赖。详情请参见 NPM 管理。

说明：

安装依赖时只需在上述输入框中输入依赖名称然后回车下载即可

需要的注意的是安装运行依赖还是开发依赖

运行依赖：会跟随代码打包到线上

开发依赖：只用于开发环境

小程弹窗

小程序分享

1、my.hideShareMenu 是隐藏分享按钮的 API。

使用限制：

1、 基础库1.7.0 或更高版本；支付宝客户端  10.1.10 或更高版本，若版本较低，建议采取兼容处理。

2、 此 API 支持个人支付宝小程序、企业支付宝小程序使用。

2、my.showSharePanel 是唤起分享面板的 API。使用限制同上

在当前页面js中使用onShareAppMessage设置分享内容

组件概括

1、 官方组件：组件概览 ｜ 小程序

2、 API：API ｜ 小程序

3、 支付、刷脸、会员：IoT 小程序 API 概述 ｜ 小程序

4、 三方ui库：Search 搜索 | uView - 多平台快速开发的UI框架 - uni-app UI框架

注意事项

l  支付宝小程序和微信小程序开发流程大体相同

l  支付宝小程序在生命周期中多了一个 onTitleClick （标题被点击）

l  修改data中的数据同微信小程序一样 通过this.setData() 修改

l  视图层数据渲染都以a:开头 例如a:if a:for

l  点击事件通过 onTap 或者 catchTap 微信小程序中是bindTap，onTap和catchTap的区别在于on事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡

l  Api接口中my.on开头的API用来监听系统事件，my.off开头的API为接触监听关系

获取会员基础信息

my.getOpenUserInfo 可获取支付宝会员的基础信息（头像图片地址、昵称、性别、国家码、省份、所在市区），接入方法请参考 获取会员基础信息介绍。

使用限制：

·  本接口在 IDE 模拟器中返回的数据为虚拟数据，真实数据请以真机调试效果为准。

·  基础库 1.16.4或更高版本；支付宝客户端 10.1.35 或更高版本，若版本较低，建议采取 兼容处理。

·  此 API 支持个人支付宝小程序、企业支付宝小程序使用。

·  本功能需要用户主动触发才能激活，所以该功能不由 API 直接调用，需用 组件 的点击来触发。将 组件 open-type 的值设置为getAuthorize，当用户点击并同意之后，可以通过my.getOpenUserInfo 接口获取到支付宝服务器返回的基础信息，若用户未授权，直接调用my.getOpenUserInfo 接口，则无法返回正确信息。

·  需添加 获取会员基础信息 功能后，才可调用此接口。

·  不能通过 my.getOpenUserInfo 接口获取支付宝会员标识（user_id）。

获取会员手机号

my.getPhoneNumber 是获取支付宝用户绑定的手机号的 API。因为需要用户主动触发才能发起获取手机号，所以该功能不由 API 直接调用，必须点击 button组件 来触发。

使用限制

·     基础库 1.16.4或更高版本；支付宝客户端 10.1.35 或更高版本，若版本较低，建议采取 兼容处理。

·     此 API 暂仅支持企业支付宝小程序使用。

·     IDE 模拟器暂不支持调试，请以真机调试结果为准。

·     目前该功能需要在开发者后台完成敏感信息申请才可以使用此功能，入口为 开发管理 > 功能列表 > 添加功能 > 获取会员手机号 > 用户信息申请，此功能需谨慎使用，若支付宝发现信息存在超出约定范围使用或者不合理使用等情况，支付宝有权永久回收该小程序的该接口权限。

·     需要将

组件 open-type 的值设置为 getAuthorize，当用户点击并同意之后，可以通过 my.getPhoneNumber() 接口获取到支付宝服务器返回的加密数据， 然后在第三方服务端结合签名算法和 AES 密钥进行解密获取手机号，方法详见 敏感信息加解密方法，若用户未授权，直接调用my.getPhoneNumber()接口，则无法返回正确信息。

·     因该 JSAPI 涉及获取用户隐私信息，使用该 JSAPI 前，请对照以下文档检查应用是否符合主营行业及字段使用场景的要求：用户信息申请及使用基础规则。

常见问题

1、进入小程序前端可实现静默授权获取authCode编码

可将authCode传输给后端，后端通过调用需要调用支付宝的授权平台，

从而获取用户的唯一 token 以及 支付宝的userid，都是唯一的，调用的接口为[alipay.system.oauth.token]

2、获取到userid后，判断一下这个userid是否在我们自己的数据库中存在，如果存在，

直接获取信息，并且直接返回用户对象到前台；如果不存在，则需要从支付宝授权平台再一次去获取支付宝用户的信息。

3、获取手机号

无论是用户信息还是获取用户手机号都必须用户主动授权才可以获取

手机号与用户信息必须在管理平台进行能力添加

获取会员手机号是 企业账号享有