微信小程序api的使用-金沙1005

小程序中的 api 是由宿主环境提供的，通过这些丰富的小程序 api，开发者可以方便的调用微信提供的能力，例如：获取用户信息、本地存储、支付功能等。

1. 小程序提供了很多实用的方法供开发者使用

2. 小程序全局对象是: wx

3. 所有的 api 都保存在 wx 对象中
   

一，界面交互

显示消息提示框: wx.showtoast()

 wx.showtoast({ 
   
      title: '成功',
      icon: 'success',
      duration: 2000
    })
  

为防止网络爬虫，请关注公众号回复”口令”

激活idea 激活clion

datagrip dataspell

dotcover dotmemory

dottrace goland

phpstorm pycharm

resharper reshac

rider rubymine

webstorm 全家桶

解锁下载

显示消息加载框: wx.showloading()

显示 loading 提示框。需主动调用 wx.hideloading 才能关闭提示框

wx.showloading({ 
   
  title: '加载中',
})
settimeout(function () { 
   
  wx.hideloading()
}, 2000)

显示模态对话框 wx.showmodal

wx.showmodal({ 
   
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) { 
   
    if (res.confirm) { 
   
      console.log('用户点击确定')
    } else if (res.cancel) { 
   
      console.log('用户点击取消')
    }
  }
})

二，网络请求

1，接口请求 wx.request

1.1，配置合法域名

小程序请求的接口需要https和域名，并且需要在微信小程序管理后台中加入指定域名

1.2，请求示例

wx.request({ 
   
 url: '', 
 data: { 
   
   x: '',
   y: ''
 },
 header: { 
   
   'content-type': 'application/json' // 默认值
 },
 success (res) { 
   
   console.log(res.data)
 }
})

1.3，文件下载 wx.downloadfile

下载文件资源到本地。客户端直接发起一个 https get 请求，返回文件的本地临时路径 (本地路径)，单次下载允许的最大文件为 200mb

同样也要配置下载合法域名

wx.downloadfile({ 
   
  url: '', 
  success (res) { 
   
    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
    if (res.statuscode === 200) { 
   
      wx.playvoice({ 
   
        filepath: res.tempfilepath
      })
    }
  }
})

1.3，文件上传 wx.uploadfile

将本地资源上传到服务器。客户端发起一个 https post 请求，其中 content-type 为 multipart/form-data
同样也要配置下载合法域名

  wx.uploadfile({ 
   
      url: '', 
      filepath: tempfilepaths[0],
      name: 'file',
      formdata: { 
   
        'user': 'test'
      },
      success (res){ 
   
        const data = res.data
        //do something
      }
    })

1.4，分享朋友圈 onsharetimeline

监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容
注意：只有定义了此事件处理函数，右上角菜单才会显示“分享到朋友圈”按钮

page({ 
   
/** * 生命周期函数--监听页面加载 */
  onload() { 
   
    // 用户点击右上角分享给好友,要先在分享好友这里设置menus的两个参数,才可以分享朋友圈
    wx.showsharemenu({ 
   
      menus: ['shareappmessage', 'sharetimeline'] //shareappmessage必须得有
    })
  },
   //用户点击右上角分享朋友圈
  onsharetimeline() { 
   
    return { 
   
      title: '自定义分享标题',
      query: "id=110101&name=heyzqt",
      imageurl: ""
    }
  }
})

三 ，获取系统信息

功能描述

异步获取系统信息。需要一定的微信客户端版本支持，在不支持的客户端上，会使用同步实现来返回。

参数

object object

object.success 回调函数

参数

object res

wx.getsysteminfo({ 
   
      success (res) { 
   
        console.log(res.model)
        console.log(res.pixelratio)
        console.log(res.windowwidth)
        console.log(res.windowheight)
        console.log(res.language)
        console.log(res.version)
        console.log(res.platform)
      }
    })

输出结果：

四，获取用户信息

获取用户信息的接口变化历史:

1，直接用wx.getuserinfo获取用户信息,后来被限制。
2，使用button按钮的open-type=“getuserinfo”,通过bindgetuserinfo事件获取用户信息,现在叒限制。
3，使用api:getuserprofile获取用户信息

小程序发了篇公告

将授权登陆获取用户信息的接口调整了,新增了一个wx.getuserprofile。特说明一下授权登陆的注意事项:

1，原授权登陆流程不变,依旧是

2，只是获取用户信息的地方发生改变了,获取用户信息必须通过wx.getuserprofile获取

3，wx.getuserprofile这个api必须写在事件的最上面在这里插入代码片

示例代码:

wxml:

<button bindtap="login">登陆</button>

js:

login() { 
   
    wx.getuserprofile({ 
   
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (file) => { 
   
        console.log(file)
        wx.login({ 
   
          success: (res) => { 
   
            console.log(res);
            wx.request({ 
   
              url: 'code获取openid的接口',
              data: { 
   
                code: res.code
              },
              success: (open) => { 
   
                console.log(open.data);
                wx.request({ 
   
                  url: '授权登陆接口',
                  data: { 
   
                    openid: open.data.openid,
                    nickname: file.userinfo.nickname,
                    headurl: file.userinfo.avatarurl
                  },
                  success(data) { 
   
                    console.log(data.data);
                  }
                })
              }
            })
          }
        })
      }
    })
  },