做微信小程序项目时积累的知识

2023-10-17 16:31:52

1. 如何根据文本，图片内容定义背景颜色的宽度 ,只需要在他们的外面包一层行内块级元素就可以了 display:inline-block

2. 复制微信好的时候，api会有一个默认弹出的提示“内容已复制”，想要修改显示内容

  // 复制微信号码
    handlerAddFriend(e){
      console.log(e)

  
  wx.setClipboardData({
  data: e.currentTarget.dataset.wechat ,/*这里输入你需要用户被复制的内容*/ 
  success: function (res) {
    wx.showToast({
      title: ‘微信号复制成功‘,
    })
  wx.getClipboardData({
  //这个api是把拿到的数据放到电脑系统中的
  success: function (res) {
  console.log(res.data) // data
  }
  })
    }
  })
  },

3.阻止Picker组件的bindchange事件可以通过disabled控制通过有没有数据来借助disabled来实现效果

4.文本标签过长，但是又不知道文本具体长度，想要以三个点省略

    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;

5.关于web-view组件的使用(这个组件的作用是引入外部网络路径的页面), 首先单独定义一个页面存放web-view组件 ,src属性中存放路径，然后在其他页面想要进来的地方定义方法跳转,首次如果不成功，关闭开发工具重启就可以了

6.在使用flex布局的时候，让文本和图片显示在一行内，有时文本过长可能会造成图片被挤压

   flex-grow: 0;//扩张为0
  flex-shrink: 0;//收缩为0

7.穿插一个datalist标签的使用(html5标签)

<input type="type" name="className" id="className" value="" list="classes"/>
<datalist id="classes">
    <option value ="计算机"></option>
    <option value ="计算机信息管理"></option>
    <option value ="语文"></option>
    <option value ="汉语言文化"></option>
</datalist>
//datalist是html5中的标签，他必须与input一起使用,input中的list属性结果与datalist中的id属性结果一样，他与select标签的不同是他不仅可以选择，而且还可以根据用户输入的文字进行模糊查询显示

<select name="groups">
    <option value="1">武术社团</option>
    <option value="2">舞蹈社团</option>
</select>

8. catchtouchmove="true" 加在自定义模态框的最外层，就可以禁止滚动模态框的时候，背景页面也滚动的效果.但是他在模拟器中显示不出来，可以在手机上预览

9.padding和border使用时，如果不想让他影响到width和height的值，需要用box-sizing:border-box实现怪异盒模型

10.设计美感外边图形的圆角60px -外边图形的圆角40px =两者之间的边距20px

<view class="outer">
  <view class="wrap">
    <view class="inner"></view>
  </view>
</view>

.outer{
  width: 300px;
  height: 300px;
  background-color: cadetblue;
  border-radius: 60px;
}

.wrap{
  padding: 20px;
}
.inner{
  width: calc(300px - 40px);
  box-sizing: border-box;
  background-color: coral;
  height:calc(300px - 40px) ;
  border-radius: 40px;
  
}

11.判断用户是否在数据库中被删除，可以在app.js中的onLaunch中进行接口的判断，因为在小程序初始化的时候会执行他，

12.wx.navigateTo 和wx.navigateBack 的使用

wx.navigateTo在跳转到其他页面的时候，会保留本页面，

wx.navigateBack可以通过getCurrentPages()获取当前页面栈(是个数组),可以通过页面栈的下标（页面栈.length-数字） ,获取到其他页面栈，进而通过页面栈.setData({}) 修改其他页面栈的值

做微信小程序项目时积累的知识

码农公寓

相关文章