小程序day3

一：WXML模板语法

1：数据绑定

1：基本原则

a：在data：{ }中定义数据

b：在wxml中使用

       在对应页面的.js文件中使用，把数据定义到data对象中 

        Page({

                  data: {

                            name:'这是一个数据'

                          },

                }）

        Mustache语法格式

        把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可，语法格式为：

                                        <view> {{ 要绑定的数据名称 }} </view>

主要应用场景：绑定内容，绑定属性，简单的运算（三元表达式，算数运算）等

二：事件绑定

常用的事件：

        类型：tap ，绑定方式：bindtap或者bind：tap，手指触摸后马上离开，类似于click事件

        类型：input ，绑定方式：bindimput或者bind：input，文本框输入事件

        类型：change ，绑定方式：bindchange或者bind：change，状态改变时触发

事件对象：

        事件回调触发时，会收到一个事件对象event，基础属性

        type：String：事件类型

        timeStInteger：页面打开到触发事件所经过的毫米数

        target：Object：触发事件的组件一些属性的集合

        currentTarget：Object：当前组件的一些属性

        detall：Object：额外的信息

        touches：Array：触摸事件，当前停留在屏幕中的触摸点信息的数组

        changedTouches：Array：触摸事件，当前变化的触摸点信息的数组

注意点：target和currentTarget的区别

                target是谁触发了就是给的属性集合，列如在父盒子上定义一个事件，点击子盒子触发，这个事件会以冒泡的形式触发父盒子上定义的事件，那么对于外层的容器来说：

                a：e.target指向的是触发事件的源头组件，也就是子盒子。

                b：e.currrentTarget指向的是绑定事件的父盒子。

（补充：关于阻止冒泡发生：js原生语法：e.prevenDefault，vue语法：@click.prevant）

绑定点击事件绑定bindtap语法格式

绑定触摸事件tap

通过 bindtap绑定

<button type="primary" bindtap="clickxx" >按钮</button>

Page({

          data:{

          },

          clickxx(e){

                    console.log(e);

          }

})

更改data中的数据，重新赋值

通过this.setData(Obj)方法

Page({

          data:{

                    count:'tsy'

                  },

          clickxx(){   //触发函数

                   this.setData({

                             count:'sssss'

                   })

                   console.log(this.data.count);

          },

})

事件传参

微信小程序的传承不能在bintop里写，微信小程序的传参比较特殊，格式如下

                        data-参数名=“{{参数值}}”

会在事件对象中显示所传参数值：事件对象.target.dataset.参数名

<button type="primary" bindtap="clickxx" data-eve="{{55}}" >按钮</button>

Page({

          clickxx(e){

                   console.log(e.target.dataset.eve);

          }

})

事件绑定bindinput语法格式

<input type="text" placeholder="请输入用户名" bindinput="gettext"></input>

Page({

          gettext(e){

                    console.log(e.detail.value);

          }

})

实现文本框和data之间的数据同步

步骤：

1：定义数据

Page({

          data:({

                    msg:'tsy'      定义变量msg，值tsy

          })

})

2：结构渲染

<input value="{{msg}}" bindinput="getdata"></input>

定义事件函数getdata

3：样式美化

略

4：绑定input事件处理函数

getdata(e){

            this.setData({

                      msg:e.detail.value

            })

  }

条件渲染

1：在小程序中用wx:if="{{判断条件}}"，来判断是否渲染该模块

<view wx:if="{{ true }}"> 渲染该模块 </view>

<view wx:if="{{ false }}"> 不渲染该模块 </view>

可以配合        wx:elif        和        wx:else        一起用

2：wx:if可以和<block></block>标签一起使用，注意block并不是一个组件，只起到一个容器的作用，不会再页面中做任何渲染。

<block wx:if="{{        false        }}">

//不显示

        <view>xianshi</view>

        <view>xianshi</view>

</block>

<block wx:if="{{        true        }}">

//显示

        <view>xianshi</view>

        <view>xianshi</view>

</block>

3：hidde

在小程序中用hidde可以做到组件的显示隐藏

<view hidden="{{        false        }}">显示</view>

<view hidden="{{        true        }}">隐藏</view>

4：wx:if 和 hidden的区别

wx:if ：是将组件动态的创建和移除的方式

hidden；是以样式切换的方式（display：none、block；）来控制元素的显示和隐藏

列表渲染wx:for

1wx:for

Page({

          data:({

            dataArr:[1,2,5,4,7,8,6]

          }),

})

<view wx:for="{{dataArr}}">    索引：{{   index   }} ，当前项{{   item   }} </view>

打印

可以用用wx:for-index和wx:for-item来自定义索引变量名和当前项变量名

<view wx:for="dataArr" wx:for-index="idx" wx:for-item="itemName">

        索引:{{idx}}

        当前项:{{itemName}}

</view>

2:wx:key

为循环项加上唯一标识

data:({

    daArr:[

              {        id:1,        name:'tss'},

              {        id:2,        name:'tsyy'},

              {        id:3,        name:'tjh'}

    ]

  }),

<view wx:for="{{ daArr }}"  wx:key="id"> {{ item.name }}</view>

二，wxss模板样式

1.rpx

rpx是微信小程序独有的，解决屏适配的尺寸单位

将屏幕分成750份，即当前屏幕的宽都为750rpx

不同大小屏幕的1rpx单位大小不一样

rpx和px之间的单位换算

列  苹果6屏幕宽度为375px，分成750个物理像素，为750rpx

750rpx  =  375px  =  750物理像素

1rpx  =  0.5px  =  1物理像素

2样式导入

@import 需要导入的外联样式表的相对路径

/**  common.wxss  **/

.a{

        width:100rpx

}

/**  app.wxss  **/

@import "common.wxss"

.b{

        hieght:100rps

}

3：局部样式和全局样式

在app.wxss中定义的wxss文件在所有小程序页面中适用，即全局样式

在pages中定义的wxss只在所处文件夹中适用，即局部样式

4:全局配置

小程序根目录下的app.json文件是小程序的全局配置文件

常用的配置项

1：pages

        记录当前小程序所有页面的存放路径

2：window

        全局设置小程序窗口的外观

3：tabBar

        设置小程序底部的tabBar效果

4：style

        是否用新版的组件样式

5：全局开启下拉刷新功能

重新加载页面数据

全局设置下拉刷新

小程序根目录下app.json文件中的window下设置

enablePullDownRefresh 属性 ：false / 下拉不刷新   true / 下拉刷新

改变下拉背景颜色：

backgroundColor

改变下拉加载样式

backgroundTextStyle

列子

  "window":{

                        "enablePullDownRefresh":true,

                        "backgroundColor": "#000000",

                         "backgroundTextStyle":"dark"

        }

 

6：设置上拉触底的距离

上拉触底，为了加载更多数据

onReachBottomDistance

7:全局设置tabar

tabar的组成部分:

        backgroColorlor ：tabar的背景颜色

        selectcdlcenPath：选中图片路径

        selectedColor：选中时的文字颜色

        borderStyle：上边边框颜色

        iconPath：未选中图片时的图片路径

        color：字体颜色

tabar节点的配置项：

        list：数组类型        tab页签的列表，最少2个，最多5个

        position:         tabBar的位置，只支持botton/top

        borderStyle：        tabBar上边框的颜色，仅支持black/white

        color:        文字默认颜色

        selectedColor：        被选中时文字颜色

        backgroundColor：        背景颜色

重点list

tab项的配置选项：

        pagePath：                            页面路径，页面必须在pages中预先定义

        text：                                      tab上显示的文字

        iconPath：                             未被选中的图标路径：当position为top时，不显示icon

        selectediconPath：                选中时的图表路径：当position为top时，不显示icon

"tabBar": {

            "list": [{ 

                              "pagePath": "pages/index/index",

                              "text": "text"+++

                    },{

                              "pagePath": "pages/logs/logs",

                              "text": "texts"

            }]

  },

8：页面配置

小程序可以在app.json的window节点中可以全局配置每个页面的窗口表现

导航栏背景颜色颜色

"navigationBarBackgroundColor": "#000000"

 导航栏标题颜色

"navigationBarTextStyle": "white"       值选项只支持 white / black

导航栏标题文字内容

"navigationBarTitleText": "这是桃十一的小程序",