首页小程序开发正文

支付宝小程序开发教程（支付宝小程序开发教程）

小程序开发 2023-02-14T20:35:17 3351

今天给各位分享支付宝小程序开发教程的知识，其中也会对支付宝小程序开发教程进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！本文目录一览： 1、支付宝小程序怎么用支付宝小程序使用教程

今天给各位分享支付宝小程序开发教程的知识，其中也会对支付宝小程序开发教程进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

1、支付宝小程序怎么用支付宝小程序使用教程
2、电脑怎么用支付宝小程序
3、二、支付宝小程序前端样式的设计.acss样式详解
4、支付宝小程序播放视频2018-10-09
5、支付宝小程序请求设置cookie

支付宝小程序怎么用支付宝小程序使用教程

支付宝小程序使用教程：

支付宝小程序开发者工具页面截图

支付宝此举并不令人意外。从微信小程序初现雏形到正式发布，短短一年，其开发者平台已经积累了超过20万的开发者。

在1月9日微信开放小程序入口后，目前已有数千个小程序投入使用，更关键的是，微信利用“扫一扫”的调用方式将小程序的潜力放在线下，腾讯“连接线上线下”的野心已昭然若揭，而这也正是支付宝要做的。

虽然微信内部不针对小程序建立“应用社区”，但已经有诸多第三方平台成立了琳琅满目的“小程序商店”。

因此，背靠阿里巴巴集团、同样拥有至多线下场景的支付宝，也自然成为“小程序”绝佳的投放阵地，另外，支付宝本身极强的工具属性，也符合张小龙口中“即用即走”的小程序应用标准，而阿里巴巴本身具备的电商、O2O等基因能让小程序在线下推广环节高枕无忧。

不过，支付宝牌的小程序欠缺的是微信巨大的用户基数与社交使用黏性。基于这两点，作为后来者的支付宝，则打算从三个维度发力。

1、让开发系统更“开放”

支付宝小程序开发者工具页面截图

电脑怎么用支付宝小程序

支付宝小程序是一种全新的开放模式，它运行在支付宝客户端，可以被便捷地获取和传播，为终端用户提供更优的用户体验。小程序开放给开发者更多的JSAPI和OpenAPI能力，通过小程序可以为用户提供多样化便捷服务。

支付宝小程序开放给企业帐号，想要成为支付宝小程序开发者，需要完成注册、入驻以及小程序创建三步。

支付宝小程序怎么创建

通过以下步骤完成小程序创建，并获取APPID。

第一步：创建小程序

通过小程序首页，点击“登录管理中心”，进入小程序管理中心，在页面上点击“创建小程序”。

一个账号下最多可以创建10个小程序；未提交过审核的小程序可以删除，删除的小程序不在计数范围。

第二步：填写小程序基础信息

请准确填写小程序的基础信息，基础信息不允许包含违禁词，应用信息修改规则如下。

上架前，应用信息均可修改，不限次数。

上架后，应用名／应用英文名将不允许修改; 应用简介、应用描述、应用类目这三个信息在新版本提审时每个自然月可修改5次，其他信息在新版本提审时可修改。

第三步：获取小程序APPID

小程序创建成功后，可在小程序详情页查看APPID。

怎么开发支付宝小程序

一.小程序框架结构

1、小程序分为app和page两层，app描述整体程序，page描述各个页面。

2、app代表顶层应用，管理所有页面和全局数据，以及提供生命周期方法，他也是一个构造方法，生成app实例。每个小程序的顶层一般包含三个文件：app.js(应用逻辑)， app.acss(应用样式) ，app.json(应用配置) app.json用于全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

以下是一个包含了部分配置选项的简单配置app.json。

复制代码

{"pages": ["pages/index/index","pages/logs/index"],"window":{ "defaultTitle":"Demo" }}

3.page代表应用的一个页面，负责页面展示和交互。每个页面对应一个子目录，一般有多少个页面，就有多少个子目

录。它也是一个构造函数，用来生成页面实例。page由四个文件组成，文件类型分别是：js（页面逻辑） axml（页面

结构） acss （页面样式表） json（页面配置），具体请【参考地址】

二.小程序调试

1.模拟器调试ide模拟器提供了以下功能：设备模拟（尺寸精度等），编译日志、编译错误提示、刷新，支付宝JsAPI模拟以及位置、蓝牙、启动参数等模拟接口自定义配置（如下图）

2.调试工具：配合模拟器，ide提供了定制化的 chrome devtool，在其基础上提供比如 axml 等扩展。默认展示：

AXML，基于小程序元素的 dom、css 调试

Console，运行日志、错误查看

Storage，缓存数据查看、编辑

Sources，源码查看、断点调试

Network，网络资源、请求查看

3.真机调试真机预览需要注意以下三点： 1）首先你得提供一个 APP ID（如果你还没有申请，请前往开放平台申请）

2）生产环境的预览有权限限制，你需要选择推送自己或者对应的开发者(该 APP ID 下添加的开发者）

3）我们提供生产环境的调试工具，选中开启真机调试工具即可

二、支付宝小程序前端样式的设计.acss样式详解

在视频中已经说过了，小程序的设计思想和原生app的设计思想颇为相似，基本的应用单元为页面。当然对于一个页面来说每一个元素的放置位置在哪儿以及显示成什么样子这个是由样式来决定的。我们知道在web开发中样式是在css文件中规定的，叫做层叠样式表 (Cascading Style Sheets)。其实在APP中样式的约束也是使用css，在支付宝小程序中也是使用css不过文件的后缀是.acss而且对css3进行了扩充而已。

那么在支付宝小程序中的.acss和微信小程序中的.wxcss没有什么两样。上边已经说了.acss其实包含了css3那么它还有一些新的特性是css3中不具备的，让我们一一看看

第一次看到这个东西也能猜到他是干什么用的。在css中我们知道规定大小一般使用像素(px)这个单位。比如显示生活中我们说房子128㎡那这儿的单位是平方米，在开发中需要更加精准的大小就是px像素。像素就非常精细了因为在我们显示屏幕中像素是最小的显示单元。这个道理如果不懂的话就找个LED屏幕仔细看，LED屏幕上一个一个的发光二极管可以想象为像素。

我们知道手机屏幕有大有小，就拿iPhone来说，iPhone 6 plus比iPhone 5要大。那么就说明plus的像素比5要多。对比：

加入有一个160px宽度的红色矩形在这两种手机中的位置如下：

rpx（responsive pixel）可以根据屏幕宽度进行自适应。如何自适应呢？看下边的分析：

看下图：

在模块化开发中我们有时候不得不在页面中使用其他的第三方库的样式，而第三方库的样式是保存在第三方包中的，我们不可能全部复制到我们的.acss文件中，那最好的办法就是导入了。在样式表中导入其他外联样式表。

当然仍旧支持内联样式和class属性制定样式类，如

选择器和css3的保持一致。一般有class=”test”类选择器和id=”test”的id选择器。当然在支付宝小程序的样式中特殊的地方就是：

※ .a- 或者 .am-为前缀的选择器已经被系统占用所以不要使用；

※ 不能使用属性选择器，例如,以下写法不被支持：

我之前说过小程序开发的应用单元为页面。其实我们在.axml中写的页面并不包含页面容器，就相当于我们做一个页面但是body标签不用写那如果我们要改变整个页面的背景怎么办呢?其实有一个固定的选择器。例如：

可以通过 page 元素选择器来设置页面容器的样式，比如页面背景色:

在你想改变页面容器的页面中定义该样式也可以，全局定义也可以，例如我想将test这个页面的页面容器背景设置为蓝色，就可以再pages目录下的test目录下找到test.acss在其中定义page的样式

下节是视图层讲解，如果有任何问题可以再下方给我留言或者发邮件到 weiyongqiang@weiyongqiang.com 我在收到邮件后会回复。

支付宝小程序开发教程（支付宝小程序开发教程）

支付宝小程序播放视频2018-10-09

2020.1.17更新：

现在支付宝官方文档有视频播放组件了

以下是原文内容

翻了一下支付宝小程序的开发文档，好像并没有视频播放组件提供，但是却有webview可以内嵌html5页面。

步骤：

1、添加webview白名单：蚂蚁金服开放平台——目标小程序详情——设置——开发设置——H5域名配置

2、小程序详情：

a、axml内容：web-view src="http://域名/video页面.html?id={{movieId}}managementId={{managementId}}" /

官方文档说明web view组件会覆盖整个页面，所以页面上只有这个组件（更多详情请看官方文档）

b、video.html页面（在白名单域名的那个服务器里放）里就是一个video标签，还有对应的js，不懂的可以自己去找找资料，在这就不班门弄斧了，注意加上meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"标签

3、万事俱备，看效果（丑了点但是功能可以哈）