WeChat小程序开发：基础笔记（二）

博主：👍不许代码码上红
欢迎：🐋点赞、收藏、关注、评论。

文章目录

• API篇
• • 一、getUserProfile（{}）
  • 二、wx.scanCode（{}）
  • 三、wx.makePhoneCall

API篇

● 小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等

通常，在小程序API中有以下几种类型：
● 事件监听api
● 同步api
● 异步api
● 异步api返回promise
● 云开发api

事件监听api
我们约定，以 on 开头的 API 用来监听某个事件是否触发，如： wx.onSocketOpen，wx.onCompassChange 等。这类 API 接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。
同步api
我们约定，以 Sync 结尾的 API 都是同步 API， 如 wx.setStorageSync，wx.getSystemInfoSync 等。此外，也有一些其他的同步 API，如 wx.createWorker，wx.getBackgroundAudioManager 等。同步 API 的执行结果可以通过函数返回值直接获取，如果执行出错会抛出异常。
异步api
大多数 API 都是异步 API，如 wx.request，wx.login 等。这类 API 接口通常都接受一个 Object 类型的参数
异步api返回promise
基础库 2.10.2 版本起，异步 API 支持 callback & promise 两种调用方式。当接口参数 Object 对象中不包含 success/fail/complete 时将默认返回 promise，否则仍按回调方式执行，无返回值。
注意事项
部分接口如 downloadFile, request, uploadFile, connectSocket, createCamera（小游戏）本身就有返回值， 它们的 promisify 需要开发者自行封装。
当没有回调参数时，异步接口返回 promise。此时若函数调用失败进入 fail 逻辑， 会报错提示 Uncaught (in promise)，开发者可通过 catch 来进行捕获。
wx.onUnhandledRejection 可以监听未处理的 Promise 拒绝事件。
云开发api
开通并使用微信云开发，即可使用云开发API，在小程序端直接调用服务端的云函数。

一、getUserProfile（{}）

wx.getUserProfile(Object object)
（基础库 2.10.4 开始支持，低版本需做兼容处理。）

功能描述
获取用户信息。页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo

用户登录实现
● 代码
1、.js

Page({
    data: {
      // 是否登录
      isLogin:false,
      // 头像
      avatarUrl:'',
      // 昵称
      nickName:'',
    },
    // 登录方法
    login(){
      //获取当前微信用户信息
      wx.getUserProfile({
        // 设置获取微信信息的用途
        desc: '登录系统',
        // 成功获取用户信息的回调函数
        success:(e)=>{
          // 获取用户的头像，昵称
          let {userInfo:{avatarUrl,nickName}} = e
          // 更新页面渲染
          this.setData({
             avatarUrl:avatarUrl,
             nickName:nickName,
             isLogin:true
          })
          // 将头像和昵称保存到缓存中
          wx.setStorageSync('avatarUrl', avatarUrl)
          wx.setStorageSync('nickName', nickName)
        }
      })
    },
    //退出登录方法
    exit(){
      // 清空缓存数据
      wx.clearStorageSync()
      this.setData({
        avatarUrl:'',
        nickName:'',
        isLogin:false
      })
    },
    onLoad: function () {
      //判断缓存中有没有用户昵称，如果有，就表示该用户已经登录过
      if(wx.getStorageSync('nickName')){
        this.setData({
          isLogin:true,
          nickName:wx.getStorageSync('nickName'),
          avatarUrl:wx.getStorageSync('avatarUrl')
        })
      }
    }
  })
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

2、.wxml

<view class="login">
  <view wx:if="{{!isLogin}}" class="btn" bindtap="login">登录</view>
  <view wx:else class="avatar">
    <image class="img" src="{{avatarUrl}}" mode="aspectFit" bindtap="exit"></image>
    <view class="txt">{{nickName}}</view>
  </view>
</view>
1
2
3
4
5
6
7

3、wxss

.login{
  height: 300rpx;
  background-color: rgb(212, 38, 47);
  font-size: 28rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn{
  width: 100rpx;
  height: 50rpx;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 50rpx;
  background-color: white;
  border-radius: 6rpx;
}
.avatar{
  width: 140rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.avatar .img{
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
}
.avatar .txt{
  color: #fff;
  margin-top: 10rpx;
}
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

二、wx.scanCode（{}）

wx.scanCode(Object object)
（基础库 1.0.0 开始支持，低版本需做兼容处理。）

功能描述
调起客户端扫码界面进行扫码

扫码实现
● 代码
1、.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    MGAlertView_S_H: true, 
    contentText:''
  },
  //扫一扫
  btnClick: function () {
    var that = this
    wx.scanCode({
      success(res) {
        console.log('扫描成功：', JSON.stringify(res))
        //JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。
        that.setData({
          contentText: JSON.stringify(res)
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  }
})
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

2、.wxml

<view class='contentView'>
  <view class='contentText'>显示内容：{{ contentText }}</view>
  <button type="primary" bindtap="btnClick">扫一扫wx.scanCode</button>
</view>
1
2
3
4

3、.wxss

在这里插入代码片
.item{
  padding: 10rpx;
  display: flex;
  align-items: center;
}
.contentView{
  width: 100%;
  height: 100%;
}
.contentText{
  text-align: center;
  margin: 20rpx;
  margin-top: 400rpx;
  
}
button{
  margin: 20rpx;
  font-size: 30rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

三、wx.makePhoneCall

wx.makePhoneCall(Object object)
（以 Promise 风格 调用：支持；小程序插件：支持，需要小程序基础库版本不低于 1.9.6）

功能描述

拨打电话

拨打电话
● 代码
1、.js

Page({
  data: {
    //手机号码
    tel:'12345678911'
  },
  //打电话
  makePhoneCall(){
    wx.makePhoneCall({
      phoneNumber:this.data.tel,
      success:(e)=>{
        console.log(e);
      }
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2、.wxml

<view class="item">
  <input class="txt" value="{{tel}}" disabled />
  <van-icon class="iconfont" class-prefix="icon" name="dianhua" bindtap="makePhoneCall" />
</view>
1
2
3
4