小程序诗词首页

xwml
<!--pages/shici/ts/ts.wxml-->
<view class='container'>
  <view class='userinfo-block'>
    <open-data type='userAvatarUrl' class='user-avatar'></open-data>
    <open-data type="userNickName" class='user-username'></open-data>
  </view>
  <view>
    {{currentText}}
  </view>
  <!-- 跳转 -->
  <navigator url='/pages/demosc/demosc'>
    <view class="version-info">
      版本信息
    </view>
  </navigator>
  <!-- 用户授权 -->
  <button open-type='getUserInfo' type='primary' bindgetuserinfo='getMyUserInfo' class='userinfo-btn'>获取用户授权信息</button>
  <button style='margin-top:20rpx;' type='warn' bindtap='toStudy'>去学古诗词</button>
</view>

js

// pages/shici/ts/ts.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  /***
   * 跳转路由
   */
  toStudy:function(e){
    wx.switchTab({
      url: '/pages/shici/ts/ts',
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.getUserInfo({
      success(res) {
        const userInfo = res.userInfo
        console.log(userInfo);
      }
    }),
      wx.setStorage({
        key: 'currentIndex',
        data: '悯农'
      });
    var that = this;
    wx.getStorage({
      key: 'currentIndex',
      success: function (res) {
        console.log(res);
        that.setData({
          currentText: res.data
        })
      },
    })
  },
  getMyUserInfo: function (res) {
    console.log(res);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

.container {

padding: 0rpx;

height: 100%;

display: flex;

flex-direction: row;

align-items: flex-start;

justify-content:flex-start;

}

.left-container{

width: 250rpx;

border-right: 2rpx solid #ccc;

}

.right-container{

 

}

.shiren{

widht:100rpx;

text-align: center;

height:100rpx;

line-height: 100rpx;

border-bottom: 2rpx solid #ccc;

}

 

 

 

 

 

.container {

padding: 0rpx;

height: 100%;

display: flex;

flex-direction: row;

align-items: flex-start;

justify-content:flex-start;

}

.left-container{

width: 250rpx;

border-right: 2rpx solid #ccc;

}

.right-container{

 

}

.shiren{

widht:100rpx;

text-align: center;

height:100rpx;

line-height: 100rpx;

border-bottom: 2rpx solid #ccc;

}