網址：
https://article.itxueyuan.com/DamA20
一、創建頁面load
創建頁面load
二、需求說明
登錄之前，【我的】頭像和文字顯示為默認顯示。微信授權登錄成功之后，【我的】頭像和文字分別獲取微信頭像和微信名字。
三、代碼實現（微信授權登錄頁面）
1、load.wxml
1 <view class="loadType"> 2 <button type="primary" bindtap="loadByWechat">微信授權登錄</button> 3 <button type="primary" plain="true" bindtap="loadByPhone">手機號碼登錄</button> 4 <button type="primary" plain="true" bindtap="loadByAccount">賬號密碼登錄</button> 5 </view>
2、load.wxss
1 .loadType{
2 margin-top: 800rpx;
3 }
4 button{
5 margin-top: 20rpx;
6 }
3、load.js
- 微信授權登錄獲取用戶信息（wx.getUserProfile函數）
- 攜帶用戶登錄頭像和名字跳轉到tab頁面（wx.reLaunch函數）
- 將獲取的用戶信息保存到緩存中（wx.setStorageSync函數）
1 Page({
2
3 //微信授權登錄
4 loadByWechat(){
5 wx.getUserProfile({
6 desc: '用戶完善會員資料',
7 })
8 .then(res=>{
9 console.log("用戶允許了微信授權登錄",res.userInfo);
10 //注意：此時不能使用 wx.switchTab，不支持參數傳遞
11 wx.reLaunch({
12 //將微信頭像和微信名稱傳遞給【我的】頁面
13 url: '/pages/me/me?nickName='+res.userInfo.nickName+'&avatarUrl='+res.userInfo.avatarUrl,
14 })
15 //保存用戶登錄信息到緩存
16 wx.setStorageSync('userInfo', res.userInfo)
17 })
18 .catch(err=>{
19 console.log("用戶拒絕了微信授權登錄",err);
20 })
21 },
22
23 //跳轉到手機號碼登錄頁
24 loadByPhone(){
25 wx.navigateTo({
26 url: '/pages/loadByPhone/loadByPhone',
27 })
28 },
29
30 //跳轉到賬號密碼登錄頁
31 loadByAccount(){
32 wx.navigateTo({
33 url: '/pages/loadByAccount/loadByAccount',
34 })
35 },
36
37 })
四、代碼實現（我的頁面）
1、me.wxml
1 <!--未登錄-->
2 <view class="load" wx:if="{{!loginOk}}">
3 <image src="../../images/我的.png" bindtap="load"></image>
4 <text class="clickload" bindtap="load">點擊登錄</text>
5 </view>
6 <!--已登錄-->
7 <view wx:else>
8 <view class="load" >
9 <image src="{{avatarUrl}}" ></image>
10 <text class="clickload" >{{nickName}}</text>
11 </view>
12 <button class="exit" bindtap="exit" type="primary">退出登錄</button>
13 </view>
2、me.wxss
1 .load{
2 background-color:#04BE02;
3 width: 100%;
4 height: 400rpx;
5 /*設置圖片和文字垂直居中對齊*/
6 display: flex;
7 flex-direction: column;
8 justify-content: center;
9 align-items: center;
10 }
11
12 .load image{
13 width: 200rpx;
14 height: 200rpx;
15 border-radius: 50%;
16 }
17 .load text{
18 color:white;
19 }
20 .exit{
21 width: 95%;
22 margin-top: 40rpx;
23 }
3、me.js
- onLoad：頁面加載的時候，獲取load頁面傳過來的微信頭像和微信名字
- onShow：根據緩存數據，來控制已登錄/未登錄的頁面切換顯示
- 退出登錄后，清空用戶信息的緩存數據
1 Page({
2
3 /**
4 * 頁面的初始數據
5 */
6 data: {
7 loginOk:true,
8 nickName:"",
9 avatarUrl:"",
10 },
11
12 //頁面加載的時候，將load頁面傳過來的值獲取過來
13 onLoad: function (options) {
14 console.log("這里的options",options);
15 this.setData({
16 nickName:options.nickName,
17 avatarUrl:options.avatarUrl
18 })
19 },
20
21 //小程序聲明周期的可見性函數里面來控制顯示
22 onShow(){
23 let userInfo = wx.getStorageSync('userInfo')
24 console.log("我的緩存信息",userInfo);
25 if(userInfo){
26 this.setData({
27 loginOk:true,
28 nickName:userInfo.nickName, //從緩存中拿數據
29 avatarUrl:userInfo.avatarUrl
30 })
31 }else{
32 this.setData({
33 loginOk:false
34 })
35 }
36 },
37
38 //點擊登錄
39 load(){
40 wx.navigateTo({
41 url: '/pages/load/load',
42 })
43 },
44
45 //退出登錄
46 exit(){
47 wx.showModal({
48 content:"確定退出嗎"
49 }).then(res=>{
50 if(res.confirm){
51 console.log("用戶點擊了確定");
52 this.setData({
53 loginOk:false
54 })
55 //清空登錄的緩存
56 wx.setStorageSync('userInfo', null)
57 }else if(res.cancel){
58 console.log("用戶點擊了取消");
59 }
60 })
61 },
62
63 })
更多授權登錄可參考
https://www.cnblogs.com/xiaoyantongxue/p/15673956.html
獲取手機號
https://www.cnblogs.com/xiaoyantongxue/p/15705814.html
jwt:
https://www.cnblogs.com/xiaoyantongxue/p/15677256.html
商品發布
表單：
https://www.cnblogs.com/xiaoyantongxue/p/15673984.html
頁面展示
https://www.cnblogs.com/xiaoyantongxue/p/15676963.html
分頁展示
1
https://www.cnblogs.com/xiaoyantongxue/p/15708563.html
2
https://www.cnblogs.com/xiaoyantongxue/p/15748215.html
文件上傳
https://www.cnblogs.com/xiaoyantongxue/p/15676891.html
防抖
https://www.cnblogs.com/xiaoyantongxue/p/15677352.html
搜索關鍵字標紅
https://www.cnblogs.com/xiaoyantongxue/p/15708398.html
簽到
https://www.cnblogs.com/xiaoyantongxue/p/15732673.html
秒殺：
https://www.cnblogs.com/xiaoyantongxue/p/15747946.html