微信小程序如何调用微信扫码功能和获取手机网络状态?wx.scanCode、wx.getNetworkType

设备能力

我们知道PC的程序和手机的程序有很大体验不一样的地方,尤其在信息输入这个体验上差别非常大,PC端可以有键盘、鼠标等等外设来辅助用户输入很多复杂的信息,而用户要在一个小小的手机屏幕上输入复杂信息效率是很低的。小程序的宿主环境提供了非常多的操作设备能力来帮助用户在特定场景下做高效的输入,例如:扫码、操控蓝牙等等能力。当然也有很多设备能力不是为了解决输入低效问题而设计的,它们更多的是解决用户侧一些体验问题,例如:获取设备网络状态;调整屏幕亮度等等,我们在这一章节中来介绍其中几种常见的操作设备能力的场景。

1 利用微信扫码能力

为了让用户减少输入,我们可以把复杂的信息编码成一个二维码,利用宿主环境wx.scanCode这个API调起微信扫一扫,用户扫码之后,wx.scanCode的success回调会收到这个二维码所对应的字符串信息。

例如餐厅点餐的小程序,我们给餐厅中每个餐桌编号1-100号,把这个数字编码到二维码中[11],扫码获得编号之后,就可以知道是哪一桌点的菜,大大提高点餐体验和效率。

代码清单利用wx.scanCode获取二维码的数据

//page.js

Page({

  // 点击“扫码订餐”的按钮,触发tapScan回调

  tapScan: function() {

    // 调用wx.login获取微信登录凭证

    wx.scanCode({

      success: function(res) {

        var num = res.result // 获取到的num就是餐桌的编号

      }

    })

  }

})

还有很多场景可以结合微信扫码能力做到很好的体验,例如通过扫商品上的一维码做一个商品展示的小程序;通过扫共享单车上的二维码去开启单车。我们可以多思考如何利用这个扫码能力去替代一些繁琐的输入操作,让我们的小程序变得更加便捷。

2 获取网络状态

我们知道手机连接到互联网有几种方式:Wifi、2G、3G、4G,包括很快到来的5G,每种方式的上传速度和下载速度差异很大,它们的计费方式的差异也导致用户在使用互联网服务的时候有不同的使用习惯。

Wifi相对于其他几种网络连接方式,其速度会更快。Wifi一般都是免费供用户使用,通过移动数据网络是需要根据使用流量进行计费的。我们考虑这样一个场景,小程序需要下载一些文档,然后通过小程序的能力去预览这个文档,这些文档可能文件体积比较大,对于某些用户来说,他们并不想耗费太多的数据流量去预览文档。考虑到这样的情况,我们可以通过小程序提供的获取网络状态的能力,做一些更友好的体验提示。

代码清单 利用wx.getNetworkType获取网络状态

//page.js

Page({

  // 点击“预览文档”的按钮,触发tap回调

  tap: function() {

    wx.getNetworkType({

      success: function(res) {

        // networkType字段的有效值:

        // wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)

        if (res.networkType == 'wifi') {

          // 从网络上下载pdf文档

          wx.downloadFile({

            url:'http://test.com/somefile.pdf',

            success: function (res) {

              // 下载成功之后进行预览文档

              wx.openDocument({

                filePath: res.tempFilePath

              })

            }

          })

        } else {

          wx.showToast({ title: '当前为非Wifi环境' })

        }

      }

    })

  }

})

某些情况下,我们的手机连接到网络的方式会动态变化,例如手机设备连接到一个信号不稳定的Wifi热点,导致手机会经常从Wifi切换到移动数据网络。小程序宿主环境也提供了一个可以动态监听网络状态变化的接口wx.onNetworkStatusChange,让开发者可以及时根据网络状况去调整小程序的体验,wx.onNetworkStatusChange这个接口的使用场景。

猜你喜欢

转载自blog.csdn.net/m0_58859743/article/details/125904215