微信小程序第一课

Page({
  data:{                      //这个data是初始化变量
   	 text : "这里是内容",
     btnText : "这是按钮的内容",
     show : true,
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },

  btnClick : function (){//这里定义了一个函数

      console.log("按钮被点击了")

      var isShow = this.data.show;  //这个isShow就是那个data里面的show变量
      console.log("isShow:"+isShow)//打印日志

 //每次调用这个btnClick函数就会给text，show重新赋值
      this.setData({text:"这是一个新的内容...",show:!isShow })

  }
})

first.xml文件

<include src="../templates/header" />

jikexueyuan demo ..


<button type="default"  hover-class="other-button-hover"> default </button>
<button type="primary" bindtap="btnClick"> {{btnText}} </button>


<view  wx:if="{{show}}" >{{text}} </view>   <!-- show的值为true的时候text的值会显示，否则就不显示-->
 
 
 

判断标签

<view wx:if="{{show}}" >{{text}} 1</view>   <!-- show的值为true的时候text的值会显示，否则就不显示-->
 <view wx:else="{{show}} "> {{text}} 2 </view>

循环标签

先在first.sj  里面的Page   的data属性  定义数组news['aaa','bbb','ccc']

first.xml 里面写上循环标签

 <view wx:for="{{news}}">{{item}}</view>

循环标签这样写 根规范   前面有索引

 <view wx:for="{{news}}"  wx:for-item="itemx">
 {{index}}-- {{itemx}}
 </view>

每调用一次这个函数就删除数组里面的一个值

  btnClick : function (){//这里定义了一个函数

      console.log("按钮被点击了")
      var isShow = this.data.show;  //这个isShow就是那个data里面的show变量
      console.log("isShow:"+isShow)//打印日志

      var newsDates=this.data.news;
      newsDates.shift();//每调用这个函数就删除数组的一个值

 //每次调用这个btnClick函数就会给text，show重新赋值
      this.setData({text:"这是一个新的内容...",show:!isShow,news:newsDates })

  }

引入一个头部底部文件，当多个页面都需要相同的文件时

底部文件模板有多个，这里用的是import   顶部文件就一个 。用的include 暂时不知道为什么

<template name="footer1">

这是底部内容1  - {{text}}

</template>


<template name="footer2">

这是底部内容2  - {{text}}

</template>

==============================================================================================================================

动态给模板赋值

<import src="../templates/footer"/>
<template is="footer2"    data="{{text:'导入设置的内容.....'}}"/> <!--动态给模板赋值-->

<template name="footer1">

这是底部内容1  - {{text}}

</template>


<template name="footer2">

这是底部内容2  - {{text}}

</template>

==================================================================微信小程序事件============================================

catchtap和bindtap的区别

<view class="view1"  id="view1"    bindtap="view1Click" >
  view1
  <view class="view2" id="view2"   bindtap="view2Click">
    view2
    <view class="view3"  id="view3"  catchtap="view3Click">   <!--catchtap和bindtap的区别，bidtap在第一层的时候，下面的两层也会触发事件，而catchtap只会触发这一层的事件，下面的事件不会触发-->
      view3
    </view>

  </view>

</view>

---------------------------------------------------------------------------------------------------

事件的对象

。类型type

事件戳  timeStamp事件原组件 target

当前组件 currentTarget

触摸事件 touches

=================================================微信小程序的配置详解======================================================

app的页面配置

app的窗口配置

app的tabBar配置

网络超时配置及deBug开启配置

页面配置