微信小程序常用界面api及案例、获取用户信息、获取手机号、WeUI组件库、微信小程序云开发、云函数、云存储_weui 电话号码

三.常用界面api及案例

常用界面API：wx.showToast()、wx.showLoading()、wx.hideLoading()、wx.setNavigationBarTitle()

案例需求：请求接口，获取数据，进行数据渲染，添加点击事件，跳转页面，动态显示导航，使用交互api，完善页面加载效果

代码案例：

   wx.showLoading({
   
      title: '加载数据...',
    })

	wx.hideLoading()
showLoading 不会自动消失，需要hideLoading消失

   wx.showToast({
   
        title: '数据加载失败',
        icon:'none',
        image:"/imgs/laba.jpg",
        duration:5000
      })
showToast 提示信息

    wx.setNavigationBarTitle({
   
      title: classify,
    })
setNavigationBarTitle动态设置顶部标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

四、授权

1.概述

(1)部分接口需要经过用户授权同意才能调用,比如获取用户信息，保存图片到相册等，我们把这些接口按使用范围分成多个 scope ，用户选择对 scope 来进行授权，当授权给一个 scope 之后，其对应的所有接口都可以直接使用。
(2)此类接口调用时：

• 如果用户未接受或拒绝过此权限，会弹窗询问用户，用户点击同意后方可调用接口；

• 如果用户已授权，可以直接调用接口；

• 如果用户已拒绝授权，则不会出现弹窗，而是直接进入接口 fail 回调。请开发者兼容用户拒绝授权的场景。

2.检测授权状态

wx.getSetting

在授权前，先检测授权状态，如果已经授权，直接调用相关接口，如果没有授权，出现授权弹窗
1

3.进行授权

wx.authorize

  _record(){
   
    wx.getSetting({
   
      success(res){
   
        console.log(res)
        // 录音  res 有没有录音
        if(res.authSetting['scope.record']){
   
          // 已经授权，直接开始录音
          wx.startRecord()
          
        }else{
   
          // 没有授权,提示授权
          wx.authorize({
   
            scope: 'scope.record',
            success(){
   
              console.log("授权成功")
              wx.startRecord()
            }
          })

        }
      }
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

五、获取用户信息

1.通过API获取用户信息

1、给组件绑定事件，在事件里出现弹窗（wx.getUserProfile）
2、如果用户点击允许，改变授权状态，把用户信息存入缓存
3、再次按编译，走onLoad，在onLoad函数里取出来userinfo做判断，

给按钮添加的点击事件
  _getuserinfo(){
   
   if(!wx.getUserProfile){
   
      // 基础库版本过低
      wx.showToast({
   
        title: '请升级您的微信版本',
        icon:'none'
      })
      return
    }
      
    let that = this
    wx.getUserProfile({
   
      desc:"学习使用",
      success(res){
   
        console.log(res.userInfo)
        // 1、改变授权状态
        that.setData({
   
          isshow:true,
          userinfo:res.userInfo
        })

        // 2、拿到用户信息之后，存在缓存里，再次编译时候，在onLoad里判断
        wx.setStorageSync('userinfo', res.userInfo)
      },
      fail(){
   
        console.log
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37