支付宝小程序

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lwang_hello/article/details/82150653

可能大多数人对微信小程序很熟悉,但是对于支付宝小程序了解并不是很多,因为做了一个支付宝小程序,所以把自己遇到的一些问题,或者是说我觉得比较重要的点列出来和大家分享一下。

我们先说说支付宝小程序它是什么?

顾名思义,支付宝小程序它就是手机应用嵌入支付宝客户端的一种方法,有以下特点:
1.基于 Web 技术,学习成本低
2.一套代码,同时支持 iOS 和 Android,接近原生体验
3.提供丰富的组件和 API(比如获取用户信息、本地存储、支付功能等)

其实在写支付宝小程序时会发现它和微信小程序极其相似,但却有自己原有的组件和写法,下面我们来仔细说说。

1.支付宝小程序页面的四种类型的文件

每个支付宝小程序页面都由这四个文件构成:
axml——–类似于html,wxml文件
acss——–类似于css,wxss文件
js ———–JavaScript文件
json———项目配置文件

接下来我们来看看项目生成后自带的app文件:
App代表顶层应用,管理所有页面和全局数据,以及提供生命周期方法。它也是一个构造方法,生成App实例。一个小程序就是一个App实例。
每个小程序的顶层一般包含三个文件。
app.js:应用逻辑
app.acss:应用样式(可选)
app.json:应用配置
app
我的项目名字是“尝鲜安心测”,所有页面都放在pages文件夹中。

2.页面样式

acss(AntFinancial Style Sheet)用于描述页面的样式。它是一套样式语言,用于描述 axml 的组件样式,决定 axml 的组件应该怎么显示, acss 具有 css 大部分特性。与 css 相比acss有一些扩展的特性:
(1)rpx
rpx可以根据屏幕宽度进行自适应,1rpx = 0.5px = 1物理像素。

(2)内联样式
组件上使用class,style 属性来控制样式
style属性:style接收动态的样式,样式在运行时会进行解析,尽量避免将静态的样式写进style中,以免影响渲染速度。

<view style="color:{{color}}"></view>

class属性:用于指定样式规则,属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,之间用空格分隔。一般情况下静态的样式统一写到class中。

<view class="bg"></view>

(3)全局样式与局部样式
全局样式定义在app.acss中的样式,作用于每一个页面。
局部样式在 Page 的acss文件中定义的样式,只作用在对应的页面,并会覆盖app.acss中相同的选择器。

3.事件

什么是事件?

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上,当达到触发条件,就会执行逻辑层中对应的事件函数。
事件对象可以携带额外信息,如 id, dataset, touches。

事件绑定的写法同组件的属性,以 key、value 的形式。
key 以on或catch开头,然后跟上事件的类型,onTap, catchTap
value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
注意:微信小程序中以bind开头,on事件绑定不会阻止冒泡事件向上冒泡,catch 事件绑定可以阻止冒泡事件向上冒泡。

(1)在组件中绑定一个事件处理函数。
如onTap,当用户点击该组件的时候会在该页面对应的Page中找到对应的事件处理函数。

 <view class="zuLin" onTap="show">
     <text>立即租赁</text>
 </view>

onTap
(2)在相应的Page定义中写上相应的事件处理函数,这里我没有传入参数。

Page({
   show: function(){
      this.setData({flag: false})
   },
 )}

在这个栗子中,给立即租赁绑定一个点击事件,点击它就会出现下单浮层,也就是一个遮罩页面。给大家展示一下遮罩页面
遮罩页面
选择耗材数量,点击确定按钮,遮罩页面消失。

支付宝小程序的框架提供给开发者更多的JSAPI和OpenAPI能力,可以为用户提供多样化便捷服务。支付宝小程序有自己的开放接口,比如芝麻信用,信用借还等等。
个人觉得支付宝小程序参考的东西有点少,很多问题需要自己去不断研究,当然小程序的页面我觉得比PC端好写一点,特别是一些组件很好用,然后对于支付宝小程序的学习还在继续中……

展开阅读全文

没有更多推荐了,返回首页