<text class="moto" catchtap="onTextTap">开启小程序之旅</text>
<text class="moto" bindtap="onTextTap">开启小程序之旅</text>
catchtap 与 bindtap, catchtap不向上冒泡
2.页面引入数据
第一个页面:
var local_database = {} //定义变量
module.exports = { // 导入
postList: local_database
}
第二个页面:
var postsData = require('../../data/posts-data.js');
3.data 设置方式
Page({
data:{
// 小程序总会读取 data 对象来做数据绑定,这个动作我们称为 A
// 而这个动作 A 的执行,是在onLoad 事件之后发生的
},
onLoad: function(){
//可以在onLoad 中有2种方式设置data
//在 onLoad 中执行异步操作,在这个异步操作中,直接赋值是无效的, 必须调用 this.setData()
1. this.data.属性 = 值 //直接赋值
2. this.setData({}) // 更新
}
})
4.xs:for="{{}}" wx:for-item="item" wx:for-index="idx"
5.template 模板的使用
1.模板定义
<template name="postItem">
<view class="post-container">
<view class="post-author-date">
<image class="post-author" src="{{item.avatar}}"></image>
<text class="post-date">{{item.date + " hello"}}</text>
</view>
<text class="post-title">{{item.title}}</text>
<image class="post-image" src="{{item.imgSrc}}"></image>
<text class="post-content">{{item.content}}</text>
<view class="post-like">
<image class="post-like-image" src="/images/icon/chat.png"></image>
<text class="post-like-font">{{item.reading}}</text>
<image class="post-like-image" src="/images/icon/view.png"></image>
<text class="post-like-font">{{item.collection}}</text>
</view>
</view>
</template>
2.引入模板
<import src="post-item/post-item-template.wxml"/>
3.使用模板
<template is="postItem" data="{{item}}"/>
4.引入 css
@import "post-item/post-item-template.wxss
5.平铺对象,直接写变量名就可以
<template is="postItem" data="{{...item}}"/>
6.自定义数据
<view catchtap="onPostTap" data-postID="{{item.postId}}" data-post-name="name"
横线转驼峰,其他一律小写
data-postID => postid
data-post-name => postName
7.设置本地缓存
ws.setStorageSync(key,value); // 同步
ws.setStorage(key,value); // 异步
wx.getStorageSync("key") // 获取缓存
wx.removeStorageSync("key") // 清楚指定缓存
wx.clearStorageSync() //清楚所有缓存
8.wx.showModal,wx.showToast
区别: showToast 会自动消失
showModal 不会自动消失,需要用户确认
9.音乐播放
wx.playBackgroundAudio() // 播放
wx.pauseBackgroundAudio() // 暂停
10.全局变量
app.js
// 设置
App({
globalData: {
g_isPlayMusic:false
},
})
//获取
var app = getApp();
11.target 和 currentTaget 的区别 :
target 当前点击的组件 和 currentTaget 指的是事件捕获的组件