微信原生小程序调用opencv 微信小程序opendata

转载

bingfeng 2024-07-03 20:20:42

文章标签 微信原生小程序调用opencv 微信小程序微信小程序本地缓存 文章分类 计算机视觉人工智能

这里我开源了一个微信小程序的案例：https://gitee.com/xiaoshixiaoran/wechat-applet
相关后台接口我会有空用SSM重写一遍再挂上去

由于微信小程序官网在2021-12-27号发布了组件功能调整

原来的获取微信用户头像和微信昵称方式需要重新填写

微信原生小程序调用opencv 微信小程序opendata_微信原生小程序调用opencv

首先分析一下，以前微信小程序是可以直接从组件获取到用户头像和昵称直接使用
现在的展示个人信息的能力将被回收在年后2022年2月21日24时起

我们来看看官网新的说明可以通过 “ 头像昵称填写功能功能进行收集”

微信原生小程序调用opencv 微信小程序opendata_微信原生小程序调用opencv_02

这里我们点进去看看

链接：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html

微信原生小程序调用opencv 微信小程序opendata_本地缓存_03

意思是什么呢，以后在登录微信小程序的时候，一个小程序一个可供选择的头像和昵称，可以任意改变，不和当前微信头像、昵称冲突

昵称也差不多，输入保存下面这张图是微信小程序之前获取当前微信用户头像和昵称的方式，直接贴上去就好了

微信原生小程序调用opencv 微信小程序opendata_微信小程序_04

来说一下我的思路，首先测试一下这个头像昵称填写,把该小程序的用户头像和昵称填写后点击保存
（这里我要说明一下，当你的头像点击后这里会直接把你选择的头像上传至微信数据库然后给一个链接
直接引用过来还是比较方便的）保存给个非空判断，放到本地缓存，在登录是时候判断本地缓存是否有头像和昵称信息，有的话走以前流程直接登录，没有的话就跳转到这个页面填入该小程序的头像和昵称

微信原生小程序调用opencv 微信小程序opendata_微信小程序_05

接下来我们看代码

登录的js中自行判断在哪插入

/**
       * 2022年1月4号插入 因为官网从2022年2月21日24时起回收通过<open-data>展示个人信息的能力
       * 所以需要改变头像昵称获取方式
       * 之前直接获取该微信头像和昵称
       * 现在流程，点击登录后判断本地缓存是否有user_avatar_nickname参数
       * 有的话就跳转主页面，没有的话跳转第一次用户登录填写头像以及昵称信息后再跳转至主页面
       */

       //读取用户头像昵称信息
      let user_avatar_nickname = wx.getStorageSync('user_avatar_nickname') ? wx.getStorageSync('user_avatar_nickname') : '[]';
      let useran = JSON.parse(user_avatar_nickname)
      
      console.log(useran.length);
      // 登录成功后检测是否存在用户头像昵称信息
      if(useran.length == 0){
       //不存在，跳转输入信息
        wx.navigateTo({
          url: '/pages/personal_center/avatar_nickname/avatar_nickname'
        })
      }else{
        // 登录成功后自动跳转至个人中心personal页面
        wx.reLaunch({
          url: '/pages/personal_center/personal/personal'
        })
      }

跳转至填入头像和昵称信息页面

wxml代码

<view class="container">
  <h2>请输入在本小程序的头像和昵称</h2>
  <button class="images" style="padding: 0; margin-top: 100rpx; margin-bottom: 100rpx;" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar images" src="{{userAvatarUrl}}"></image>
  </button>
  
  <view class="flex gd" style="margin-left: 40rpx; margin-top: 20rpx;">
    <text class="gd">昵称：</text>
    <input type="nickname" class="weui-input w200" data-type="userNickName" placeholder="请输入昵称" bindinput="handleInput" />
  </view>
  <button style="margin-top: 200rpx;" bindtap="baocun">保存</button>
</view>

css代码（可能有点丑）

.images{
  width: 200rpx;
  height: 200rpx;
}
.w200{
  width: 400rpx;
}
.weui-input{
  border: 1rpx solid #333;
  border-radius: 10rpx;
  height: 60rpx;
  line-height: 60rpx;
  padding-left: 20rpx;
  min-height:60rpx;
}
.gd{
  height: 60rpx;
  line-height: 60rpx;
}

js代码

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userAvatarUrl: defaultAvatarUrl,
  },

  onChooseAvatar(e) {
    console.log(e.detail)
    const { avatarUrl } = e.detail;
    this.setData({
      userAvatarUrl:avatarUrl,
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
    //表单项内容发生改变的回调
    handleInput(event){
      //console.log(event);
      //let type = event.currentTarget.id;//id传值
      let type = event.currentTarget.dataset.type;
      //console.log(type,event.detail.value)
  
      //给初始化数据赋值
      this.setData({
        [type]:event.detail.value
      })
    },
    /*点击保存 把头像和昵称缓存到本地 */
    baocun(){
      console.log(this.data.userAvatarUrl!=defaultAvatarUrl);
      console.log(this.data.userNickName!=undefined);
      if(this.data.userAvatarUrl != defaultAvatarUrl&&this.data.userNickName!=undefined){
        let user_avatar_nickname = [this.data.userAvatarUrl,this.data.userNickName];
    console.log(user_avatar_nickname)
        //将信息存储至本地
      wx.setStorageSync('user_avatar_nickname', JSON.stringify(user_avatar_nickname)) //转成string格式
      wx.reLaunch({
        url: '/pages/personal_center/personal/personal'
      })
      }else{
        wx.showToast({
          title: '请填写完整',
          icon:'error',
        })
      }
    }
    })

登录页面点击登录后判断本地缓存是否有头像昵称信息，没有的话跳转该页面

微信原生小程序调用opencv 微信小程序opendata_微信原生小程序调用opencv_06