闲着没事玩了下自定义组件,只推荐自己玩下。登陆请不要使用此方法。
如有需要,可借鉴之前小程序登陆维护3rdsession文章。
- 由于前段时间,wx.getUserInfo被改还必须使用button登陆,获取用户信息操作就变得比较繁琐。
- 创建小程序。 在项目上创建名为components的文件夹,在创建组件文件。创建js,json,wxml,wxss 文件时,选择Component选择,编辑器会自动创建json中的配置和js 方法
- login.json文件 :
{ "component": true, "usingComponents": {} }
- login.wxml文件:
<view hidden='{{isShow}}' class='btn'> <button class='button' open-type='getUserInfo' catchtap='okgetUser' bindgetuserinfo='onGetUserInfo'>登陆</button> </view>
- 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)
}
})
}
})
}
})
}
}
})
写到这自定义登陆的组件就完成了。看看效果,跟引用。
- 引用自定义组件(文件命名可以当没看见,哈哈哈),创建页。
- 在denglu.json 中:写入文件引用。
- denglu.wxml中使用一个标签使用,即可
- 看看获取到的用户数据
- :
- 感觉还不错。也不知道用处大不大。
- 第一次写博客,排版啥的也不知道咋弄,凑合看吧。