小程序里用来block循环获取高度_开发新闻小程序（step 4）

(本篇约1600字)

(本篇定位在开发一个“新闻小程序”，之前我们开发过的小程序大多是简单的显示文本和图片，那么这次我们增加一些与用户之间的交互。温馨提示读者在看本部分之前应该先看“官方文档”->“教你写代码”以及“理论实践”的前3个部分，下面跟我一起开发新闻小程序吧)

本篇承接《开发新闻小程序(step 3)》

第6章 个人主页

        我们的主页应该具备登录按钮，登录后显示头像，而且可以显示我们已经搜藏了的文章。我们先来看一下主页的效果：

从上图可以看出，我们将 “我的” 页面分成了两大部分，一个是用户的头像信息，一个是我的搜藏信息，当用户没有登录的时候，搜藏部分应该是空的，当用户登录之后，小程序应根据用户的真实情况来显示搜藏的内容。有了上述需求，我们就来开发这部分内容吧。

1、用户点击登录

        当我们刚打开小程序的时候，用户是没有登录的，此时效果如下图所示：

<view class="myLogin">  <block wx:if="{{isLogin}}">    <image src="{{src}}">image>    <text>{{nickName}}text>  block>  <button wx:else open-type="getUserInfo" bindgetuserinfo="getMyInfo">未登录，点此登录button>view>

这里定义一个 getMyInfo 函数，它的作用就是获取当前用户的基本信息：

 // 获取个人信息  getMyInfo:function(e){    //console.log(e.detail.userInfo)    let info = e.detail.userInfo    this.setData({      src:info.avatarUrl,      nickName:info.nickName,      isLogin:true    })

当我们点击按钮之后，会获取到如下信息：

然后将上述信息对应的更新我们定义的data对象就可以了：

data: {    number:0,    nickName:"未登录",    src:"/images/index1.png",    newsList: []  },

2、我的收藏

        首先来看一下这部分的前端代码：

<view class="myFavorite">   <text>我的收藏({{number}})text>  <view class="news-list">    <view class="news-item" wx:for="{{newsList}}" wx:key="{{item.id}}">      <image src="{{item.poster}}">image>      <text bindtap = 'goToDetail' data-id="{{item.id}}">{{item.title}}————{{item.add_date}}text>    view>  view>view>

这里将会根据 wx:for 来循环显示用户已经收藏过的新闻内容，那么用户收藏过的新闻会在哪里呢？认真看过前边文章的读者应该已经知道了，用户收藏的文章会存储在缓存当中，使用wx.getStorageInfoSync()函数即可取出，这样我们就知道了，当用户点击登录按钮之后，首先通过getStorageInfoSync函数读取用户的缓存信息，然后根据缓存信息中的字段来控制data对象，从而控制前端的显示内容。

        我们看下对应的JavaScript代码：

getMyFavorites:function(){    let info = wx.getStorageInfoSync()  //读取本地缓存信息    let keys = info.keys    //获取全部key信息     let num = keys.length   //获取收藏新闻数量        let myList = [];    for( var i = 0; i < num; i++ ){      let obj = wx.getStorageSync(keys[i])      myList.push(obj)    }    //更新收藏列表    this.setData({      newsList:myList,      number:num    })  }

我们将缓存信息打印出来看一下：

可以看到此处有我们之前收藏的两篇新闻的基本信息，分别用序号0、1标注，同时还有对应的新闻ID号。有了这些基本信息后，我们就可以很灵活的调取新闻的详细信息了。

        上述JavaScript代码中，我们定义一个myList数组，然后将新闻的基本信息取出来，通过myList.push() 方法将信息存入数组当中，再对data对象进行更新，对应在前端就可以显示出来我们的信息了：

    let myList = [];    for( var i = 0; i < num; i++ ){      let obj = wx.getStorageSync(keys[i])      myList.push(obj)    }    //更新收藏列表    this.setData({      newsList:myList,      number:num    })  }

3、点击收藏跳转到新闻页

        从上图中我们可以看到，当我们收藏也有新闻之后，我们可以点击相应的新闻简介来跳转到对应的新闻详情页。这里其实就是使用了wx.navigateTo() ，利用这个API直接跳转到相应的页面即可。

goToDetail: function (e) {    //获取携带data-id的数据    let id = e.currentTarget.dataset.id    //console.log(e)    //携带新闻ID进行页面跳转    wx.navigateTo({      url: '../detail/detail?id=' + id,    })  }

        其中的 id 号就是对应所要跳转的新闻详情页面，如下图所示，我们跳转到对应 id 号的页面之后，打印出当前页的详情，可以看到当前页面的 id 号就是我们所要跳转的地方。

至此我们就完成了个人主页模块的开发。