《十五》微信小程序中常用的 API 之网络请求、弹框、导航、跳转小程序、打开 APP、媒体、地理位置

网络请求：

微信小程序中的服务器域名只支持 https 和 wss，不支持 http 和 IP 地址。
微信小程序只能和指定的域名进行通讯，必须要在 小程序管理后台 -- 开发管理 -- 开发设置 -- 服务器域名 中设置域名，否则的话将无法发送网络请求。
开发过程中，如果想要不校验域名：

1. 微信开发者工具中可以在 详情 -- 本地设置 中勾选不校验合法域名。

2. 真机中可以打开调试模式。

wx.request() 发起 HTTPS 网络请求：

wx.request()：发起 HTTPS 网络请求。

// 使用 Promise 对 wx.request() 进行二次封装
const request = ({url, data={}, method = 'GET'}) => {
	const BASE_URL = 'https://test:8080'
	return new Promise((resolve, reject) => {
	    wx.request({
	      url: BASE_URL + url,
	      method,
	      // 不管 POST 请求还是 GET 请求，参数都是放在 data 中
	      data,
	      success(res) {
	        if (res.statusCode < 400) {
	          resolve(res.data)
	        } else {
	          reject('请求出错,请稍后再试')
	        }
	      },
	      fail(err) {
	        reject(err.errMsg)
	      },
	    })
	  })
	}
}

// 使用封装的 request 函数
request('/user')
	.then(res => console.log(res))
	.catch(err => console.log(err))

// 使用 class 类对 wx.request() 进行二次封装
class Request {
  constructor(BASE_URL) {
    this.BASE_URL = BASE_URL
  }
  request = ({url, data={}, method = 'GET'}) => {
    return  new Promise((resolve, reject) => {
      wx.request({
        url: this.BASE_URL + url,
        method,
        // 不管 POST 请求还是 GET 请求，参数都是放在 data 中
        data,
        success(res) {
          if (res.statusCode < 400) {
            resolve(res.data)
          } else {
            reject('请求出错,请稍后再试')
          }
        },
        fail(err) {
          reject(err.errMsg)
        },
      })
    })
  }
}
const RequestInstance = new Request('https://test:8080')

// 使用封装的 Request 类
RequestInstance.request('/user')
	.then(res => console.log(res))
	.catch(err => console.log(err))

wx.downloadFile() 下载文件资源到本地：

wx.downloadFile()：下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径 ，单次下载允许的最大文件为 200MB。

wx.uploadFile() 将本地资源上传到服务器：

wx.uploadFile()：将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求。

弹框：

wx.showToast()、wx.hideToast() 消息提示框：

wx.showToast()、wx.hideToast()：显示、隐藏消息提示框。

wx.showLoading()、wx.hideLoading() loading 提示框：

wx.showLoading()、wx.hideLoading()：显示、隐藏 loading 提示框。

wx.showModal() 模态对话框：

wx.showModal()：显示模态对话框。

wx.showActionSheet() 操作菜单：

wx.showActionSheet()：显示操作菜单。

导航：

wx.switchTab() 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面：

wx.switchTab()：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

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

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

wx.redirectTo() 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面：

wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。

wx.navigateTo() 保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面：

wx.navigateTo()：保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面。

wx.navigateBack() 关闭当前页面，返回上一页面或多级页面：

wx.navigateBack()：关闭当前页面，返回上一页面或多级页面。

跳转小程序：

wx.navigateToMiniProgram() 打开另一个小程序：

wx.navigateToMiniProgram() ：打开另一个小程序。

需要用户点击才能调用此接口。
在跳转至其他小程序前，会弹窗询问是否跳转，用户确认后才可以跳转其他小程序。

wx.openEmbeddedMiniProgram() 打开半屏小程序：

wx.openEmbeddedMiniProgram() ：打开半屏小程序。

1. 需要在小程序管理后台「设置」-「第三方设置」-「半屏小程序管理」板块发起申请，最多可以申请10个小程序。
2. 被半屏跳转的小程序需要通过来源小程序的调用申请。
3. 通过调用 wx.openEmbeddedMiniProgram() 即可半屏跳转小程序。

wx.navigateBackMiniProgram() 返回到上一个小程序：

wx.navigateBackMiniProgram()：返回到上一个小程序。

只有在当前小程序是被其他小程序打开时可以调用成功。

打开 APP：

需要用户主动点击设置了 open-type='launchApp' 属性的 button 组件才能跳回 APP。也就是说，不能打开 APP，而只有从 APP 或者在一些特定的场景值下打开小程序，才能跳回 APP。

<button open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打开APP</button>

媒体：

文件：

查看文档：

wx.openDocument()：新开页面打开文档。

1. 需要在微信公众平台 --> 开发 --> 开发管理 --> 开发设置 --> 服务器域名中配置 downloadFile 合法域名。
2. 首先使用 wx.downloadFile() 下载文件资源到本地，会返回文件的本地路径；然后使用 wx.openDocument() 新开页面打开文档。

    wx.downloadFile({
       url: 'https://xxxx.xxx.com/test.doc',
       success:  (res) => {
         const filePath = res.tempFilePath 
         wx.openDocument({
           filePath: filePath,        
         })
       },
   })
   

图片：

wx.previewImage() 在新页面中全屏预览图片：

wx.previewImage()：在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。

预览图片会导致所在页面触发 onHide 生命周期函数。

wx.chooseMedia() 拍摄或从手机相册中选择图片或视频：

wx.chooseMedia()：拍摄或从手机相册中选择图片或视频。

选择图片或视频会导致所在页面触发 onHide 生命周期函数。

音频：

wx.createInnerAudioContext()：创建内部 audio 上下文 InnerAudioContext 对象，返回值是 InnerAudioContext 对象。

当锁屏或者小程序切入后台后，音频将停止播放。

1. 如果想要在小程序切后台后继续播放音频，可以在 app.json 中配置 requiredBackgroundModes 属性。开发版和体验版上可以直接生效，正式版还需通过审核。

"requiredBackgroundModes": ["audio" ]

2. 如果就是想停止播放，但由于页面中有暂停播放的图标，这种非手动点击的情况下暂停了播放，再切入前台会导致图标仍显示播放，但实际并没有播放。可以监听音频的 onPause() 事件，修改显示图标的属性。

//1. wxml 中编代码实现音频的样式

//2. js 编写代码实现音频的逻辑
const innerAudioContext = wx.createInnerAudioContext()
innerAudioContext.src = 'xxx'

地理位置：

wx.getLocation() 获取当前的地理位置：

1. 需要先在 app.json 中声明。

     // 需要先在小程序管理后台，「开发」-「开发管理」-「接口设置」中自助开通接口权限，然后在 app.json 中声明字段，才可以在微信小程序中使用地理位置相关的功能
     "requiredPrivateInfos": ["getLocation"],
     "permission": {
     	// 接口需要经过用户授权同意才能调用，因此需要配置授权，才会弹框询问用户
       "scope.userLocation": {
         "desc": "将获取您的位置信息，用于判断您所在区域的仓库是否有商品库存"
       }
     },
   

2. 然后才可以使用。

<button bindtap="getLocation">获取地理位置</button>

Page({
  getLocation() {
    wx.getLocation({
      success(res) {
        console.log(res)
      }
    })
  }
})