小程序常用的知识点

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

• 居中

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

• input

<!--通过value控制input的值，placeholder控制输入提示-->
<!--通过page的setData()方法，动态改变input的值-->
<!--通过bindconfirm监听处理键盘确定按键事件-->
<!--通过bindblur方法监听失去焦点事件-->
<input type="number" confirm-type="done"  value="{{value}}" placeholder-style="color:#FF6000;margin-right:10rpx;font-size:28rpx;" placeholder="请输入" class="test" bindconfirm="changeMethod" bindblur="changeMethod"/>

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

wx.navigateBack()   //返回上一页
var pages = getCurrentPages();
var currPage = pages[pages.length - 1];   //当前页面
var prevPage = pages[pages.length - 2];  //上一个页面
<!--直接通过prevPage调用上一页的方法或是直接赋值-->
prevPage.setCarInfo({ 
  "model": e.currentTarget.dataset.model, 
  "price": 9000
})

• 切换tab页

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

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

<text style="color:{{text_color}}">字体颜色</text>

<!--Js文件离直接通过赋值改变-->
this.setData({
    color: '#ffffff'
})

• 设置整个页面的背景

<!--对应的wxss文件中-->
/* 整个页面背景 */
page {
  display: block;  
  min-height: 100%;  
  background-color: #EFEFF4;
}

• 设置背景图片

<!--设置本地图片为背景图片需要将图片转成Base64编码；或是直接用图片地址；background-size: contain;用于解决可能的图片显示不全-->
<view style="background-image:url(图片的Base64编码);background-size: contain;"

<!--background-size:100% 100%;//不保持纵横比缩放图片，使图片的宽高完全拉伸至填满-->
<!--background-size:contain;//保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。-->
<!--background-size:cover;//保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。-->

• 利用模板

<!--wxss 文件-->
@import "../Test/Test.wxss";

<!--wxml 文件-->
<import src="../Test/Test"/>
<template is="calculateTop" data="{{...item}}"></template>

• 更新模板数据

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,
    })
  },

• 简单的动画

<!--view中设置animation属性-->
<view animation="{{animation}}" class="car_box" wx:if="{{showStatus}}">

<!--Js文件中生成动画-->
showCarModel: function () {
    <!--生成动画-->
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    var that = this
    that.animation = animation
    <!--设置动画的方向-->
    animation.translateX(300).step()
    <!--将动画传到对应的view上，通过控制showModelStatus来控制view的显示和隐藏-->
    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);
<!--通过navigate url传递-->
wx.navigateTo({
    url: '../TestCommit/TestCommit' + "?data=" + str,
})
<!--onLoad里面通过options获取参数，然后转成对象-->
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;
}

欢迎继续补充