一.微信小程序一些接口的使用

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Jeff_pk/article/details/80255166
1. app.js的onLaunch方法执行,在执行第一个页面的onLoad方法
2.页面onLoad方法,页面只加载一次。
3.onShow方法每次页面显示都会执行。
4.获取权限的方法写在 app.js 中进行获取。用户信息一般在app.js中进行获取。如果用户拒绝获取用户头像信息,则可以在第一个界面的onShow()方法中(或在需要使用用户信息的页面中),进行重新引导用户获取权限,进而获取用户信息并将用户信息进行存取.  获取用户信息代码如下:
getUserInfo: function(cb){
    var that = this
    if (that.globalData.userInfo){
      typeof cb == "function" && cb(that.globalData.userInfo)
    }else{
      wx.getUserInfo({
        success: function (res) {
          that.globalData.userInfo = res.userInfo
          console.log(that.globalData.userInfo)
        },
        error: function (res) {
          console.log("error");
        },
        fail: function (res) {
          wx.showModal({
            title: '警告通知',
            content: '您拒绝授权,将无法正常显示个人信息,点击确定重新获取授权。',
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                wx.openSetting({
                  success: (res) => {
                    if (res.authSetting["scope.userInfo"]) {//如果用户重新同意了授权登录
                      wx.getUserInfo({
                        success: function (res) {
                          that.globalData.userInfo = res.userInfo
                          console.log(that.globalData.userInfo)
                        }
                      })
                    }
                  }
                })
              }
            }
          })
        }
      })
    }
  }
5.小程序获取地理位置信息,使用腾讯地图获取具体的地址信息。
    (1)在腾讯地图开放平台,注册程序使用的开发秘钥。
    (2)下载所需要的js:qqmap-wx-jssdk.min.js
    (3) 使用wx.getLocation获取经纬度。
    具体代码使用如下:

//引入需要的js    
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
// 实例化腾讯地图API核心类
qqmapsdk = new QQMapWX({
    key: 'EBNBZ-R4GKU-TDSVF-B2ISR-LF4WS-NWBL5' // 必填开发密钥(key)
})

//获取用户地理位置信息
  getUserLocation: function(){
    var that = this
    //1、获取当前位置坐标
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        //2、根据坐标获取当前位置名称,显示在顶部:腾讯地图逆地址解析
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: res.latitude,
            longitude: res.longitude
          },
          success: function (addressRes) {
            that.setData({
              location: addressRes.result.address_component.city
            })
          }
        })
      },
      fail: function (res) {
        wx.showModal({
          title: '警告通知',
          content: '您拒绝地理位置授权,将无法正常获取地理位置信息,点击确定重新获取授权。',
          showCancel: false,
          success: function (res) {
            if (res.confirm) {
              wx.openSetting({
                success: (res) => {
                  if (res.authSetting["scope.userLocation"]) {//如果用户重新同意了授权登录
                    wx.getLocation({
                      type: 'wgs84',
                      success: function (res) {
                        qqmapsdk.reverseGeocoder({
                          location: {
                            latitude: res.latitude,
                            longitude: res.longitude
                          },
                          success: function (addressRes) {
                            that.setData({
                              location: addressRes.result.address_component.city
                            })
                          }
                        })
                      }
                    })
                  }
                }
              })
            }
          }
        })
      }
    })
  },
6.在小程序的第一个界面进行权限的判断或在需要使用的权限信息的地方进行判断。
(1)获取APP对象
var app = getApp()
(2)在onShow方法中进行权限的重新获取。可以通过app.xxx方法获取在app.js中进行授权的方法。

7.下拉刷新
(1)在所需要进行下拉刷新的页面,用一下代码进行包裹。
<scroll-view scroll-y="true" height="100%">
</scroll-view>
(2)在js中添加方法:
onPullDownRefresh: function () {
    console.log("下拉刷新")
    wx.showNavigationBarLoading() //在标题栏中显示加载
    //进行数据请求
    //TODO    

    wx.hideNavigationBarLoading() //完成停止加载
    wx.stopPullDownRefresh() //停止下拉刷新
},

8.轮播图片展示
( 1)在所需要的进行轮播展示图片的页面,增加代码:
<swiper indicator-dots="{{indicatorDots}}" catchtap="onItemClick" class="swiper"
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
    <block wx:for="{{imgUrls}}" wx:key="id">
        <swiper-item>
            <image src="{{item.img}}" class="slide-image" data-postId="{{item.id}}" />
        </swiper-item>
    </block>
</swiper>
(2)在js中进行数据的的设置,并设置轮播图片的点击事件。
Page({
    data: {
        imgUrls: [
        ],
        indicatorDots: true, //是否显示画板指示点
        autoplay: true, //是否自动切换
        circular: false, //是否采用衔接滑动
        interval: 5000,
        duration: 1000
    },   
        onItemClick: function (event) {
                console.log("点击了")
                //您所需要进行的逻辑处理
                wx.showToast({
                        title: event.target.dataset.postid + "",
                })
        },

})

9.微信小程序获取openID
(1)使用wx.login方法获取code
wx.login({
    success: function (res) {
        if (res.code) {
            // console.log(res)
            // console.log(res.code)
            code = res.code
            //发起网络请求获取session_key和openid(请求后台服务)
            // wx.request({
                // url: '',
                // data:{},
                // success: function (data){

                // }
            // })
        } else {
            console.log('获取用户登录态失败!' + res.errMsg)
        }
    }
})
(2)通过code在我们后台程序进行获取session_key和openid等信息
/**
      * 通过微信小程序登录code获取用户的openId和session_key信息
      * @param code
      * @return
      */
     public static String getWxProgramSessionKey(String  code){
          logger.info("######getWxProgramSessionKey  start######");
          JSONObject jo = null;
          try {
              PropertiesUtil pu = new PropertiesUtil();
              //请求地址 https://api.weixin.qq.com/sns/jscode2session
              String url =  pu.readValue("wxRootHttpsUrl")+ThirdTemplateConstants.WX_GET_SESSIONKEY_OPENID;
              //请求参数 
              String params =  "appid="+pu.readValue("wxProgram")+"&secret="+pu.readValue("wxProgramSecret")
                        +"&js_code="+code+"&grant_type=authorization_code";
              String result = HttpUtil.sendGet(url,  params);
              jo = JSONObject.parseObject(result);
          } catch (Exception e) {
              logger.info("######getWxProgramSessionKey  error######");
              e.printStackTrace();
          }
          
          logger.info("######getWxProgramSessionKey  end######");
          return jo.toJSONString();
     }
返回结果:{"openid":"oh3gY48jSwO9oyBmU8g7TML4vxuE","session_key":"/oGyuh+h1l2wIi29UxuPEA=="}
(3)session_key可以用来进行前面获取用户信息的加密信息校验,具体请参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/open.html#wxgetuserinfoobject





展开阅读全文

没有更多推荐了,返回首页