前言

感謝! 承蒙關照~

微信小程式我的介面

介面效果:

介面結構:

小程式程式碼:

我們先看me.json程式碼

{
  "navigationBarTitleText": "個人中心"
}

me.wxml程式碼

<view class="bg">
  <view class="head">
    <view class="headIcon">
      <image src="{{userInfo.avatarUrl}}" style="width:70px;height:70px;"></image>
    </view>
    <view class="login">
      {{userInfo.nickName}}
    </view>
  </view>
  <button class="button" open-type="getUserInfo" wx:if="{{hasUserInfo}}" bindgetuserinfo="doAuthorization"> 微信登入 </button>
</view>

<view class="hr"></view>
<view class='item'>
  <view class="title">手機繫結</view>
  <view class="detail2">
    <text>></text>
  </view>
</view>
<view class="line"></view>

<view class='item'>
  <view class="title">閱讀文章</view>
  <view class="detail2">
    <text>></text>
  </view>
</view>

<view class="hr"></view>
<view class='item'>
  <view class="title">電影推薦</view>
  <view class="detail2">
    <text> ></text>
  </view>
</view>
<view class="line"></view>
<view class="item">
  <view class="title">我的收藏</view>
  <view class="detail2">
    <text> ></text>
  </view>
</view>
<view class="line"></view>
<view class="item">
  <view class="title">意見反饋</view>
  <view class="detail2">
    <text> ></text>
  </view>
</view>
<view class="line"></view>
<view class="item">
  <view class="title">設定</view>
  <view class="detail2">
    <text> ></text>
  </view>
</view>
<view class="hr"></view>
 

me.wxss程式碼

.bg {
  height: 150px;
  background-color: #d53e37;
}

.head {
  display: flex;
  flex-direction: column;
}

.headIcon {
  display: flex;
  justify-content: center;
}

.login {
  display: flex;
  color: #fff;
  font-size: 15px;
  margin-top: 15rpx;
  justify-content: center;
}

.button {
  margin: 10px;
  font-size: 14px;
}

.head image {
  border-radius: 50%;
}

.hr {
  width: 100%;
  height: 15px;
  background-color: #f4f5f6;
}

.item {
  display: flex;
  flex-direction: row;
}

.title {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  font-size: 15px;
}

.detail2 {
  font-size: 15px;
  position: absolute;
  right: 10px;
  height: 50px;
  line-height: 50px;
  color: #888;
}

.line {
  border: 1px solid #ccc;
  opacity: 0.2;
}
 

me.js程式碼

//index.js
//獲取應用例項
const app = getApp()
var openid = wx.getStorageSync("openid");
Page({
  data: {
    hasUserInfo: openid == ""
  },
  doAuthorization: function(e) {
    var that = this;
    console.log("呼叫了 doAuthorization 授權");
    // console.log(e);
    if (e.detail.userInfo == null) { //為null  使用者拒絕了授權
      //coding。。。。
      console.log("使用者拒絕授權");
    } else {
      //授權
      wx.login({
        success: function(res) {
          console.log('login:code', res.code)
          //傳送請求
          wx.request({
            url: app.globalData.userInterfaceUrl + 'record/' + res.code, //介面地址
            method: 'GET',
            header: {
              'content-type': 'application/json' //預設值
            },
            success: function(res) {
              console.log("record  成功", res.data)
              var res = res.data;
              if (res.error) { //發生錯誤
                console.log("錯誤：", res.msg);
              } else { //返回成功
                try {
                  wx.setStorageSync('openid', res.data.openid)
                  openid = wx.getStorageSync("openid");
                } catch (e) {
                  console.log("wx.login 錯誤", e);
                }
                //載入使用者資訊
                that.loadUserInfo();
                that.setData({ //設定變數
                  hasUserInfo: false
                });
              }
            },
            fail: function(err) {
              console.log("record  失敗", err);
            }
          })
        }
      })
    }

  },
  loadUserInfo: function() {
    var that = this;
    if (openid != "") {
      wx.getUserInfo({
        success: res => {
          console.log("wx獲得使用者資訊:", res);
          var data = {
            "openid": openid,
            "user": res.userInfo
          }
          //傳送資訊給伺服器獲得使用者資訊
          wx.request({
            url: app.globalData.userInterfaceUrl + 'login',
            dataType: "json",
            method: "POST",
            data: data,
            success: function(res) {
              console.log("loadUserInfo（伺服器返回） success", res.data);
              if (!res.data.error) {
                app.globalData.userInfo = res.data.data;
                that.setData({
                  userInfo: app.globalData.userInfo
                })
              } else {
                console.log("伺服器獲取使用者資訊失敗");
                //TODO：使用者資訊獲取錯誤
              }
            },
            fail: function(e) {
              console.log("loadUserInfo（伺服器返回）error", e);
              //TODO:錯誤
            },
            complete: function(e) {
              //完成
            }
          })
          // 由於 getUserInfo 是網路請求，可能會在 Page.onLoad 之後才返回
          // 所以此處加入 callback 以防止這種情況
          if (this.userInfoReadyCallback) {
            this.userInfoReadyCallback(res)
          }
        }
      })
    }
  },

  // 事件處理函式
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onShow: function() {
    var that = this;
    console.log("openid:", openid);
    that.loadUserInfo();
  }
})
 

達叔小生：往後餘生，唯獨有你
You and me, we are family !
90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動並且善於溝通
簡書部落格： 達叔小生
https://www.jianshu.com/u/c785ece603d1

結語

• 下面我將繼續對 其他知識 深入講解 ，有興趣可以繼續關注
• 小禮物走一走 or 點贊