微信小程序03---开放能力的使用、发布和分享、组件化

目录

一、小程序的开放能力

1、获取网络状态

获取网络类型：wx.getNetworkType({})

从网上下载文件：wx.downloadFile({})

下载成功之后预览文档：wx.openDocument({})

2、扫码能力  wx.scanCode({})

3、获取当前微信用户信息

二、小程序分享

1、发送给朋友

2、分享至朋友圈

三、自定义组件

1、Component

组件定义

组件样式隔离

2、Behavior

组件中使用

同名字段的覆盖和组合规则

一些其他

---

一、小程序的开放能力

1、获取网络状态

手机连接到互联网有几种方式：Wifi、2G、3G、4G、5G，每种方式的上传速度和下载速度差异很大，它们的计费方式的差异也导致用户在使用互联网服务的时候有不同的使用习惯。对于视频播放这种比较费流量的应用，也需要进行一些限制，如果用户不是WIFI状态，需要给用户一些提示。

获取网络类型：wx.getNetworkType({})

从网上下载文件：wx.downloadFile({})

下载成功之后预览文档：wx.openDocument({})

        一般和上一个函数一起使用

案例：

// 获取用户网络状态 & 下载文档 & 下载之后预览文档

  open() {

    // 获取用户当前网络状态

    wx.getNetworkType({

      success: (res) => {

        console.log(res);

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

          wx.showModal({

            title: '当前非wifi模式，是否继续？',

            success: (res) => {

              if (res.confirm) {

                // 下载文档

                wx.downloadFile({

                  url: 'https://lark-temp.oss-cn-hangzhou.aliyuncs.com/__temp/0/docx/95836198_2022-10-05%2010%3A04%3A16.docx?OSSAccessKeyId=LTAI4GKnqTWmz2X8mzA1Sjbv&Expires=1666248306&Signature=Eku2TF4fERM%2BUjLyZnTv97FV0vA%3D',

                  success: (res) => {

                    console.log(res);

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

                    wx.openDocument({

                      filePath: res.tempFilePath,

                    })

                  },

                })

              }

            }

          })

        } else {

          wx.downloadFile({

            url: 'https://lark-temp.oss-cn-hangzhou.aliyuncs.com/__temp/0/docx/95836198_2022-10-05%2010%3A04%3A16.docx?OSSAccessKeyId=LTAI4GKnqTWmz2X8mzA1Sjbv&Expires=1666248306&Signature=Eku2TF4fERM%2BUjLyZnTv97FV0vA%3D',

            success: (res) => {

              console.log(res);

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

              wx.openDocument({

                filePath: res.tempFilePath,

              })

            },

          })

        }

      }

    })

  },

更多详情请看官方文档

2、扫码能力  wx.scanCode({})

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

wx.scanCode({})

案例：

// 扫一扫功能

  scan() {

    wx.scanCode({

      // 是否能够在相册中选取图片

      onlyFromCamera: true,

      // 扫描成功的回调函数

      success: (res) => {

        console.log(res.result);

        if (res.result) {

          wx.showModal({

            title: res.result,

          })

        }

      }

    })

  },

3、获取当前微信用户信息

获取用户信息（两种）

        getUserProfile（支持使用，能够请求到真实的用户信息）

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