支付宝小程序学习笔记

官方文档https://mini.open.alipay.com/channel/miniIndex.htm

https://docs.alipay.com/miniapp/developer/getting-started api

https://www.w3cschool.cn/aliminiapp/aliminiapp-vnwk28xw.html

事件的添加

button onTap

input onBlur 失去焦点时触发

<viewclass="page-add-todo">

<viewclass="add-todo">

<input

class="add-todo-input"

placeholder="What needs to be done?"

onBlur="onBlur"

value="{{inputValue}}"

/>

<buttononTap="add">Add</button>

</view>

</view>

获取用户头像名称

<viewclass="user">

<imageclass="avatar"src="{{user.avatar}}"background-size="cover"></image>

<viewclass="nickname">{{user.nickName}}'s Todo List</view>

</view>

.user {

display:flex;

padding:30px30px030px;

}

.avatar {

width:128rpx;

height:128rpx;

margin-right:40rpx;

border-radius:50%;

}

.nickname {

display:flex;

flex-direction:column;

justify-content:center;

font-size:40rpx;

}

constapp =getApp();

onLoad() {

app.getUserInfo().then(

user=>this.setData({

user,

}),

);

},

页面跳转

my.navigateTo({url: ''.}); //保留页面.跳转到指定页面

my.navigateBack(); //关闭当前页面

my.redirectTo('/xx'); //关闭当前页面,跳转到指定页面

生命周期

onLoad-->onShow-->onHide

框架

app 管理所有页面和全局数据,以及提供生命周期

生命周期:onLaunch:小程序启动;onShow小程序切换到前台;onHide小程序切换到后台;oError小程序出错

js应用逻辑;acss 应用样式;json应用配置

app.json

page 设置也买路径 window 设置默认页面的窗口表现 tabBar 设置底部tab的表现

Page 代表应用的一个页面,

定义交互行为时,需要在页面脚本里面指定响应函数 onTap="名称",然后在js中进行获取

页面重新渲染,需要在页面脚本里面调用this.setData方法。

onLoad页面加载-->onReady-->页面加载完成-->onShow页面显示-->onHide页面隐藏-->onUnload页面被关闭-->onTitleClick标题被关闭-->onPullDownRefresh页面被下拉-->onReachBottom页面被拉到底部-->onShareAppMessage返回自定义分享信息-->viewTap事件处理

视图层;

数据绑定 {{m}} data:{m:"A",}

列表渲染 <view a:for="{items}">{{item}}</view> Page({data:{items:":[1,2,3]}, })

条件渲染 <view a:if="{{view == 'app'}}">APP</view> a:elif= a:else=

模板

事件 onTap事件绑定不会阻止冒泡事件向上冒泡 catchTap 事件绑定可以阻止冒泡事件向上冒泡