小程序学习总结（踩坑记录）
1、背景图片全屏显示
描述：首先在小程序中显示背景图片的话不能使用 image ，image 只能用在显示在最上层的图片展示，背景图片显示需要通过 view 来实现，在你像设置的位置设置 view 的样式，之后在 view 的样式中设置 background-image
如果是背景颜色相同的话则设置 background-color ，example：
.home-bg {
position: fixed;
height: 100%;
width: 100%;
display:flex;
flex-direction:column;
background-color: #F8D300;
}
如果所需设置的背景是图片的话
/*最外层布局的style*/
.container {
background: url('https://www.tfdor.cn/resources/coupon/index_bg.jpg') no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
position: fixed;
}
从上面两个 demo 可以看出 width：100%； height：100%；position：fixed；是必须设置的，至于他们这些是什么意思我会在后面的 demo 中显示出来。
2、如何实现text显示一定数量行，超出部分显示省略号
描述：首先在小程序中显示一部分段落是用 text 组件或者是 textarea 组件。其中 textarea 会有默认的高度。所以如果我们想要实现只显示两行或者三行等后面多余部分显示省略号的话就只能使用 text。
<view class='item-content'>
<text disabled='true' class='content-book'>{{item.content}}</text>
</view>
下面是样式文件信息；（PS：这里的属性除了 font-size 和 color 是分别设置字体大小和颜色之外，其余每一个属性都缺一不可，其中 width 的宽度可以指定，不指定也没影响；但是剩下的属性少了一个都会达不到预期的效果）
.content-book {
font-size: 28rpx;
color: #CCCCCC;
/* width: 700rpx; */
word-break: break-all;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
运行结果截图如下
3、如何实现点击 item 子项跳转，（得到点击的位置）
描述：这里想要提到的其实有两个部分，一个是如何获取到当前点击到的列表子项是第几个，第二个部分是如何点击子项传递参数和目标页面的获取参数。先看第一个问题
/**
* 页面的初始数据
*/
data: {
getData: [], //初始化一个空的数组，用以保存本地有值的时候添加
length: 0, //数组长度
},
//单击事件的响应
shortTap: function(e) {
let index = parseInt(e.currentTarget.dataset.index);
console.log('当前点击位置为' + index)
let model = this.data.getData[index]
console.log(model.title)
console.log(model.content)
let url = '../detail/detail?title=' + model.title + "&content=" + model.content;
console.log(url)
wx.navigateTo({
url: '../detail/detail?title=' + model.title + "&content=" + model.content + "&id=" + index,
})
},
<view class='item-style' data-index='{{index}}' bindtap='shortTap' bindtouchstart="mytouchstart" bindtouchend="mytouchend" wx:for="{{getData}}">
...
</view>
从上面三个代码块可以看到， getData 是一个数组；shortTap 是 view 中的点击事件，通过 bindtap 来绑定。可以通过 e.currentTarget.dataset.index 来获取具体的点击位置，下标从0开始。中间的 url 部分则展示了链接的拼接部分。其中 ？后面是参数的名字，= 后面是具体的传参数值。有多个参数的时候通过 & 来拼接即可。
这是获取点击位置和传递参数，那获取参数呢？毫无疑问是需要前后对应的，我们在传递参数的时候使用了什么参数名，在获取参数的时候我们就使用什么参数名。example：
/**
* 页面的初始数据
*/
data: {
id: 0, //标识是第几个
item_title: '',
item_content: '',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
item_title: options.title,
item_content: options.content,
id: options.id, //得到点击位置
please_input_title: '',
pleast_input_content: '',
})
console.log(this.data.item_title)
console.log(this.data.content)
},
可以看到我们首先在 data 中申明了几个变量用来存放获取到的参数值。这样就可以在全局使用。同时我们会发现在生命周期函数中的 onLoad 里有个参数是 options ，我们使用这个的时候直接通过 .参数名 就可以得到传递过来的参数值，注意名称要能够前后对应。如果大家还有看不懂的地方请看下方链接：
上方链接讲述的可以说是非常详细了，其中还有截图。相信大家可以看的很清楚。
4、有关数组的取值问题
描述，其实本省数组本身取值没什么好说的，我一开始做的时候没有成功出现了一些问题我也记不清是什么原因导致的了。。。说来有些莫名的尴尬。主要就是通过 [ ] , 里面传入下标值，前方就是它的数组名称即可。这里在前面的代码部分就可以看到。
getData 就是定义在初始化数据 data 中的空数组。我之所以在这里提了一下是因为我们在删除列表数据的时候可能使用到的一些方法 splice ， pop， push；
splice 方法是删除数组列表中从 id 开始往后的 n 个元素。 splice(id, n); 我们一般删除中间的元素。长按删除可以用到。
pop 和 push 想必大家比较熟悉，pop 是把数组的最后一个元素删除，push 表是在数组末尾追加元素。example
let that = this;
let index = parseInt(e.currentTarget.dataset.index);
console.log('当前点击位置为' + index)
let list = that.data.getData
list.splice(index, 1)
/**
* 页面的初始数据
*/
data: {
file_list: [],
file_one: {
id: '', //用于标识
title: '',
content: '',
}
},
let getTitle = this.data.file_one.title
let getContent = this.data.file_one.content
let getId = util.formatTime(new Date())
this.data.file_one.id = getId; //设置唯一标识
if(getTitle != null && getContent != null && getTitle != '' && getContent != '') {
this.data.file_list = wx.getStorageSync("file_list") || []
this.data.file_list.push(this.data.file_one)
//成功后跳转listView界面
wx.navigateTo({
url: '../listView/listView',
})
},
这里有一个地方需要注意，相信大家已经发现我在初始化数据 data 中定义了一个对象的变量。那我们在修改它的值的时候怎么做呢？直接在 this.setData({ }) 然后加上this.data.file_one.content 吗？答案是否。有兴趣的同学们可以试一试，小程序无法识别这种写法，它会提示你说应该把 . 改成 ：。那我们就没办法了吗？当然不是，请看example：
这两个函数分别是响应 input 和 textarea 的获取输入的函数，不过这里又有一个坑需要大家注意，就是这个函数只有当用户修改了你输入的值才能够获取到当前输入框中的值，否则获取到的值为空。大家可能觉得有些抽象，我本来使用输入框不就是用来输入的吗？这里有什么需要注意的地方。（那大家想一下如果点击让你把列表的值显示出来呢？可以编辑修改，如果你不修改点击返回回去上一个页面当然没有问题，如果你点击了保存可以试试，结果觉得出乎你的意料。值是空的。当然解决方案这里就不多说了，大家可以自己思考）
5、长按事件和单击事件
描述：这里也有一个坑，大家如果仔细查看文档就可以发现，bindtap 和 longtap 他们的前一半响应周期是一样的，完全一样，当然现在文档推荐长按事件使用 longpress，我这里没有使用过不知道。不过我的长按事件使用 bindtap 就完成了，增加了一个时间判断，否则你的长按会响应点击事件。example
<view class='item-style' data-index='{{index}}' bindtap='shortTap' bindtouchstart="mytouchstart" bindtouchend="mytouchend" wx:for="{{getData}}">
...
</view>
/**
* 页面的初始数据
*/
data: {
// 触摸开始时间
touch_start: 0,
// 触摸结束时间
touch_end: 0,
// 最后一次单击事件点击发生时间
lastTapTime: 0,
},
//按下事件开始
mytouchstart: function (e) {
let that = this;
that.setData({
touch_start: e.timeStamp
})
console.log(e.timeStamp + '- touch-start')
},
//按下事件结束
mytouchend: function (e) {
let that = this;
that.setData({
touch_end: e.timeStamp
})
console.log(e.timeStamp + '- touch-end')
},
重点来了，小本本准备好
//单击事件的响应
shortTap: function(e) {
let that = this;
let index = parseInt(e.currentTarget.dataset.index);
//触摸时间距离页面打开的毫秒数
let touchTime = that.data.touch_end - that.data.touch_start;
console.log('当前点击位置为' + index)
console.log(touchTime);
let list = that.data.getData
if (touchTime > 350) {
wx.showModal({
title: '提示',
content: '是否删除该日记',
success: function (res) {
if(res.confirm) {
//用户点击了确定按钮
list.splice(index, 1)
wx.showLoading({
title: '正在删除',
})
that.setData({
getData: list
})
wx.setStorageSync("file_list", that.data.getData)
setTimeout(function () {
wx.hideLoading()
}, 1200)
console.log('删除成功')
console.log(that.data.getData)
that.onLoad()
}
if(res.cancel) {
//用户点击了取消按钮
console.log('用户点击了取消按钮')
}
}
})
} else {
//否则调用点击事件
let model = this.data.getData[index]
console.log(model.title)
console.log(model.content)
let url = '../detail/detail?title=' + model.title + "&content=" + model.content;
console.log(url)
wx.navigateTo({
url: '../detail/detail?title=' + model.title + "&content=" + model.content + "&id=" + index,
})
}
},
在这里大家把握住几个重点即可，首先我们获取到长按的时间间距是多少，然后增加一个判断用来处理长按和点击事件。之后在 if else 中分别实现即可。
6、了解下闭包，为什么在 success 里不能直接用 this.data 必须存个变量
描述：什么是闭包？就是函数内部的函数，这是 js 特有的链式调用，父函数的所有变量对于子函数来说都是可见的。但是子函数中的变量父函数无法得到。我在这里使用了
let that = this;
wx.showModal({
title: '提示',
content: '是否删除该日记',
success: function (res) {
if(res.confirm) {
//用户点击了确定按钮
list.splice(index, 1)
wx.showLoading({
title: '正在删除',
})
that.setData({
getData: list
})
wx.setStorageSync("file_list", that.data.getData)
setTimeout(function () {
wx.hideLoading()
}, 1200)
console.log('删除成功')
console.log(that.data.getData)
that.onLoad()
}
if(res.cancel) {
//用户点击了取消按钮
console.log('用户点击了取消按钮')
}
}
})
这里就是用来闭包的概念。如果我没有用 let that = this 的话。二是在 wx.showModal 函数中的 success 里直接使用 this.setData 会报 null 的错误。导致无法正常运行结果。
7、position 的几种布局样式的使用方式
描述：position 的使用。比如我们需要实现 Android 中类似于 FloatingButton 的效果就可以通过 position 的效果 fixed 来实现。这里先插一段链接
这里我就当一个搬运工吧，把几个属性介绍一下：
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed ：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。（注意是绝对定位的元素）
relative ：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static ：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明） 。
inherit ：规定应该从父元素继承 position 属性的值。
8、如何提取出小程序列表子项的模板
描述：毫无疑问封装和重用节省代码的好方法。只是我们在开发中经常会只专注与功能的实现而不是重用和封装。遇到相同的代码往往是 ctrl c + v 就能解决问题。不过如果想要我们的代码更加完美的话我们还需要付出更多的努力。先上链接：www.sohu.com/a/197679937… 这里介绍了小程序如何写模板。
这个点是我没有做到的。不过我作为笔记记录下来加深自己的印象也是为了给自己提醒去熟悉微信小程序的功能。可以看文档。developers.weixin.qq.com/miniprogram…
