当前位置：首页 > news >正文

微信小程序笔记

news 来源：原创 2024/4/29 3:23:43

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>