微信小程序从入门到放弃 Num.1

写在前面

开发者工具

常用标签

block: 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。 

text:  行内元素标签,类似于 span 

项目结构

 pages         --- 页面存放   
 |     
 app.js        ---全局的JS 可设置变量供全局使用,   一进入小程序会触发onLaunch生命周期  
 |
 app.json      ---pages:[存放页面路由],window:顶部导航的颜色、文字,tabBar:底部导航栏设置,navigateToMiniProgramAppIdList:[要跳转的小程序的appID]  
 |
 app.wxss      ---全局样式

编码

 "pages":["pages/home/home"]  

 "pages":["pages/home/home","pages/login/login"]  

<view class='hello'>hello 微信小程序</view> 

.hello{color: lime;}

 {"navigationBarTitleText": "选择班级"}

生命周期及方法

Page(
{  data: {    text: "This is page data."  },  
onLoad: function(options) {    // Do some initialize when page load.  },  
onReady: function() {    // Do something when page ready.  },  
onShow: function() {    // Do something when page show.  },  
onHide: function() {    // Do something when page hide.  },  
onUnload: function() {    // Do something when page close.  },  
onPullDownRefresh: function() {    // Do something when pull down  },  // Event handler.  
viewTap: function() {    this.setData({      text: 'Set some data for updating view.'    })  }

在页面中使用 

<view class='hello' bindtap="viewTap" >hello {{text}}</view> 

逻辑表达式(以下内容来自W3C)

wx:for

//在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。//默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。//如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

//使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

wx:if

//在框架中，我们用wx:if="{{condition}}"来判断是否需要渲染该代码块：
Page({
  data: {
    condition:true
  }
})
<view wx:if="{{condition}}"> True </view>

//也可以用wx:elif和wx:else来添加一个else块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>//因为wx:if之中的模板也可能包含数据绑定，所以当wx:if的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。//同时wx:if也是惰性的，如果在初始渲染条件为false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。//相比之下，hidden就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。//一般来说，wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用hidden更好，如果在运行时条件不大可能改变则wx:if较好。

事件

事件分为冒泡事件和非冒泡事件冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

//使用
<view id="outter" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

Demo练习

此时的你已经掌握了构建页面的能力  那么我们来写一个demo吧

场景 Tab切换框 点击其中一项 当前项背景颜色改变

第一步编写wxml

    <view class="info-choose">
       <view bindtap="chooselog" 
             wx:for="{{array}}"
             wx:key="{{index}}" 
             data-select="{{item.id}}"
             class="{{item.id==choice?"check":""}}">
             {{item.name}}
       </view>
    </view> 

第二步编写js

 Page({
    data: {
        array:[
          { "name": "Jaket",
            "id":1          
          },
          {
            "name": "夹克",
            "id": 2
          },
          {
            "name": "夹克哥哥",
            "id": 3
          },
          {
            "name": "夹克特",
            "id": 4
          },  

        ],
        choice:0,//判断是否选中
    },

    chooselog:function(data){
      var that=this;
      that.setData({//把选中值放入判断值
        choice : data.currentTarget.dataset.id
      })
    }
})

第三步编写wxss

.info-choose view{
    width:130rpx;
    height:130rpx;
    border:1rpx solid #ccc;
}
.info-choose.check{
    background:lime;
}

下期预告

1、template模板的使用

2、微信API的使用

3、微信组件 tabBar的使用

4.Demo checkbox复选