微信小程序笔记

1、图片轮播：

swiper高宽必须设在swiper里面。swiper-item作为swiper组件的子集默认的高宽与swiper相同。（swiper-item仅可放置在<swiper/组件中，宽高自动设置为100%>）

    vertical="{{false}}"（纵向） indicator-dots="true"（轮播图加点） autoplay="true" （自动播放）interval="2000"（切换间隔时间）

 

2、单个页面的windows配置（.json）可直接配置，无须用window

 

3、对齐：

   vertical-align: middle;（纵向居中）

4、F8断点调试单步运行

5、数据绑定：text不要双引号，image要双引号

 

6、控制标签元素的显示与隐藏：wx:if="{{true/false}}"  ,true/false可以用变量名来替换

 

7、双括号里面可以进行简单的运算

 

8、循环块<block wx:for="{{数组}}" >,在block中间的代码都会被视为一个整体。

<block wx:key='*this'  wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx">

默认是item,index, 没有加wx:key='*this'会出现错误警告 

  在JS中要有：  this.setData({posts_key:posts_content});

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名：

 

9、tap事件：事件绑定要在事件前面加bindtap这是默认的。bindtap与catchtap区别：catchtap可以阻止冒泡事件。

冒泡函数：子节点上点击，父节点上如果有监听函数也会起作用。

 

10、wx.redirectTo(url="")与wx.navigateTo(url="")区别：前者是平行跳转，后者是父子页面跳转。

 

11、数据输出口：

module.exports={

  postList: local_database

}

 

12、数据接收口：var postsData=require('../../data/post-data.js')要用相对路径，用绝对路径会出错的，没道理可讲。

 

13、Template模板化技术(只需wxml，wxss，js文件不能用，只实现了模板化的编程没有实现模块化的编程)

• 定义：<template name="postItem">
  </template>

• 引入模板文件：<import src="post-item/post-item-template.wxml"/>（可以用相对路径也可以用绝对路径）
• 在样式表中引入模板的样式表@import "post-item/post-item-template.wxss";

• 使用<template is="postItem" data="{{item}}"/> 注意：这样的引入，在模板里每个数据前要加item. 也可以用下面的办法
• 使用<template is="postItem" data="{{...item}}"/> 用三个点展开

14、设置缓存：（用户不主动去清除，缓存是一直存在的）

• 异步的方法（尽量不用）：wx.setStorage
• 同步的方法：wx.setStorageSync('键名',对象或字符串)
• 获取缓存：var game = wx.getStorageSync('key')

• 清除缓存：wx.removeStorageSync('key')
• 清除所有缓存：wx.clearStorageSync()

15、用代码控制组件是否出现：

• <image wx:if="{{collected}}" src="/images/icon/sc.png"></image>
• <image wx:else src="/images/icon/wsc.png"></image>

16、三元运算符

title: postCollected?"收藏成功":"取消成功"

17、弹窗功能（自动消失）：

• wx.showToast({
• title: postCollected?"收藏成功":"取消成功",
• duration:1500,
• })

18、弹窗功能（人工消失）：

• wx.showModal(OBJECT)

19、数据绑定情况在哪里看？

   在appData里面看。

 20、图片选择的两种方法：

• <image wx:if="{{collected}}" catchtap="onCollectionTap" src="/images/icon/collection.png"></image>
• <image wx:else catchtap="onCollectionTap" src="/images/icon/collection-anti.png"></image>
• <image catchtap='onMusicTap' class="audio" src="{{isPlayingMusic?'/images/music/music-stop.png':'/images/music/music-start.png'}}"></image>