微信小程序常用控件汇总

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>