微信小程序笔记-白红宇

微信小程序笔记

阅读量：4681 次

发布时间：2019-06-09

本文共 2365 字，大约阅读时间需要 7 分钟。

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> 
 