WXML 语言（类似Html5）学习笔记 --- 组件

1、-- 组件 view & text 显示文本信息，文本信息保存在变量motto里

<view class="usermotto">
    <text class="user-motto">{{motto}}</text>
</view>

在*js里面给变量motto赋值

*.js
this.setData({
      motto: 'HelloWord!'
})

2、-- 组件 按钮的使用，点击启动函数 newBtnDown()，按钮式样css举例

*.WXML
<button class="new-btn"  bindtap="newBtnDown">按钮</button>

*.js
  newBtnDown() {
    //Zha: 取得今天的日期
    getNowFormatDate()
  },

*.wxss
.new-btn{
  position:absolute;
  bottom: 200rpx;
  right: 0rpx;
  width: 80rpx;
  height: 80rpx;
  background: darkorange;
  border-radius: 50%;
  font-size: 48rpx;
  line-height:80rpx;
}

3、--  组件 scroll-view & Block & navigator 的使用，使用wxml：wx: for

*.mxml
<!--底部滚动-->
<scroll-view class="des-scr" scroll-y="true" bindscroll="scroll">
  <!--循环view-->
  <block wx:for="{{desArr}}">
    <navigator url="../NoteEdit/NoteEdit?des={{item.des}}&time={{item.time}}&image={{image}}&id={{item.id}}&revise=1">
      <view class="des-view"  bindtap="toiletDetails" id="{{index}}">
        <text class="des-text">{{item.des}}</text>
        <text class="des-tiemText">{{item.time}}</text>
      </view>
    </navigator>
  </block>
</scroll-view>

*.wxss
.des-scr{
  width: 100%;
  height: 100%;
}
.des-view{
  margin: 5%;
  width: 90%;
  height: 180rpx;
  border:1px solid orange;
}
.des-text{
    display: block;
    margin:20rpx;
    height: 80rpx;
    overflow: hidden;
}
.des-tiemText{
  display: block;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  height: 40rpx;
  text-align: right;
}

实现效果：

//*mxml用到 wx:for = “{{desArr}}” 循环体是 {{desArr}} , 这是一个数组， wx:for 自动从数组中逐一提取每一个变量 {{item}} 

//*mxml用到< navigator url =""> 这是一个超级连接组件，它包括的范围里的组件被点击，则跳转到目的页面（定义在 Url )
//*mxml用到页面之间传递参数 url = ".../NoteEdit/NoteEdit？des={{item.des}}&time={{item.time}}" 
// ? 表示后面是传递的参数， des 是目的页面里定义好的变量， {{}} 里是传递过去的值， & 连接符合，连接多个传递过去的参数
//*js里用到了mxs函数 desArr: wx.getStorageSync ( 'oldText' )
详细介绍，请见： wx: getStorageSync(string)

//

*.js
//获取应用实例
const app = getApp()

Page({
  data: {
    today: '',//当天日期
    image: '/pages/image/111.jpg',//背景图片
    desArr: []//数据源数组
  },
 
  onLoad: function (options) {
    //-监听页面加载
    //获取缓存内容
    this.setData({
      desArr: wx.getStorageSync('oldText')
    })
    if (this.data.desArr == null && this.data.desArr == '') {
      //如果没有缓存则为空
      this.setData({
        desArr: []
      })
    }
    //获取当天日期
    var day = this.getNowFormatDate()
    this.setData({
      today: day
    })
  },

//用惯了C语言的老程序，比如我，肯定会困惑：这个desArr到底是什么变量？是什么类型的变量？从代码看，似乎它下面还有分变量：item.des, item.time, item.id. 我仔细研究后发现，它只有这3个分变量。那么这3个分变量哪里来的呢？我研究了 NoteEdit.js发现里面有这样的语句：oldText[i] = { 'des': this.data.textAreaDes, time: dic.time, 'id': dic.id }; 我就明白了，不同于C语言，变量必须先声明类型才能使用，现代的很多语言是“只需要声明x是变量” 然后你随便给x赋值，赋值整数它就是整数变量，赋值浮点数它就是浮点数变量，赋值字符串它就是字符串变量。微信小程序也是这样，我们只知道“oldText”这个数组变量存储在本地（用wx.setStorageSync('oldText', oldText); 和 var oldText = wx.getStorageSync('oldText'); 存贮和读取此变量，这个变量其实就是“结构体数组”，此结构体由3部分组成：1、字符串 2、时间 3、id。数组大小完全是动态的。

4、-- 文本输入框的实现, 用到 view & textarea

*.wxml
<!--输入框-->
<view class="the-view">
  <textarea class= "the-textarea"  bindinput="bindTextAreaBlur" style="  margin: 5%;width: 90%;height: 90%" auto-focus value="{{des}}"maxlength="-1" cursor-spacing="0">
  </textarea>
</view>

//view 创建一个视口，textarea 是一个可以接受输入的空间：输入的动作要调用函数 bindinput="bindTextAreaBlur"，此函数在*.js里有定义，bindTextAreaBlur 主要功能就是把输入的值赋给变量textAreaDes， this.setData({textAreaDes: e.detail.value})--

*.wxss
.the-view{
  position:absolute;
  top: 7%;
  width: 100%;
  height: 86%;
}
.the-textarea{
  overflow:hidden;
}

//JS

*.js 
 bindTextAreaBlur(e) {
    //当输入的文字改变走这个方法
    //记录输入的文字   
    this.setData({
      textAreaDes: e.detail.value
    })
  },

5、-- 滑块视图容器, 用到swiper

*.wxml
<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>

//*.js

*.js
Page({
  data: {
    imgUrls: [
      'https://www.tuozhirobot.com/_image/FirstImage.jpg',
      'https://www.tuozhirobot.com/_image/DataManager.jpg',
      'https://www.tuozhirobot.com/_image/News_1.jpg'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000
  } })

//后续，待更新。