问题一:open-data的用户头像显示为圆形
display: block; // 重点
overflow: hidden; // 重点
width: 120rpx;
height: 120rpx;
border-radius: 50%;
问题二:设置input的placeholder样式
在input框多加placeholder-class
<input placeholder-class="phcolor" placeholder="邮箱" type="text" /></view>
问题三:slot
为了避免踩更多的坑,最好先看一下官网关于组件slot的介绍:官网slot介绍
需要多个slot的话,要在组件的js进行配置
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
}
现在来看具体的用法
- 组件的js
properties: {
age: Number, // 设置属性
name: { // 设置属性
type: String,
value: 'zhangsan' // 两种形式都可以,但是这种方式更好一些,可以设置默认值,如果不传的话
}
}
- 组件的wxml
<view>年龄:{{age}}</view>
<view>姓名:{{name}}</view>
- 页面wxml
<myCom age="999" name="lisi"></myCom>
- 页面的json
{
"usingComponents": {
"myCom": "/components/myCom/myCom"
}
}
- 页面展示
问题四:thirdScriptError
Cannot read property ‘setData’ of undefined;at api openAddress success callback function
TypeError: Cannot read property ‘setData’ of undefined
被自己蠢哭的一个问题,还纠结了老久,去百度了好久,也没找到合适的解决方案,后面问了大神,就被鄙视了,因为犯了很低级的问题。
- 代码之前是这么写的
handleAddress: function () {
wx.chooseAddress({
success (res) {
let self = this // 重点,位置问题
let tempAddress = `${res.provinceName} ${res.cityName} ${res.detailInfo}`
let address = 'userInfo.address'
self.setData({
[address]: tempAddress
})
}
})
}
因为把let self = this这个位置放错地方,对this的绑定原理还是了解不够透彻呀
- 之后
handleAddress: function () {
let self = this // 重点
wx.chooseAddress({
success (res) {
let tempAddress = `${res.provinceName} ${res.cityName} ${res.detailInfo}`
let address = 'userInfo.address'
self.setData({
[address]: tempAddress
})
}
})
}
- 如果用的是箭头函数,就不用考虑箭头指向问题了
handleAddress: function () {
wx.chooseAddress({
success: (res) => {
let tempAddress = `${res.provinceName} ${res.cityName} ${res.detailInfo}`
let address = 'userInfo.address'
this.setData({
[address]: tempAddress
})
}
})
}