【微信小程序】制作个人信息页面_微信小程序自我介绍代码

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" bindtap="aboutMe">关于我们</view>

  <view class="detail2">

    <text bindtap="aboutMe" > ></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" bindtap="chatWithMe">联系我们</view>

  <view class="detail2">

    <text bindtap="chatWithMe" > ></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>

wxss样式页面代码

.bg {

  height: 150px;

  background-color: #eececc;

}

.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;

}

JS代码

//index.js

//获取应用实例

const app = getApp()

var openid = wx.getStorageSync("openid");

Page({

  data: {

    hasUserInfo: openid == "",

    info:'小说阅读器是一款在线小说阅读小程序，软件服务器24小时不间断更新各小说最新章节，软件一共有各类小说2万余部，并在每天更新中...你只需运行小程序就可以博览群书。'

  },

  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();

  },

  chatWithMe(){

    wx.showModal({

      title: "温馨提示", // 提示的标题

      content: "此小程序仅为测试使用，如有问题请联系开发人员（wx：13891349421）", // 提示的内容

      showCancel: true, // 是否显示取消按钮，默认true

      cancelText: "取消", // 取消按钮的文字，最多4个字符

      cancelColor: "#000000", // 取消按钮的文字颜色，必须是16进制格式的颜色字符串

      confirmText: "确定", // 确认按钮的文字，最多4个字符

      confirmColor: "#576B95", // 确认按钮的文字颜色，必须是 16 进制格式的颜色字符串

      success: function (res) {

          console.log("接口调用成功的回调函数");

          if (res.confirm) {

              console.log('用户点击确定')

          } else if (res.cancel) {

              console.log('用户点击取消')

          }

      },

      fail: function () {

          console.log("接口调用失败的回调函数");

      },

      complete: function () {

          console.log("接口调用结束的回调函数（调用成功、失败都会执行）");

      }

  })

},

aboutMe(){

  wx.showModal({

    title: "温馨提示", // 提示的标题

    content: this.data.info, // 提示的内容

    showCancel: true, // 是否显示取消按钮，默认true

    cancelText: "取消", // 取消按钮的文字，最多4个字符

    cancelColor: "#000000", // 取消按钮的文字颜色，必须是16进制格式的颜色字符串

    confirmText: "确定", // 确认按钮的文字，最多4个字符

    confirmColor: "#576B95", // 确认按钮的文字颜色，必须是 16 进制格式的颜色字符串

    success: function (res) {

        console.log("接口调用成功的回调函数");

        if (res.confirm) {

            console.log('用户点击确定')

        } else if (res.cancel) {

            console.log('用户点击取消')

        }

    },

    fail: function () {

        console.log("接口调用失败的回调函数");

    },

    complete: function () {

        console.log("接口调用结束的回调函数（调用成功、失败都会执行）");

    }

})

}

})