zoukankan      html  css  js  c++  java
  • 做微信小程序项目时积累的知识

    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({})     修改其他页面栈的值      

     13.加载数据的时候让在当前页面显示导航条加载动画

    wx.showNavigationBarLoading()  //在标题栏中显示加载
    
    
    wx.hideNavigationBarLoading() //完成停止加载

    14.微信小程序中的picker组件中的 fields="month"可以定制只有年月的选择

  • 相关阅读:
    Eclipse 远程调试
    大数据处理方法bloom filter
    sicily 1259 Sum of Consecutive Primes
    sicily 1240. Faulty Odometer
    sicily 1152 简单马周游 深度优先搜索及回溯算法
    sicily 1050 深度优先搜索解题
    sicily 1024 邻接矩阵与深度优先搜索解题
    sicily 1156 二叉树的遍历 前序遍历,递归,集合操作
    sicily 1443 队列基本操作
    sicily 1006 team rankings 枚举解题
  • 原文地址:https://www.cnblogs.com/shanchui/p/13339031.html
Copyright © 2011-2022 走看看