Python - 微信小程序(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
      • 简介
        获取用户信息。页面产生点击事件(例如 buttonbindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 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:登录处理流程