微信小程序开发笔记⑭——获取AccessToken、获得当前用户信息、收货地址、获取位置、手动转发、定时器、用户登陆、获取手机号和附近小程序

获取AccessToken

官方描述
https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html

AccessToken功能上类似于web开发中的session

<view>
  <button bindtap="getAccessToken">获取AccessToken</button>
</view>

/**
 * 获取AccessToken
 */
getAccessToken:function(){
  wx.request({
    url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='+this.appid+'&secret='+this.secreat,
    success:function(res){
      console.log(res)
      myAccessToken = res.data.access_token
    }
  })
},

获得当前用户信息

官方描述
https://developers.weixin.qq.com/miniprogram/dev/api/open-api/account-info/wx.getAccountInfoSync.html

<button bindtap="accountInfo">获取当前账户信息</button>

accountInfo:function(){
  // 创建获取当前信息的对象
  const accountInfo = wx.getAccountInfoSync()
  // 获取小程序的appid
  console.log(accountInfo.appid)
},

收货地址

官方描述
https://developers.weixin.qq.com/miniprogram/dev/api/open-api/address/wx.chooseAddress.html

<button bindtap="address">收货地址</button>

/**
 * 收货地址
 */
address:function(){
  // 用户的收获地址信息
  wx.chooseAddress({
    success(res){
      console.log(res.userName)
      console.log(res.postalCode)
      console.log(res.provinceName)
      console.log(res.cityName)
      console.log(res.countyName)
      console.log(res.nationalCode)
      console.log(res.telNumber)
    }
  })
},

获取位置

官方描述
https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html

获取当前位置并在地图中显示出来

<button bindtap="location">获取位置</button>

// 获取位置
location:function(){
  // 使用微信内置地图查看
  wx.getLocation({
    success(res){
      // 获得经度纬度
      const latitude = res.latitude
      const longitude = res.longitude

      console.log(latitude)
      console.log(longitude)

      // 打开地图定位
      wx.openLocation({
        latitude,
        longitude,
        scale:28
      })
    }
  })
},

注意如果要使用getLocation函数必须在app.json中声明permission，如下

下面是结果的演示

同样我们还可以直接在地图上选择我们需要获取的位置

<button bindtap="chooseLocation">打开地图选择位置</button>

/**
 * 选择打开位置
 */
chooseLocation:function(){
  // 在地图中选择某个位置获得位置信息
  wx.chooseLocation({
    success: (res) => {
      console.log(res)
    },
  })
},

手动转发

除了小程序已经提供的转发按钮，我们同样可以通过api实现转发功能

官方描述
https://developers.weixin.qq.com/miniprogram/dev/api/share/wx.updateShareMenu.html

只需要设置open-type为share，它就成为了一个转发按钮

<button open-type="share">手动转发</button>

在js中默认会有一个转发事件，在转发时会自动触发，我们可以吧需要执行的逻辑代码写在里面

/**
 * 用户点击右上角分享
 */
onShareAppMessage: function () {
  console.log("分享转发")
}

定时器

官方描述
https://developers.weixin.qq.com/miniprogram/dev/api/base/timer/clearInterval.html

下面有两种常见的定时器，单位都是ms

1. setTimeout，延迟触发

<button bindtap="setTimeout">定时器（setTimeout）</button>

/**
 * 延时触发
 */
setTimeout:function(){
  setTimeout(() => {
    wx.showModal({
      title:"hello",
      content:"zdd"
    })
  }, 3000);
},

2. setInterval，循环触发

<button bindtap="setInterval">定时器（setInterval）</button>

/**
 * 循环触发
 */
setInterval:function(){
  setInterval(() => {
    wx.showModal({
      title:"hello",
      content:"zdd"
    })
  }, 3000);
},

用户登陆

官方描述
https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html

用户登陆的主要目的在于获取用户的openID，相当于用户唯一标识

<view>
  <button bindtap="userLogin">用户登陆</button>
</view>

userLogin:function(){
  var that = this
  wx.login({
    success: (res) => {
      console.log(res.code)
      // 换取openID
      wx.request({
        url: 'https://api.weixin.qq.com/sns/jscode2session?appid='+that.appid+'&secret='+that.secret+'&js_code='+res.code+'&grant_type=authorization_code',
        success(res){
          // res中可以获取用户的openID
          console.log(res)
        }
      })
    },
  })
},

获取手机号

官方描述
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
’

附近小程序

官方描述
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/nearby-poi/nearbyPoi.add.html

都是通过http调用，需要access_token，这个如何获取请看上文

<view>
  <button bindtap="nearByPoilist">附近小程序</button>
</view>

/**
 * 附近小程序
 */
nearByPoilist:function(){
  wx.request({
    url: 'https://api.weixin.qq.com/wxa/getnearbypoilist?page=1&page_rows=20&access_token='+myAccessToken,
    success(res){
      console.log(res)
    }
  })
},

来源：CSDN

作者：ww0peo

链接：https://blog.csdn.net/qq_35262405/article/details/104072588