微信小程序开发常用代码

wx.showLoading({
      title: '玩命加载中',
})

wx.hideLoading();

wx.showToast({
          title: '没有更多数据',
})

//页面上拉加载更多
onReachBottom  当数据不够一屏幕时不会触发

控件（按钮）横向排列 wxss

.view_class {
   display: flex;
   flex-direction: row;
   justify-content: center;
 }

控件（按钮）纵向排列 wxss

view_class {
   display: flex;
   flex-direction: column;
   justify-content: center;
}

console.log("控制台打印输出");

wx.showModal({
 title: '提示',
 content: '这是一个模态弹窗',
 success: function(res) {
  if (res.confirm) {
   console.log('用户点击确定')
  }
 }
})

for(var i = 0; i < _this.data.array.length; i++){

}

//跳转传json参数
wx.navigateTo({
        url: '/pages/register/organname?orgType=' + this.data.orgType + '&region=' + JSON.stringify(this.data.region),
})

JSON.parse(arrJosn);

"navigationStyle": "custom" 去除title

url: '/pages/faceinfo/facepreview?tag=' + "1",

//返回上级页面，默认返回1级
wx.navigateBack();

wx.navigateBack({
     //返回级数设置    
     delta: 2
});

校园版小程序  AppID(小程序ID)    wx1a6abf2f8d546a7e

https://www.yasuotu.com/     图片无损压缩

disabled="false"

小程序分包
"subPackages": [
    {
       "root": "packageA",
          "pages": [
            "pages/detail"
      ]
    }
  ],

validation: function(values) {
    if (values.name === '') {
      this.data.error = '姓名不能为空';
      return false;
    }
｝

// 表单验证
    if (!_this.validation(values)) {
      App.showError(_this.data.error);
      return false;
    }

//设置不可点击
disabled="{{disabled}}"

//滚动默认选项设置  value就可以了
<picker mode="multiSelector" bindchange="bindPickerTime" value="{{index5}}" range="{{timeArray}}">
      <input class="text-msg view-msg-color" disabled="false" placeholder-style="color:#009ad6;" name="operateTime" value="{{timeStr}}" placeholder="请选择"></input>
  </picker>

//点击事件
bindtap=""

//数据回传上个页面
var pages = getCurrentPages();
      var prevPage = pages[pages.length - 2];  //上一个页面
      prevPage.setData({
        deptId: _this.data.deptId,
        deptName: _this.data.deptName,
        deptNo: _this.data.deptNo
      });

//删除指定数组项   splice参数说明 第一个参数是数据下标，第二个参数是删除数量
_this.data.personList.splice(i,1);

//取出对象的键
Object.keys(对象)[0]
//取出对象的值
Object.values(对象)[0]

wx1a6abf2f8d546a7e

wx.setStorageSync（同步缓存）wx.getStorageSync（取数据）

wx.setStorage（异步缓存）wx.getStorage（取数据）

catchtap 如果在这个控件下面子控件还有点击，会阻止子控件执行点击
bindtap 如果在这个控件下面子控件还有点击，不会阻止子控件执行点击

delete values.键值    剔除对象中不需要的参数;

//字符串转数组
var words = words.split(",");    //转成数组类似php的explode函数 

Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

//图片旋转
<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="animation-element-wrapper">
        <view class="animation-element" animation="{{animation}}"></view>
      </view>
      <view class="animation-buttons" scroll-y="true">
        <button class="animation-button" bindtap="startAnimationInterval">旋转</button>
        <button class="animation-button" bindtap="stopAnimationInterval">暂停</button>
        <button class="animation-button" bingtap=""></button>
        <button class="animation-button animation-button-reset" bindtap="reset">还原</button>
      </view>
    </view>
  </view>
</view>

var _animation; // 动画实体
var _animationIndex = 0; // 动画执行次数index（当前执行了多少次）
var _animationIntervalId = -1; // 动画定时任务id，通过setInterval来达到无限旋转，记录id，用于结束定时任务
const _ANIMATION_TIME = 60; // 动画播放一次的时长ms
Page({
  data: {
    animation: ''
  },
  onReady: function () {
    _animationIndex = 0;
    _animationIntervalId = -1;
    this.data.animation = '';
  },

  onShow: function () {
    _animation = wx.createAnimation({
      duration: _ANIMATION_TIME,
      timingFunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
      delay: 0,
      transformOrigin: '50% 50% 0'
    })
  },

  /**
   * 实现image旋转动画，每次旋转 1 * n度
   */
  rotateAni: function (n) {
    _animation.rotate(1 * (n)).step()
    this.setData({
      animation: _animation.export()
    })
  },

  /**
   * 开始旋转
   */
  startAnimationInterval: function () {
    var that = this;
    that.rotateAni(++_animationIndex); // 进行一次旋转
    _animationIntervalId = setInterval(function () {
      that.rotateAni(++_animationIndex);
    }, _ANIMATION_TIME); // 每间隔_ANIMATION_TIME进行一次旋转
  },

  /**
   * 停止旋转
   */
  stopAnimationInterval: function () {
    if (_animationIntervalId > 0) {
      clearInterval(_animationIntervalId);
      _animationIntervalId = 0;
    }
  },
})

setTimeout(function () {
    console.log("----Countdown----");
  }, 1000);

获取控件的高度是px, 再乘以750转换成rpx

page{
    height:100%;//这样你在页面中的view设置height:100%就起作用了
}

view{
     height:100vh;//相对于视口的高度。视口被均分为100单位的vh，100vh就是充满整个屏幕了
}

//view一个设置了高度,另一个填满剩下空间
page{
  height:100%;
  display: flex;
  flex-direction: column;
  background: #6e6d6b;
}

.view-1{
  background: #ff9900;
}

.view-2{
  background: blue;
  flex: 1;
  align-items: center;
  justify-content: center;
  display: flex;
}

 微信小程序开发中bindtap和catchtap的区别

父元素使用 bindtap 绑定事件后，子元素也用 bindtap 绑定事件。

那么当触发子元素事件时，我们发现同时也触发使用 bindtap 绑定事件的父元素事件。

如果我们需求只要触发子元素事件，那么我们可以在子元素中用 catchtap 代替 bindtap 去绑定事件。

//微信小程序CheckBox样式修改
/* 未选中的 背景样式 */

checkbox .wx-checkbox-input{

  width: 40rpx;

  height: 40rpx;

  float: left

}

/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */

checkbox .wx-checkbox-input.wx-checkbox-input-checked{

  border: none;

  background: rgba(65,163,250,1);

}

/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{

  border-radius: 50%;/* 圆角 */

  width: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */

  height: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */

  line-height: 40rpx;

  text-align: center;

  font-size:30rpx; /* 对勾大小 30rpx */

  color:#fff; /* 对勾颜色 白色 */

  background: transparent;

  transform:translate(-50%, -50%) scale(1);

  -webkit-transform:translate(-50%, -50%) scale(1);

}

字体划线效果
  <view style='font-size:14px;'>
       原价：
       <text style='color:#FF6F10;text-decoration:line-through;'> 9.00 </text>
  </view>

1 /**index.wxss**/  
2 .content{  
3   height: 600px;  
4   display: flex;  
5   flex-direction: column;  
6 }  

1 <!--index.wxml-->  
2 <view class="content">  
3   <view style="flex:1;width:100%;background-color:green">box1</view>  
4   <view style="flex:1;width:100%;background-color:blue">box2</view>  
5   <view style="flex:1;width:100%;background-color:yellow">box3</view>  
6 </view>  

<text class="time">0:00</text>
<view class="btns">
        <image class="preBtn" bindtouchstart="touchPreBtn" bindtouchend="pre" src="/images/play-last.png" mode="aspectFit">⋘</image>
        <image class="playBtn" bindtouchstart="touchPlayBtn" bindtouchend="playOrpause" src="/images/play.png" mode="aspectFit"></image>
        <image class="nextBtn" bindtouchstart="touchNextBtn" bindtouchend="next" src="/images/play-next.png" mode="aspectFit">⋙</image>
</view>

str="1_abcdefg"  //字符串，想要的是以下划线截取前后的字符

 s = str.indexOf('_') //找到第一次出现下划线的位置

str_new 1= str.substring(0,s )  //取下划线前的字符

str_new 1= str.substring(s+1) //取下划线后的字符