WXML 语言（类似Html5）学习笔记 --- 组件
<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;
}*.mxml
<scroll-view class="des-scr" scroll-y="true" bindscroll="scroll">
<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用到页面之间传递参数 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 创建一个视口，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
} })