小程序项目遇到的一些问题

阻止事件冒泡： 把 'bindtap'改成'catchtap'

遮罩层穿透问题：catchtouchmove="true"

父子组件传递数据

// 父组件.wxml
<my-component name="{{name}}" age="{{age}}"><my-component>
// 父组件.js
data: {
    name: 'paggy',
    age: 25
    }
      
// 子组件 
properties:{
    name: {
     type: String,
     value: '小明'   
    },
    age: Namber
}

子父组件传值：

// 子组件.js
methods: {
    changeName() {
        this.triggerEvent('changeName',{
            name: '李四'
        })
    }
}

// 父组件.wxml
<my-component name="{{name}}" age="{{age}}" bindchangeName="changeName"><my-component>
// 父组件.js
changeName(event) {
    接收数据
}

小程序样式中如果要子元素宽度是父元素的100%并且加padding值时，需要在外面加上一个大盒子来包裹子元素

 

关于键盘弹起需要顶起页面 输入框获取焦点 bindfocus 把e.detail.height设置成padding-bottom 或者 使用定位动态给予bottom 注意单位要用px

 

小程序事件传递参数，在标签内部定义data-xx

事件中使用event.currentTarget.dataset.xx拿到参数

 

小程序存储数据

// 存数据
wx.setStorage({
    key: '',
    data: ''
})

// 取数据把set换成get

图片转换成base64进制

wx.getFileSystemManage().readFileSync('路径'，'base64')
需要识别图片时加前缀： 'data:image/pang;base64,'

bindtap会触发事件冒泡 catchtap没有冒泡

 

自适应高度宽度css函数calc（）

height: calc(100vh - 0rem)
width: calc(100% - 0rem)
运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；

小程序返回上一页 刷新数据

// 在需要刷新的页面.js
/**
* 生命周期函数--监听页面显示
*/
  onShow: function () {
      重新请求数据
  }

微信小程序开发单位的问题 只是用rpx作为单位

 

wxss不支持本地图片有时候我们添加背景图片的时候直接添加文件路径 小程序不支持 只能用线url

 

直接复制会改变data的数据

 

文本超出显示省略号

// 单行文本
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

//多行文本
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // 需要显示省略号的行数
-webkit-box-orient: vertical;