【微信小程序】常用代码

个人博客里面阅读起来可能要清楚一些
个人博客

常用UI库

推荐使用：https://github.com/weilanwl/ColorUI
微信官方：https://github.com/wechat-miniprogram/miniprogram-demo
有赞组件库：https://github.com/youzan/vant-weapp
有赞文档：https://youzan.github.io/vant-weapp

控件绑定事件并传参

wxml

clickMe

js

Page({
  data: {
    motto: ''
  },
  clickMe(e) {
    var index = e.currentTarget.dataset.index
    this.setData({
        motto: index
    })
  }
})

网络请求

js

Page({
  data: {
    motto: ''
  },
  clickMe(e) {
    wx.request({
      url: 'http://10.8.50.97:8888/api/dynamics', 
      data: {
        x: '1',
        y: '2'
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        that.setData({
          dynamicList: res.data.data
        })
      }
    })
  }
})

文本自动多行显示css

word-break: break-all

js中引入其他js

1.init.js

var menu=[
  { 
    "url": "../dynamic/list", 
    "name": "朋友圈", 
    "color": "#1296db", 
    "image": "../../resources/images/friend.png", 
    "openType": "navigate"
  },
  { 
    "url": "../logs/logs", 
    "name": "日志", 
    "color": "#333333", 
    "image": "../../resources/images/log1.png", 
    "openType": "switchTab"
  }
]

module.exports = {
  menu: menu
}

2.其他js中使用

var init=require("../../resources/json/init.js")
var menu= init.menu

延时执行

setTimeout(function () {
   //要延时执行的代码
}, 1000) //延迟时间 这里是1秒

字符串去除空格

str.replace(/s+/g, '')

按钮置底

position: fixed;
bottom: 0;
width: 100%;

提示框

wx.showToast({
   title: '服务结果不能为空!',
   icon: 'none',
   duration: 2000
})

给之前的任意界面传值

var pages = getCurrentPages();
var Page1 = pages[pages.length - 1]; //当前页面
var Page2 = pages[pages.length - 2]; //上一个页面
var backPage = pages[pages.length - 3];  //上两个页面
backPage.setData({
    tagsIsLoad: true
});

wxml页面使用的wxs函数

1.subutil.wxs

var sub = function (val,start,end) {
  if (val.length == 0 || val == undefined) {
    return;
  }
  return val.substring(start, end);
}

var toString = function (val) {
  return String(val);
}

module.exports = {
  sub : sub,
  toString: toString
}

2.在wxml中引入使用

加载动画

wx.showLoading({
   title: '加载中...',
   mask:true
})

wx.hideLoading();

JSON序列化和反序列化

//对象转JSON
var peopleJson = JSON.stringify(people);
//JSON转对象
var people = JSON.parse(peopleJson);

从点击处，弹出菜单栏

wxml

      编辑  
    
      取消
    

wxss

.menu{
  height:192rpx;
  width:216rpx;
  background-color: #333333;
  position: absolute;
  border-radius: 8rpx;
}

js

  data: {
    scrollTop: 0
  },
  /**
   * 获取当前顶部坐标
   */
  onPageScroll: function (e) {
    this.setData({
      scrollTop: e.scrollTop
    })
  },
  showModal(e) {
    var pageX = e.detail.x
    var pageY = e.detail.y
    this.setData({
      modalName: e.currentTarget.dataset.target,
      x: pageX,
      y: pageY
    })
  },
  hideModal(e) {
    this.setData({
      modalName: null
    })
  },

阻止事件冒泡

catchtap

设置页面顶部位置

    wx.pageScrollTo({
      scrollTop: 0
    })

设置input光标和提示文字位置

text-align:left;
padding-left:24rpx;

确认取消模态框

wx.showModal({
   title: '删除优惠券',
   content: '确定删除这个优惠券吗？',
   cancelText:'取消',
   confirmText:'删除',
   success(res) {
      if (res.confirm) {
         console.log('用户点击确定')
      } else if (res.cancel) {
         console.log('用户点击取消')
      }
   }
})

本地图片做背景

js添加

data: {
   background: 'data:image/jpg;base64,' + wx.getFileSystemManager().readFileSync('images/bg.png', 'base64')
},

wxml添加

商品图文详情折叠

折叠时添加以下wxss

max-height: 400px;
overflow: hidden;

this.setData优化技巧,修改参数部分属性，部分重新渲染

var str = 'list['+index+'].checked';
this.setData({
  [str]: false
})

grid布局css

display: grid;
grid-template-columns: 160rpx auto;

scroll-view的scroll-x（横向滚动）

croll-view标签需要添加样式

white-space: nowrap;

croll-view标签的子标签需要滚动的标签需要添加样式，及需要其子标签为行内块级元素

display:inline-block;

弹框后阻止下层页面滚动

小程序less编译

https://blog.csdn.net/bocongbo/article/details/82588307