1.图片标签:
<image src="/images/aaa.png"></image>
2.文本标签:
<text>Hello</text>
3.swiper滑动轮播:
<swiper catchtap="onSwiperTap" vertical="{{false}}" indicator-dots="true" autoplay="true" interval="5000">
<swiper-item>
<image id="7" src="/images/wx.png" data-postId="3"></image>
</swiper-item>
<swiper-item>
<image src="/images/vr.png" data-postId="4"></image>
</swiper-item>
<swiper-item>
<image src="/images/iqiyi.png" data-postId="5"></image>
</swiper-item>
</swiper>
单击事件
onSwiperTap: function (event) {
// target 和currentTarget
// target指的是当前点击的组件 和currentTarget 指的是事件捕获的组件
// target这里指的是image,而currentTarget指的是swiper
var postId = event.target.dataset.postid;
wx.navigateTo({
url: "post-detail/post-detail?id=" + postId
})
}
4.wx:if:
控制图片显示隐藏
<image wx:if="{{true}}" src="/images/wx.png"></image>
5.wx:for
循环遍历
<block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx"></block>
6.单击事件:
<view bindtap="sayHello"></view>
sayHello:function(){
console.log("hello");
}
7.页面跳转:
有父子关系(最多5级)
wx:navigateTo({
url:"../posts/post"
});
平行跳转
wx:redirectTo({
url:"../posts/post"
});
8.在一个js中读取另一个js中的数据:
在一个js中创建并输出本地数据
module.exports={
postList : local_database
}
在另一个js中引用并获取数据
var postsData=require('../../data/posts-data.js')
使用数据
this.setData({
posts_key:postsData.postList
});
9.template模板:
创建并定义template
<template name='postItem'></template>
在需要的wxml中引用
<import src='post-item/post-item-template.wxml'/>
在wxss中引用样式
@import 'post-item/post-item-template.wxss';
使用template并添加单击事件
<block wx:for="{{posts_key}}" wx:for-item="item">
<view catchtap='onPostTap' data-postId='{{item.postId}}'>
<template is='postItem' data='{{...item}}'/>
</view>
</block>
var postId =event.currentTarget.dataset.postid;
template传递数据的另一种方式
<template is="starsTemplate" data="{{stars:stars, score: average}}" />
10.获取地址栏参数:
onLoad:function(option){
var postId = option.id;
}
11.小程序缓存:
缓存普通文本
wx.setStorageSync('key', "hello man");
缓存对象
wx.setStorageSync('key', {
name:"zhangsan",
age:"13"
});
获取缓存
var name=wx.getStorageSync('key');
删除缓存
wx.removeStorageSync('key');
清除所有缓存
wx.clearStorageSync();
异步缓存
getPostsCollectedAsy: function () {
var that = this;
wx.getStorage({
key: "posts_collected",
success: function (res) {
var postsCollected = res.data;
}
})
}
12.提醒showToast:
wx.showToast({
title:postCollected?'收藏成功':'取消成功',
duration:800,
icon:'success'
})
13.showActionSheet:
onShareTap: function (event) {
var itemList = [
"分享给微信好友",
"分享到朋友圈",
"分享到QQ",
"分享到微博"
];
wx.showActionSheet({
itemList: itemList,
itemColor: "#405f80",
success: function (res) {
// res.cancel 用户是不是点击了取消按钮
// res.tapIndex 数组元素的序号,从0开始
}
})
}
14.全局变量的与获取:
定义app.js
App({
globalData:{
g_isPlayingMusic:false
}
})
获取
var app = getApp();
var info = app.globalData.g_isPlayingMusic;
15.图片切换两种方式:
<image wx:if="{{collected}}" catchtap='onColletionTap' src="/images/icon/collection.png"></image>
<image wx:else catchtap='onColletionTap' src="/images/icon/collection-anti.png"></image>
<image class='audio' src="{{isPlayingMusic ? '/images/music/music-stop.png' : '/images/music/music-start.png'}}"></image>