页面:同微信小程序.axml、.acss、.js、json
事件: onBlur (失去焦点) onTap(点击事件) onChange(当数据发送改变的时候触发的事件) onFocus(聚焦)
布局:同微信flex布局background-size="cover"(拉伸至足够大,使其完全覆盖背景区域)
api:微信是wx.支付宝是my.
.axml: a:for做循环eg: a:if="{{}}"条件渲染a:elif="{{view == 'APP'}}" a:else="{{view == 'alipay'}}"
注意:直接修改this.data❌
setData接受一个对象作为参数。对象的键名key可以非常灵活,以数据路径的形式给出,如 array[2].message、a.b.c.d,并且不需要在this.data中预先定义。
getCurrentPages() 获取页面栈,数组的形式 第一个为首页,最后一个为当前页
模板: FirstName: {{firstName}}, LastName: {{lastName}}... 将一个对象展开
data: { staffA: {firstName: 'san',lastName: 'zhang'},staffB: {firstName: 'si',lastName: 'li'},staffC: {firstName: 'wu',lastName: 'wang'},},
可以在 {{}} 内进行简单的运算
Hidden 三元运算符逻辑判断: 5}}"> 用的比较多
引用:
(1)import可以加载已经定义好的template 注意:
template里面只有一个子节点
is属性可以动态设置
(2)include可以加载除了的整个代码
事件:分为冒泡事件和不冒泡事件 on 开头的事件不会阻止事件冒泡 catch 开头的会
dataset
在组件中可以定义数据,这些数据将会通过事件传递给逻辑层。
书写方式:以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写),如data-element-type,最终会在event.target.dataset中会将连字符转成驼峰elementType。
样式导入:@import后需要加上外联样式表的相对路径,用;表示结束。
定义在app.acss中的样式为全局样式,作用于每一个页面。 此处可以写公共样式
兼容新的api
if(my.getLocation){ my.getLocation();} else { //如果希望用户在最新版本的客户端上体验您的小程序,可以这样子提示my.alert({ title: '提示',content: '当前支付宝版本过低,无法使用此功能,请升级最新版本的支付宝' });}
优化建议
(1)每次 setData 数据量要小 推荐指定路径设置数据 eg:this.setData({ 'array[0]': 1, 'obj.x':2, });
(2) 在 for 中使用 key 来提高性能。
组件:
view:
disable-scrollBooleanfalse是否阻止区域内滚动页面
input :
这是一个密码输入框" />(密码输入框跟h5传统的不太一样)
textarea:
focusBooleanfalse获取焦点
auto-heightBooleanfalse是否自动增高
show-countBooleantrue是否渲染字数统计功能
支付宝小程序的弹窗及字符串拼接my.alert({
title: `你选择的框架是${e.detail.value}`,
});
picker view 滚动选择器
该组件请勿放入hidden或display none的节点内部,需要隐藏请用a:if切换。
不要:
picker
从底部弹起的滚动选择器
image:
widthFix宽度不变,高度自动变化,保持原图宽高比不变
scaleToFill不保持纵横比缩放,使图片的宽高完全拉伸至填满 image 元素
图片高度不能设置为auto,如果需要图片高度为auto,直接设置mode为widthFix.
Canvas:
如果需要在高 dpr 下取得更细腻的显示,需要先将 canvas 用属性设置放大,用样式缩写,例如
API:
my.alert()警告框
my.confirm确认框
my.showToast()弱提示可选择多少秒之后消失
下拉刷新:onPullDownRefresh
需要在页面对应的 .json 配置文件中配置 "pullRefresh": true 选项,才能开启下拉刷新事件。
当处理完数据刷新后,调用 my.stopPullDownRefresh 可以停止当前页面的下拉刷新。
联系人:my.choosePhoneContact
选择本地系统通信录中某个联系人的电话。
my.chooseAlipayContact({
count: 2,
success:(res)=> {
my.alert({
content: 'chooseAlipayContact response: ' + JSON.stringify(res)
});
},
fail:(res)=> {
my.alert({
content: 'chooseAlipayContact response: ' + JSON.stringify(res)
});
}
});
选择城市:my.chooseCity
选择日期:my.datePicker(object)
键盘:my.hideKeyboard
隐藏键盘
滚动:my.pageScrollTo
滚动到页面的目标位置。
用户授权:
my.getAuthCode
my.getAuthCode({
scopes: 'auth_user',//主动授权(弹框):auth_user,静默授权(不弹框):auth_base
success:(res)=> {
if(res.authCode){
//认证成功
//调用自己的服务端接口,让服务端进行后端的授权认证,并且种session,需要解决跨域问题
my.httpRequest({
url: 'http://isv.com/auth',//该url是自己的服务地址,实现的功能是服务端拿到authcode去开放平台进行token验证
data: {
authcode: res.authcode
},
success:()=> {
//授权成功并且服务器端登录成功
},
fail:()=> {
//根据自己的业务场景来进行错误处理
},
});
}
},
});
接入支付:
my.tradePay({
orderStr: 'myOrderStr',//完整的支付参数拼接成的字符串,从服务端获取
success:(res)=> {
my.alert({
content: JSON.stringify(res),
});
},
fail:(res)=> {
my.alert({
content: JSON.stringify(res),
});
}
});
缓存:
my.setStorageSync
同步将数据存储在本地缓存中指定的 key 中。
my.getStorageSync
同步获取缓存数据。
网络请求:my.httpRequest 跨域http请求
my.httpRequest({
url: 'http://httpbin.org/post',
method: 'POST',
data: {
from: '支付宝',
production: 'AlipayJSAPI',
},
dataType: 'json',
success: function(res){
my.alert({content: 'success'});
},
fail: function(res){
my.alert({content: 'fail'});
},
complete: function(res){
my.hideLoading();
my.alert({content: 'complete'});
}
});
注意:如果 httpRequest 调用返回「无权调用该接口」时,则需要在开放平台的 httpRequest 中添加你需要访问的域名地址
扫码:my.scan
注:本文是我看着支付宝小程序一步一步总结的,其中部分代码显示不全,还望见谅。