微信小程序常用代码

生命周期:

应用周期

onLaunch() {
  console.log('onLaunch监听小程序初始化');
}

onShow() {
  console.log('onShow监听小程序显示');
}

onHide() {
  console.log('onLaunch监听小程序隐藏');
}

页面周期

  onLoad(options) {
    console.log('onLoad监听页面加载');
  }

  onReady() {
    console.log('onReady监听页面初次渲染完成');
  }

  onShow() {
    console.log('onShow监听页面显示');
  }

  onHide() {
    console.log('onHide监听页面隐藏');
  }

  onUnload() {
    console.log('onUnload监听页面卸载');
  }

CSS:

实现渐变色

第一个是起点颜色，慢慢过渡到第二个颜色
从上到下的线性渐变：
background: linear-gradient(red, blue);
从左到右的线性渐变：
background: linear-gradient(to right, red , blue);

渐变色.png

裁圆角

设置弧度 顺序是 左上角  右上角  右下角  左下角 （顺时针）
border-radius: 3px 0px 0px 3px;

JS:

调用电话

//拨打手机
  calling:function(event){
    console.log('拨打手机')
  console.log(event)
  var that = this;
    wx.makePhoneCall({
      phoneNumber:that.data.phone, //此号码并非真实电话号码，仅用于测试
      success:function(){
        console.log("拨打电话成功！")
      },
      fail:function(){
        console.log("拨打电话失败！")
      }
    })
  },

下拉刷新，上拉加载更多

1）首先在要刷新类的.json文件里添加

{
   "enablePullDownRefresh": true
}

2）然后在js里实现"onPullDownRefresh"和"onReachBottom"方法即可

下拉事件
onPullDownRefresh: function() {
       console.log('刷新'); 
}, 
上拉事件
onReachBottom: function() { 
       console.log(' 下一页'); 
},

注意：刷新可能会和scroll-view控件冲突

未完待续 慢慢补全。。。。。喘口气继续写