支付宝小程序学习笔记

官方文档 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 失去焦点时触发

< view class = "page-add-todo" >

< view class = "add-todo" >

< input

class = "add-todo-input"

placeholder = "What needs to be done?"

onBlur = "onBlur"

value = "{{inputValue}}"

/>

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

</ view >

</ view >

获取用户头像名称

< view class = "user" >

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

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

</ view >

.user {

display : flex ;

padding : 30px 30px 0 30px ;

}

.avatar {

width : 128 rpx;

height : 128 rpx;

margin-right : 40 rpx;

border-radius : 50% ;

}

.nickname {

display : flex ;

flex-direction : column ;

justify-content : center ;

font-size : 40 rpx;

}

const app = 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 事件绑定可以阻止冒泡事件向上冒泡