[移动开发]微信小程序小汇总

全局配置文件

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/home.png",
    // 选中时的图标
    "selectedIconPath": "/images/home-o.png"
  }, {
    "pagePath": "pages/my/my",
    "text": "我的",
    "iconPath": "/images/my.png",
    "selectedIconPath": "/images/my-o.png"
  }]
}

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，e.detail.value

数据绑定

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

单向数据绑定

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

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

双向数据绑定

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

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. 开头

弹窗

• wx.showToast()

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

页面跳转

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

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

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

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

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

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

• wx.switchTab() 只能跳转tabBar

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

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

• wx.navigateBack() 跳转到前几页

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

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

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

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

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

• 请求调用接口

• wx.request() 发起 HTTPS 网络请求 或者导入(utils)

• 用老版本的函数形式写，注意有this指向的问题，但是用箭头函数就不会了(this没有指向，会指向上一级作用域)

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

获取微信授权用户信息

• wx.getUserProfile
  • res.userInfo.nickName 获取用户名
  • res.userInfo.avatarUrl 获取用户头像地址

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数据

• 全局数据都定义在 app.js 中的 globalData

• 组件需要实例化全局数据，才能调用globalData中的全局数据

const app = getApp()

设置用户数据为全局数据

1. 首先要先缓存到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
    }
  })
}

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

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

本地存储

设置

• wx.setStorageSync(‘key’,value)

获取

• wx.getStorageSync(‘key’)

• 首先要把用户信息转存为全局数据

• 然后还要把用户数据存储到本地缓存中(这样方便其他页面获取，直接通过本地数据获取)

  • 只要缓存到本地缓存中，就是有数据的。即使刷新，只要不关闭页面，都是有数据的
  • 然后就是一次授权获取用户信息，其他页面直接通过获取本地缓存并转存为全局数据就可以使用

授权获取
getUserInfo() {
  let that = this
  wx.getUserProfile({
    desc: '完善信息',
    success(res) {
      // console.log(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
  app.globalData.userInfo = wx.getStorageSync('userInfo')

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

生命周期

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

页面声明周期

• 就是单独的每个页面

  1. onLoad 监听当前页面加载，只会执行一次
     • 一般做数据请求，获取传来的参数(默认带一个options形参)

  onLoad(options) {
      console.log('onLoad声明周期，只会执行一次，一般做初始请求用',options)
  },
  

  2. onReady (页面初次渲染完成时触发。一个页面只会调用一次)

     • 多做修改内容使用

  3. onShow (只要展示这个页面,就会自动加载)，显示一次，加载一次

     • 多做页面数据更新用

  4. onHide (每次页面隐藏就会自动加载)，隐藏一次，加载一次

  5. onUnload (卸载页面，小程序关闭)

// pages/alive/alive.js
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() {
      
  }
})

应用生命周期

• 就是值整个微信小程序应用，都写到app.js中
  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 . . . )

数据类型转换

• 转换为字符串

• 转换为数字型

转为数字的几个特殊情况

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 合并多个数组 多用于下拉加载(拼接)

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

随机数

• Math.random() [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(‘…’) 导入（common.js规范）

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

• 格式化时间

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

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

• 传入参数

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

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)

• 常见操作

this

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

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

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

let that = this
wx.request({
  url: 'https://www.baidu.com',
  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: 'https://www.baidu.com',
  success:(res)=> {
    console.log(res);
    let aaa = 3
    // Cannot read property 'setData' of undefined   找不到this
    this.setData({
      dataVal: aaa
    })
  }
})

Promise风格

• 只能用于云开发
• wx.clode.database().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={{zs.id}}&name={{zs.name}}">{{zs.name}}</navigator>

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

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

Api跳转携带参数

• 1. 传递参数

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

• 2. 接收参数 只能在onLoad中接收

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