微信小程序小汇总

全局配置文件

pages

微信小程序有多少个页面

window

小程序的头部，用于设置小程序的状态栏、导航条、标题、窗口背景色
backgroundTextStyle
- 下拉 loading 的样式，取值有light（高亮），和dark（暗黑）
navigationBarBackgroundColor
- 头部导航的背景颜色
navigationBarTitleText
- 头部导航的标题
- 子页面可以通过navigationBarTitleText修改自己的头部标题
navigationBarTextStyle
- 头部导航的标题的样式

tabBar

底部导航条
- selectedColor tab 上的文字选中时的颜色，仅支持十六进制颜色

"tabBar": {
  // tab 上的文字选中时的颜色，仅支持十六进制颜色
  "selectedColor": "#269fde",
  "list": [{
    "pagePath": "pages/index/index",
    "text": "首页",
    // 默认图标
    "iconPath": "/images/",
    // 选中时的图标
    "selectedIconPath": "/images/"
  }, {
    "pagePath": "pages/my/my",
    "text": "我的",
    "iconPath": "/images/",
    "selectedIconPath": "/images/"
  }]
}

wxml

view 相当于 div
image 相当于 img
input 输入框没有样式时看不到的
button 按钮
text 相当于 span

wxss

rpx 相当于rem 会自适应手机屏幕

flex布局

改变主轴方向：text-direction
换行： flex-wrap: wrap
主轴对齐方式
- justify-content
- felx-start flex-end space-between space-around
侧轴对齐方式
- align-items

事件

bindtap就是绑定事件(点击)

获取输入框中的内容

通过bindinput获取输入框中的内容（内容只要改变就会触发）
通过bindchange获取输入框中的内容（内容改变且光标离开触发）
通过接收event，

数据绑定

在js的data中定义初始数据，然后通过 {{}} 渲染到wxml中

单向数据绑定

不应该用this.旧值 = 新值
应该用 ({ 变量名：新值 })

turn() {
    //  = '少儿频道'
    // ();
    this.setData({
      pindao: '少儿频道'
	})
}

双向数据绑定

一般用于表单类的
首先通过 bindinput 获取到输入框中的值
然后通过 setData({ 旧值： }) 把旧值渲染成新值

wxml
<view>{{danmu}}</view>
<input bindinput="get" class="danmu" type="text" placeholder="请出入内容"/>

js
get(e) {
  console.log(e.detail.value);
  this.setData({
    danmu: e.detail.value
  })
}

常用API

wx. 开头

弹窗

()

submit() {
  wx.showToast({
    title: '提交失败',
    icon: 'error',
    duration: 3000
  })
}

页面跳转

() 不能跳转tabBar (底部导航)，保留当前页面

wxml
<button bindtap="toaaa" class="btn">toaaa</button>

js
toaaa() {
  wx.navigateTo({
    url: '/pages/aaa/aaa',
  })
}

() 不保留当前页面。与的区别是： redirectTo返回会跳转到上上页(因为不保留当前页)

wxml
<button bindtap="toBBB">tobbb</button>

js
toBBB() {
  wx.redirectTo({
    url: '/pages/bbb/bbb',
  })
}

() 只能跳转tabBar

wxml
<button bindtap="todata">todata</button>

js
todata() {
  wx.switchTab({
    url: '/pages/data/data',
  })
}

() 跳转到前几页

wxml
<button bindtap="reback">返回到上一个页面上</button>

js
reback() {
  wx.navigateBack({
    delta: 1
  })
}
// 也可以不写delta，省略就是返回上一页

() 关闭所有页面，打开到应用内的某个页面

wxml
<button bindtap="openPage">关闭所有页面，打开到应用内的某个页面</button>

js
openPage() {
    wx.reLaunch({
        url: '/pages/data/data',
    })
}

请求调用接口
() 发起 HTTPS 网络请求或者导入(utils)
用老版本的函数形式写，注意有this指向的问题，但是用箭头函数就不会了(this没有指向，会指向上一级作用域)

let that = this
wx.request({
  url: '/api/v1/topics',
  // 用老版本的函数形式写，注意有this指向的问题，但是用箭头函数就不会了
  success(res) {
    // (res)
    // Cannot read property 'setData' of undefined   找不到this
    that.setData({
      dataList: res.data.data
    })
  }
})

获取微信授权用户信息

- 获取用户名
- 获取用户头像地址

wxml
<button bindtap="getUserInfo">获取用户信息</button>

js
getUserInfo() {
  wx.getUserProfile({
    desc: '用于完善个人信息',
    success(res) {
      console.log(res);
      // 获取用户名
      console.log(res.userInfo.nickName);
      // 获取用户头像地址
      console.log(res.userInfo.avatarUrl);
    }
  })
}

TypeError: Cannot read property ‘setData’ of undefined 经典报错，this指向有问题

getUserInfo() {
  // 这里需要把this转存到that中，this指的是page
  let that = this
  wx.getUserProfile({
    desc: '用于完善个人信息',
    success(res) {
      console.log(res);
      // 获取用户名
      console.log(res.userInfo.nickName);
      // 获取用户头像地址
      console.log(res.userInfo.avatarUrl);
      // 这里的this指的是sucess，不是page
      that.setData({
        userName: res.userInfo.nickName,
        avatarUrl: res.userInfo.avatarUrl
      })
    }
  })
}

全局globalData数据

全局数据都定义在中的 globalData
组件需要实例化全局数据，才能调用globalData中的全局数据

const app = getApp()

设置用户数据为全局数据

首先要先缓存到globalData中

getUserInfo() {
  // 这里需要把this转存到that中，this指的是page
  let that = this
  wx.getUserProfile({
    desc: '用于完善个人信息',
    success(res) {
      console.log(res);
      // 获取用户名
      console.log(res.userInfo.nickName);
      // 获取用户头像地址
      console.log(res.userInfo.avatarUrl);
      // 这里的this指的是sucess，不是page
      that.setData({
        userName: res.userInfo.nickName,
        avatarUrl: res.userInfo.avatarUrl
      })

      // 获取到用户信息后，转存到全局数据中
      app.globalData.userInfo = res.userInfo
    }
  })
}

下面的页面就可以进行使用啦

clickItem() {
  console.log('被点击了');
  console.log(app.globalData.userInfo);
}

本地存储

设置

(‘key’,value)

获取

(‘key’)
首先要把用户信息转存为全局数据
然后还要把用户数据存储到本地缓存中(这样方便其他页面获取，直接通过本地数据获取)
- 只要缓存到本地缓存中，就是有数据的。即使刷新，只要不关闭页面，都是有数据的
- 然后就是一次授权获取用户信息，其他页面直接通过获取本地缓存并转存为全局数据就可以使用

授权获取
getUserInfo() {
  let that = this
  wx.getUserProfile({
    desc: '完善信息',
    success(res) {
      // (res);
      // 获取用户名及头像地址
      console.log(res.userInfo.nickName);
      console.log(res.userInfo.avatarUrl);
      that.setData({
        nickName: res.userInfo.nickName,
        avatarUrl: res.userInfo.avatarUrl
      })
      // 将用户信息存储为全局数据
      app.globalData.userInfo = res.userInfo
      // 获取后存储本地
      wx.setStorageSync('userInfo', res.userInfo)
    }
  })
}

其他页面使用
show() {
  // 获取缓存中的数据
  wx.getStorageSync('userInfo')
  // 把缓存获取到的数据转存给全局变量
  app.globalData.userInfo = wx.getStorageSync('userInfo')

  this.setData({
    userInfo: app.globalData.userInfo
  })
}

生命周期

分两大类，一类是页面生命周期，另一类是应用生命周期

页面声明周期

就是单独的每个页面
1. onLoad 监听当前页面加载，只会执行一次
  - 一般做数据请求，获取传来的参数(默认带一个options形参)
```
onLoad(options) {
    console.log('onLoad声明周期，只会执行一次，一般做初始请求用',options)
},
```
1. onReady (页面初次渲染完成时触发。一个页面只会调用一次)
  - 多做修改内容使用
2. onShow (只要展示这个页面,就会自动加载)，显示一次，加载一次
  - 多做页面数据更新用
3. onHide (每次页面隐藏就会自动加载)，隐藏一次，加载一次
4. onUnload (卸载页面，小程序关闭)

// pages/alive/
Page({
  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载，只会执行一次(only one)
   * options 形参接收上个页面传递过来的参数
   */
  onLoad(options) {
    console.log('onLoad声明周期，只会执行一次，一般做初始请求用',options)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成，一个页面只会调用一次
   */
  onReady() {
    console.log('onReady声明周期，多做修改内容使用')
  },

  /**
   * 生命周期函数--监听页面显示，显示一次，加载一次，多做数据更新用
   */
  onShow() {
    console.log('onShow显示一次，加载一次，多做数据更新用')
  },

  /**
   * 生命周期函数--监听页面隐藏，隐藏一次，加载一次
   */
  onHide() {
    console.log('onHide隐藏一次，加载一次');
  },

  /**
   * 生命周期函数--监听页面卸载, (卸载页面，小程序关闭时触发)
   */
  onUnload() {
    console.log('onUnload小程序关闭时触发');
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
      
  }
})

应用生命周期

就是值整个微信小程序应用，都写到中
1. onLaunch 小程序初始化完成时触发，全局只会触发一次
  - 一般用于获取用户的信息
2. onShow(小程序启动，或从后台进入前台显示时触发)
3. onHide(小程序从前台进入后台时触发)

App({
  // 小程序初始化完成时触发，全局只会触发一次。一般用于获取用户的信息
  onLaunch() {
    console.log('onLaunch 小程序初始化完成时触发，全局只会触发一次，一般获取用户信息用')
  },
  // 小程序启动，或从后台进入前台显示时触发
  onShow() {
    console.log('onShow 小程序启动，或从后台进入前台显示时触发')
  },
  // 小程序从前台进入后台时触发
  onHide() {
    console.log('onHide 小程序从前台进入后台时触发')
  },
  // 全局数据  globalData
  globalData: {
    userInfo: null
  }
})

数据类型

number、string、boolean、null、undefined、Object ( Function、Array、Date . . . )

简单数据类型	描述
number	数字型，包含整数和小数，如 18，18.8
string	字符串型，如“华神”。注意js里字符串都要带引号
boolean	布尔值类型，就true和false两个值，代表真和假
undefined	Undefined 这个值表示变量不含有值,如var a;声明了变量a，但是没有赋值，就是undefined
null	空值，如var a=null,声明了变量a为空值
object	对象类型： Function、Array、Date . . .

数据类型转换

转换为字符串

方式	说明	案例
toString()	转为字符串	var age=1 ()
String()	转为字符串	var age=1 String(age)
用加号拼接字符串	转为字符串	var age=1 “”+age

转换为数字型

方式	说明	案例
Number()	将字符串转换为数字	Number(“8.88”) // 返回 8.88
parseFloat()	解析一个字符串并返回一个浮点数	parseFloat(“8.88”) //返回8.88
parseInt()	解析一个字符串并返回一个整数	parseInt(“8.88”) //返回8.88

转为数字的几个特殊情况

console.log(Number(""))//空字符串转换为 0
console.log(Number(true))//true转换为1
console.log(Number(false))//false转换为0
console.log(Number("华神"))//其他的字符串会转换为 NaN (因为转换过来不是数字)

数组

let arr = […]
let arr = new Array()
- 如果只一个参数，就是长度多少
- 如果2个或2个以上，就是数组元素
数组里面可以包含不同变量

添加元素

尾部添加 push，返回新数组的长度
头部添加 unshift，返回新数组的长度

删除元素

尾部删除 pop，返回删除的元素
头部删除 shift，返回删除的元素
splice(从第几个开始，删除几个)
splice(从第几个开始，替换几个，要替换的值)

car.splice(0,2,'红旗','特斯拉')
console.log(car)

合并数组

concat 合并多个数组多用于下拉加载(拼接)

((home))

列表渲染

wx: for
block标签一般用来循环或者判断（相当于template标签）

渲染数组

<view wx:for="{{carList}}" wx:key="index">
  {{index + 1}} -- {{item}}
</view>

<block wx:for="{{carList}}" wx:key="index">
  <view>{{index + 1}} -- {{item}}</view>
</block>

渲染对象

<block wx:for="{{userList}}" wx:key="index">
  <view>{{item.name}}</view>
  <view>{{item.age}}</view>
  <view>{{item.sex}}</view>
</block>

<block wx:for="{{userList}}" wx:key="index">
  <view>{{item.name}} || {{item.age}} || {{item.sex}}</view>
</block>

条件渲染

wx: if 可以结合vx:elif 和 wx:else

<view wx:if="{{false}}">是否显示呢</view>
// 根据条件判断
<view wx:if="{{flag}}">是否显示呢</view>
<view wx:if="{{!flag}}">是否显示呢</view>

<view wx:if="{{num == 1}}">1</view>
<view wx:elif="{{num == 2}}">2</view>
<view wx:else>3</view>

Math

随机数

() [0，1）
生成 min - max 之间的随机小数

let min = 10
let max = 100
console.log(Math.random() * (max - min ) + min)

生成 min - max 之间的随机整数

let min = 10
let max = 100
console.log(Math.floor(Math.random() * (max - min ) + min))

得到两数之间的随机整数（大于等于min，小于max）

// 这个随机数是min和max之间的随机整数
function getRandomInt(min, max) {
  min = Math.ceil(min)
  max = Math.floor(max)
  //不含最大值，含最小值
  return Math.floor(Math.random() * (max - min)) + min;
}

得到两数之间的随机整数（大于等于min，小于等于max）

// 这个随机数是min和max之间的随机整数
function getRandomInt(min, max) {
  min = Math.ceil(min)
  max = Math.floor(max)
  //含最大值，含最小值 
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

Date

Date是一个构造函数，必须实例化后才能使用

let date = new Date()
console.log(date)   // 会输出当前的时间

require(‘…’) 导入（规范）

let utils = require('../../utils/')

格式化时间

let utils = require('../../utils/')

let nowTime = utils.formatTime(time)
console.log(nowTime)
this.setData({
  nowTime
})

传入参数

let utils = require('../../utils/')

let date = new Date('2022-2-25 12:00:00')
console.log(date)
let time = new Date(1645796691081)
console.log(utils.formatTime(time))

获得时间戳

let time = new Date()
console.log(time.getTime())
let date = +new Date()
console.log(date)
let d = Date.now()
console.log(d)

常见操作

方法	描述
getFullYear()	获取四位的年（yyyy）
getMonth()	获取月（0-11）记得+1
getDate()	以数值返回天（1-31）
getHours()	获取小时（0-23）
getMinutes()	获取分（0-59）
getSeconds()	获取秒（0-59）
getDay()	以数值获取周名（0-6）
getMilliseconds()	获取毫秒（0-999）
getTime()	获取时间戳（从 1970 年 1 月 1 日至今）

this

第一层函数里面，this指向 page 实例化
- 设置的变量，直接保存到page实例化中了，可以直接在wxml中渲染使用

onLoad() {
    console.log(this)
    this.setDate({
        cat: '花花'
    })
}

内层的函数，指向内层函数本身。如果需要用到this，则需要转存this

let that = this
wx.request({
  url: '',
  success(res) {
    console.log(res);
    let aaa = 3
    // Cannot read property 'setData' of undefined   找不到this
    that.setData({
      dataVal: aaa
    })
  }
})

回调函数

JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。
回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了，他自己会善始善终。

箭头函数

箭头函数本身没有this指向，取决于上下文
- 这里采用箭头函数的话，就不用声明that了

wx.request({
  url: '',
  success:(res)=> {
    console.log(res);
    let aaa = 3
    // Cannot read property 'setData' of undefined   找不到this
    this.setData({
      dataVal: aaa
    })
  }
})

Promise风格

只能用于云开发
().collection(‘数据库表名称’).get() 获取数据库表并发出请求

wx.cloud.database().collection('数据库表名称').get()
.then(res=>{
    this.setData({
        
    })
    this.coding()
})

应用场景

当需要多次顺序执行异步操作的时候
- eg：如果想通过异步方法先后检测用户名和密码，需要先异步检测用户名，然后再异步检测密码的情况。就很适合Promise

navigator

navigator不能跳转tabBar

<navigator url="/pages/page01/page01">page01</navigator>

相当于 a链接标签跳转+携带参数这个与编程式导航最大的差别在于可以传递参数
- 1. 传递参数 : 在hash地址后面 ?参数名={{ 对象名.xxx }}

<navigator class="aa" url="/pages/page01/page01?id={{}}&name={{}}">{{zs.name}}</navigator>

- 1. 接收参数接收的是一个参数的大对象只能在onLoad中接收

onLoad: function (options) {
  console.log(options);    // :15 {id: "1", name: "张三"}
}

Api跳转携带参数

跳转方式	说明	对应wx方法
navigate	保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
redirect	关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭当前页面，返回上一页面或多级页面
exit	退出小程序，target="miniProgram"时生效	无

1. 传递参数

toPage02() {
  wx.navigateTo({
    url: '/pages/page02/page02?id=' + this.data.zs.id + '&name=' + this.data.zs.name,
  })
}

1. 接收参数只能在onLoad中接收

onLoad: function (options) {
  console.log(options);
  console.log(options.id);
  console.log(options.name);
},

秒客网

微信小程序小汇总

全局配置文件

wxml

wxss

flex布局

事件

获取输入框中的内容

数据绑定

常用API

获取微信授权用户信息

全局globalData数据

本地存储

生命周期

数据类型

数据类型转换

数组

列表渲染

条件渲染

Math

Date

this

回调函数

箭头函数

Promise风格

navigator

相关文章