Python-微信小程序（API）

发表于 更新于 分类于 本文字数： 7.5k 阅读时长 ≈ 14 分钟

API

网络

  • 发起请求

    • wx.request
      • 简介
        发起 HTTPS 网络请求。使用前请注意阅读相关说明。
      • 参数
        名称 必填 说明
        url 是 开发者服务器接口地址
        data 否 请求的参数
        method 否 HTTP 请求方法
        success 否 接口调用成功的回调函数
      • 注意事项
        • 网络地址必须是HTTPS
        • 微信小程序后台必须设置要访问的域名
        • 本地测试需要在微信开发者工具中设置(详情 - > 本地设置)不校验HTTPS

界面

  • 交互

    • wx.showToast
      • 简介
        显示消息提示框
      • 参数
        名称 类型 默认值 必填 说明
        title string 是 提示的内容
        icon string success 否 图标(success、error、loading、none)
        image string 否 自定义图标的本地路径，image 的优先级高于 icon
        duration number 1500 否 提示的延迟时间
        mask boolean false 否 是否显示透明蒙层，防止触摸穿透
        success function 否 接口调用成功的回调函数
        fail function 否 接口调用失败的回调函数
        complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
      • icon参数
        名称 说明
        success 显示成功图标，此时 title 文本最多显示 7 个汉字长度
        error 显示失败图标，此时 title 文本最多显示 7 个汉字长度
        loading 显示加载图标，此时 title 文本最多显示 7 个汉字长度
        none 不显示图标，此时 title 文本最多可显示两行，1.9.0及以上版本支持
      • 示例
        1
        2
        3
        4
        5
        wx.showToast({
          title: '成功',
          icon: 'success',
          duration: 2000
        })
    • wx.hideToast
      • 简介
        隐藏消息提示框
      • 参数
        名称 类型 默认值 必填 说明
        success function 否 接口调用成功的回调函数
        fail function 否 接口调用失败的回调函数
        complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
    • wx.showLoading
      • 简介
        显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
      • 参数
        名称 类型 默认值 必填 说明
        title string 是 提示的内容
        mask boolean false 否 是否显示透明蒙层，防止触摸穿透
        success function 否 接口调用成功的回调函数
        fail function 否 接口调用失败的回调函数
        complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
      • 示例
        1
        2
        3
        4
        5
        6
        7
        wx.showLoading({
          title: '加载中',
        })

        setTimeout(function () {
          wx.hideLoading()
        }, 2000)
    • wx.hideLoading
      • 简介
        隐藏 loading 提示框
      • 参数
        名称 类型 默认值 必填 说明
        success function 否 接口调用成功的回调函数
        fail function 否 接口调用失败的回调函数
        complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

路由

  • wx.navigateTo

    • 简介
      保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
    • 参数
      名称 类型 默认值 必填 说明
      url string 是 需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 path?key=value&key2=value2
      events Object 否 页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。
      success function 否 接口调用成功的回调函数
      fail function 否 接口调用失败的回调函数
      complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
    • success参数
      名称 类型 说明
      eventChannel EventChannel 和被打开页面进行通信
    • 示例
      • 对标签绑定点击事件
        1
        2
        <!-- index.wxml -->
        <view bindtap="clickMe" data-nid="123" data-name="沙雕">点我跳转</view>
      • 执行对应的函数
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        // index.js
        Page({
          ......
          // 点击绑定的事件
          clickMe: function (e) {
            // console.log(e)
            var nid = e.currentTarget.dataset.nid;
            console.log(nid);
            // 跳转
            wx.navigateTo({
              url: '/pages/redirect/redirect?id=' + nid,
            })
          }
        })
      • 页面跳转
        1
        2
        3
        4
        // 跳转(非taBar的页面)
        wx.navigateTo({
          url: '/pages/redirect/redirect?id=' + nid,
        })
      • 跳转到的页面如果想要接收参数，可以在onLoad方法中接收
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        // redirect.js
        Page({
          ......
          /**
           * 生命周期函数--监听页面加载
           */
          onLoad: function (options) {
            console.log(options);
          },
        })
      • 注意事项
        只能跳转到非tabBar的页面，否则会报以下错误
        1
        {errMsg: "navigateTo:fail can not navigateTo a tabbar page"}
      • 标签跳转
        1
        2
        <!-- index.wxml -->
        <navigator url="/pages/redirect/redirect?id=666">跳转到新页面</navigator>

  • wx.navigateBack

    • 简介
      关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
    • 参数
      名称 类型 默认值 必填 说明
      delta number 1 否 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
      success function 否 接口调用成功的回调函数
      fail function 否 接口调用失败的回调函数
      complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
    • 示例
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      // 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

      // 此处是A页面
      wx.navigateTo({
        url: 'B?id=1'
      })

      // 此处是B页面
      wx.navigateTo({
        url: 'C?id=1'
      })

      // 在C页面内 navigateBack，将返回A页面
      wx.navigateBack({
        delta: 2
      })

媒体

  • 图片

    • wx.chooseImage
      • 简介
        从本地相册选择图片或使用相机拍照。
      • 参数
        名称 类型 默认值 必填 说明
        count number 9 否 最多可以选择的图片张数
        sizeType Array. ['original','compressed'] 否 所选的图片的尺寸
        sourceType Array. ['album','camera'] 否 选择图片的来源
        success function 否 接口调用成功的回调函数
        fail function 否 接口调用失败的回调函数
        complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
      • sizeType参数
        名称 说明
        original 原图
        compressed 压缩图
      • sourceType参数
        名称 说明
        album 从相册选图
        camera 使用相机
      • success参数
        名称 类型 说明 最低版本
        tempFilePaths Array. 图片的本地临时文件路径列表 (本地路径)
        tempFiles Array. 图片的本地临时文件列表 1.2.0
      • tempFiles参数
        名称 类型 说明
        path string 本地临时文件路径 (本地路径)
        size number 本地临时文件大小，单位 B
      • 示例
        1
        2
        3
        4
        5
        <!-- publish.wxml -->
        <view class="container">
          <image wx:for="{{imageList}}" src="{{item}}"></image>
        </view>
        <button bindtap="uploadImage">上传图片</button>
        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
        // publish.js
        Page({
          data: {
            imageList: ['/static/images/mn.jpg', '/static/images/男头像.png']
          },

          uploadImage: function () {
            wx.chooseImage({
              count: 9,
              sizeType: ['original', 'compressed'],
              sourceType: ['album', 'camera'],
              // 接口调用成功的回调函数
              success: (res) => {
                console.log(res.tempFilePaths);
                // 设置imageList，页面上的图片会自动修改
                // this.setData({
                //   imageList: res.tempFilePaths
                // });
                // 默认图片 + 选择的图片
                this.setData({
                  imageList: this.data.imageList.concat(res.tempFilePaths)
                });
              },
            })
          },
        )}
      • 注意事项
        目前图片只是上传到了内存。

位置

  • wx.chooseLocation

    • 简介
      打开地图选择位置。
    • 参数
      名称 类型 默认值 必填 说明 最低版本
      latitude number 否 目标地纬度 2.9.0
      longitude number 否 目标地经度 2.9.0
      success function 否 接口调用成功的回调函数
      fail function 否 接口调用失败的回调函数
      complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
    • success参数
      名称 类型 说明
      name string 位置名称
      address string 详细地址
      latitude number 纬度，浮点数，范围为-90~90，负数表示南纬。使用 gcj02 国测局坐标系
      longitude number 经度，浮点数，范围为-180~180，负数表示西经。使用 gcj02 国测局坐标系
    • 示例
      1
      2
      <!-- login.wxml -->
      <view bindtap="getLocalPath">位置：{{localPath}}</view>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      // login.js
      Page({
        ......
        data: {
          localPath: '请选择位置'
        },

        getLocalPath: function () {
          wx.chooseLocation({
            success: (res) => {
              console.log(res.name)
              this.setData({
                localPath: res.address
              });
            },
          })
        },
      })

开放接口

  • 用户信息

    • wx.getUserProfile
      • 简介
        获取用户信息。页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo，详见 用户信息接口调整说明。
      • 参数
        名称 类型 默认值 必填 说明
        lang string en 否 显示用户信息的语言
        desc string 是 声明获取用户个人信息后的用途，不超过30个字符
        success function 否 接口调用成功的回调函数
        fail function 否 接口调用失败的回调函数
        complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
      • lang参数
        名称 说明
        en 英文
        zh_CN 简体中文
        zh_TW 繁体中文
      • success参数
        名称 类型 说明 最新版本
        userInfo UserInfo 用户信息对象 2.10.4
        rawData string 不包括敏感信息的原始数据字符串，用于计算签名 2.10.4
        signature string 使用 sha1( rawData + sessionkey ) 得到字符串，用于校验用户信息，详见 用户数据的签名验证和加解密 2.10.4
        encryptedData string 包括敏感数据在内的完整用户信息的加密数据，详见 用户数据的签名验证和加解密 2.10.4
        iv string 加密算法的初始向量，详见 用户数据的签名验证和加解密 2.10.4
        cloudID string 敏感数据对应的云 ID，开通云开发的小程序才会返回，可通过云调用直接获取开放数据，详细见云调用直接获取开放数据 2.10.4
      • 示例
        1
        2
        3
        4
        5
        6
        7
        8
        <!-- bind.wxml -->
        <view>当前用户：{{name}}</view>
        <view>
          当前头像：
          <image src="{{path}}" style="height: 200rpx; width: 200rpx;">{{}}</image>
        </view>

        <button bindtap="getUserInfo"> 获取头像昵称 </button>
        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
        // bind.js
        Page({
          ......
          data: {
            name: '',
            path: '/static/images/男头像.png'
          },
            
          getUserInfo: function () {
            console.log('username');
            // 调用微信的接口，获取当前用户的信息
            wx.getUserProfile({
              desc: '用于完善会员资料',
              // 调用成功后触发
              success: (res) => {
                console.log(res.userInfo)
                this.setData({
                  name: res.userInfo.nickName,
                  path: res.userInfo.avatarUrl
                });
              },
              // 调用失败后触发
              fail: (res) => {
                console.log('获取失败')
              }
            })
          },
        })
      • 注意事项
        • 要想获取用户信息，必须要经过用户的授权（button）
        • 已授权
        • 未授权，通过调用wx.openSetting，手动授权
          1
          2
          // 打开配置，手动授权
          wx.openSetting({})

数据缓存

  • wx.setStorageSync

    • 简介
      本地储存，将数据存储在本地缓存中指定的 key 中，wx.setStorage 的同步版本。
    • 参数
      名称 说明
      key 本地缓存中指定的 key
      data 需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
    • 示例
      1
      wx.setStorageSync('userInfo', info)

  • wx.getStorageSync

    • 简介
      从本地缓存中异步获取指定 key 的内容，wx.getStorage 的同步版本。
    • 参数
      名称 说明
      key 本地缓存中指定的 key
    • 返回值
      名称 说明
      data key对应的内容
    • 示例
      1
      var userInfo = wx.getStorageSync('userInfo')

  • wx.removeStorageSync

    • 简介
      从本地缓存中移除指定 key，wx.removeStorage 的同步版本。
    • 参数
      名称 说明
      key 本地缓存中指定的 key
    • 示例
      1
      wx.removeStorageSync('userInfo')

后端API(Django)

  1. 创建虚拟环境
  2. 在虚拟环境中安装依赖
    1
    2
    Django==3.2.8
    djangorestframework==3.12.4
  3. 创建项目API
    • message：验证码处理流程
      1. 获取手机号
      2. 手机号格式检验
      3. 生成随机验证码
      4. 验证码发送到用户手机上
      5. 将验证码保存到Redis，验证码 + 手机号（30s过期）
        1
        2
        conn.set('15512345678', '4561', ex=30)
        conn.get('15512345678')
    • login：登录处理流程
本文结束 感谢您的阅读
正在加载今日诗词....