小程序常用的知识点

作为Android开发人员，记录一下小程序的摸索之路

• 居中

display: flex;
flex-direction: row;
justify-content: center;
align-items: center;

• input

• 从子页面返回数据给父页面

wx.navigateBack()   //返回上一页
var pages = getCurrentPages();
var currPage = pages[pages.length - 1];   //当前页面
var prevPage = pages[pages.length - 2];  //上一个页面

prevPage.setCarInfo({ 
  "model": e.currentTarget.dataset.model, 
  "price": 9000
})

• 切换tab页

wx.switchTab({
  url: '../Test/Test',
})

• 动态改变样式，如字体颜色等

字体颜色


this.setData({
    color: '#ffffff'
})

• 设置整个页面的背景

/* 整个页面背景 */
page {
  display: block;  
  min-height: 100%;  
  background-color: #EFEFF4;
}

• 设置背景图片

• 利用模板

@import "../Test/Test.wxss";

• 更新模板数据

data: {
    item: {
      radio_index: 0,
      ratio_array: ['10%', '20%', '30%'],
      period_index: 2,
      period_array: ['1年', '2年', '3年'],
      tail_index: 1,
      tail_array: ['0%', '30%'],
    }, 
}

bindRatioChange: function (e) {
    var that = this
    console.log('比例:', e.detail.value)
    that.setData({
      'item.radio_index': e.detail.value,
    })
  },

• 简单的动画

showCarModel: function () {
    
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    var that = this
    that.animation = animation
    
    animation.translateX(300).step()
    
    that.setData({
      animation: animation.export(),
      showModelStatus: true
    })
    setTimeout(function () {
      animation.translateX(0).step()
      that.setData({
        animation: animation.export()
      })
    }.bind(that), 200)
},

• 页面间传递对象数据

let str=JSON.stringify(that.data.car);

wx.navigateTo({
    url: '../TestCommit/TestCommit' + "?data=" + str,
})

onLoad:function(options){
    // 生命周期函数--监听页面加载
    var data = JSON.parse(options.data)
  },

• post请求

wx.request({
  url:url
  method: 'POST',
  header: {
    'content-type': 'application/x-www-form-urlencoded'
  },//这样POST 请求会将data的值放在Query String Parameters里面。
  data: {
    'name': that.userName,
    'phone': that.userPhone,
    'page': that.data.page
  },
  complete:function(res) {
    console.log('complete',res.data)
    if(res.data.success) {
      wx.showToast({
        title: '提交成功',
      })
    }
  }
})
    

• 控制小数点位数

toFixed(2)

• 判断是否是合法的数字

if (isNaN(new Number(monthlyAmount))) {
  wx.showToast({
    title: '输入有误',
  })
  return false;
}

---

欢迎继续补充

---

欢迎关注我的微信公众号，和我一起学习一起成长！

AntDream