小程序自定义组件之button登陆

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_42172829/article/details/80914087

闲着没事玩了下自定义组件,只推荐自己玩下。登陆请不要使用此方法。

如有需要,可借鉴之前小程序登陆维护3rdsession文章。

  1. 由于前段时间,wx.getUserInfo被改还必须使用button登陆,获取用户信息操作就变得比较繁琐。
  2. 创建小程序。 在项目上创建名为components的文件夹,在创建组件文件。创建js,json,wxml,wxss 文件时,选择Component选择,编辑器会自动创建json中的配置和js 方法
  3. login.json文件 :
    {
    "component": true,
    "usingComponents": {}
    }
  4. login.wxml文件:
    <view hidden='{{isShow}}' class='btn'>
    <button class='button' open-type='getUserInfo' catchtap='okgetUser' bindgetuserinfo='onGetUserInfo'>登陆</button>
    </view>
  5. login.wxss文件:
    button::after {
    border: none;
    }                     /* 很多人觉得放一个button不好看,现在将button边框,背景色全部去掉*/
    .button {
    border: none;
    width: 40%;
    background: #fff;
    /* position: absolute;
    left: 20%;
    top: 10%; */
    }

login.js文件:

// components/login/login.js
var RdWXBizDataCrypt = require('../../utils/libs/RdWXBizDataCrypt.js') //解密文件
var APPID = 'xxxxxxx'; //AppID(小程序ID)
var APPsecret = 'xxxxxxxx' // AppSecret(小程序密钥)

Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
*/
properties: {

},

/**
* 组件的初始数据
*/
data: {

},

/**
* 组件的方法列表
*/
methods: {
onGetUserInfo: function() {
// this.triggerEvent("okgetUser");
console.log("点击了");
wx.login({
success: function(loginResult) {
console.log(loginResult.code)
var JSCODE = loginResult.code;
wx.request({
url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + APPID + '&secret=' + APPsecret + '&js_code=' + JSCODE + '&grant_type=authorization_code',
method: 'GET',
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
success: function(res) {
console.log(res)
console.log(res.data.seesion_key)
wx.getUserInfo({
success: function(datas) {
                  //由于openid 跟 unionId 属于敏感信息,需要对用户数据进行解密
var pc = new RdWXBizDataCrypt(APPID, res.data.session_key)
var userData = pc.decryptData(datas.encryptedData, datas.iv)
console.log(userData)
}
})
}
})
}
})
}
}
})

 

写到这自定义登陆的组件就完成了。看看效果,跟引用。

 

 

  1. 引用自定义组件(文件命名可以当没看见,哈哈哈),创建页。
  2. 在denglu.json 中:写入文件引用。
  3. denglu.wxml中使用一个标签使用,即可
  4. 看看获取到的用户数据
  5. 感觉还不错。也不知道用处大不大。
  6. 第一次写博客,排版啥的也不知道咋弄,凑合看吧。
展开阅读全文

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