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

版权声明：转载请标明出处。 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. 
7. 感觉还不错。也不知道用处大不大。
8. 第一次写博客，排版啥的也不知道咋弄，凑合看吧。