支付宝小程序学习笔记

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



事件的添加
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 事件绑定可以阻止冒泡事件向上冒泡

展开阅读全文

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