小程序学习二(模板和组件)
1:轮播图组件
<swiper indicator-dots='true' indicator-color='deepPink'>
2:模板定义和使用(定义,传值)
定义模板: name=‘模板名字’
<template name='listTemplate'>
使用模板:<importsrc="./detail_template/detail_item_template.wxml" />
3:数据存储
(1)缓存
wx.setStorage({ //存数据
key: 'isCollected',
data: oldCollectFlag
})
let oldCollectFlag = wx.getStorageSync('isCollected');//获取数据
(2)全局存储
App({
data: { //app.js
isPlay: false,
playPageIndex: null,
movies: {}
}
})
let app = getApp();
app.data.isPlay = false; //获取数据
4:交互,传值
(1) data-’传递数据key’ = value
<image data-detailId='{{4}}' src='/images/detail/carousel/01.jpg'></image>
//可以在页面跳转的 onload options里面获取传递的数据
toDetail(event) {
console.log(event);
//点击页面的下标
let id = event.currentTarget.dataset.id; //获取data-key的数值可以传值给跳转的页面
wx.navigateTo({
url: '/pages/detail/detail?id=' + id
})
},
(2)数据交互(发送请求获取数据)
wx.request({ // 发送请求
url: API_URL, // 请求的url
header: { // 设置请求头
'Content-type': 'json',
},
success: (res) => { // 请求成功的回调函数
// 隐藏提示加载信息
wx.hideToast();
console.log(res); // 请求的成功的数据对象,注意是封装后的对象
this.setData({movies: res.data.subjects})
}
})
不同页面的通信:APP里面公共的数据