Vue+Vux学习案例(四)—构建开源中国微信版(增加资讯详情，集成Vuex)

上篇文章链接：Vue+Vux学历案例(三)—构建开源中国微信版(添加网络通信)

下面是效果图：

 

首先新建资讯详情页NewsDetail.vue

<template>
  <tabbar class="tabbar">
    <div class="title">{{title}}</div>
    <tabbar-item class="search">
    </tabbar-item>
  </tabbar>
  <h3 class="htitle">{{result.title}}</h3>
  <div id="content"></div>
</template>
<style>
.tabbar{
background-color:#00CC66;
height:50px;
position:relative;
}
.search{
position:absolute;right:5px;top:5px;z-index:999;
}
.title{
   text-align:center;
   margin:auto;
   color:white;
   line-height:50px;
   font-size:18px;
 }
.htitle{
   text-align:center;
   margin:auto;
   color:black;
   line-height:50px;
}
</style>
<script>
    import Tabbar from 'vux/dist/components/tabbar'
    import TabbarItem from 'vux/dist/components/tabbar-item'
    import { getNewsDetail } from '../utils/api'


    export default{
        name:'NewsDetail',
        data () {
          return {
             title: '',
             result:'',
          }
        },
        components:{
              Tabbar,
              TabbarItem,
        },
        ready () {
           console.log(this.$route.query);
           this.title=this.$route.query.tag;
           this.getDetail()
        },
        methods:{
            //获取消息id,根据id到服务端请求详情
            async getDetail() {
                let data =await getNewsDetail(this.$route.query.id);
                console.log(data);
                if(data.code>=0){
                  this.result=data.result;
                  this.body=this.result.body;
                  document.getElementById("content").innerHTML=this.body;
                }
            }
        }
    }
</script>

这里收到的服务端返回的data.result.body是html字符串，需要转化下，否则页面看到的都是标签加内容

api.js修改：

/**
 * Created by mwuyz on 2016/10/28.
 */
import "whatwg-fetch"
import promise from "es6-promise"

const host_addr='http://192.168.1.107:8081/'
/*
 *获取资讯列表
 */
export let getList = async (page, tag) => {
  let response = await fetch(host_addr+`news_list?pageIndex=${page}&pageSize=20&catalog=${tag}`, {
    method: 'GET',
    mode: 'cors',
  }).catch((error) => {
    console.log(error)
  })
  return await response.json().catch((error) => {
    console.log(error)
  })
}

/*
 *获取资讯详情
 */
export let getNewsDetail = async (id) => {
  let response = await fetch(host_addr+`news_detail?id=${id}`, {
    method: 'GET',
    mode: 'cors',
  }).catch((error) => {
    console.log(error)
  })
  return await response.json().catch((error) => {
    console.log(error)
  })
}

然后NewsList.vue页面修改下：这个页面用到scroller组件，除了height设置合适外，还需要在里面设置height够长的地div，之前没有设置的导致不能正常滚动

css设置这个div的高度

.news-wrap {
  height: 1800px;
  overflow: hidden;
}

NewsList.vue的完整代码：

<template>
  <div>
  <scroller lock-x scrollbar-y height="360px"  :prevent-default="false" v-ref:scroller>
    <div class="news-wrap">
     <cell v-for="x in Objlist"  :title="x.title" v-link="{path: '/newsdetail',query:{id:x.id,tag:'资讯'}}" :inline-desc='x.body'>
        <img class="ic_img"  slot="icon" src="../assets/image/ic_label_today.png">
        <div>
           <span class="pubdate">{{x.pub_date}}</span>
        </div>
     </cell>
    </div>
  </scroller>
  </div>
</template>
<style>
.ic_img{
position:absolute; top:10px; left: 5px;
width:15px;
height:15px;
}
.weui_cell_bd>p{
 font-size:15px;
}
.vux-label-desc{
 padding-right:15px;
}
.weui_cell_bd.weui_cell_primary{
padding-left:5px;
}
.news-wrap {
  height: 1800px;
  overflow: hidden;
}
.pubdate{
font-size:5px;

}
</style>
<script>
    import Scroller from 'vux/dist/components/scroller'
    import Cell from 'vux/dist/components/cell'
    import Group from 'vux/dist/components/group'
    import { getList } from '../utils/api'
    import Divider from 'vux/dist/components/divider'


    export default{
        data(){
            return{
                ishow:false,
                Objlist:[],
                pageIndex:1,
                catalog:0,
            }
        },
        components:{
            Scroller,
            Cell,
            Group
        },
        ready () {
          this.getList()
        },
        methods:{
            async getList() {
				       let data =await getList(this.pageIndex, this.catalog)
				       console.log(data)
				       var news_list=data.result.items;
				       if(news_list.length>0){
				          this.ishow=true
				          for(var i=0;i<news_list.length;i++){
				              var time = news_list[i].pubDate;
                      var bngDate = new Date(time.replace("-", "/").replace("-", "/"));
                      var endDate = new Date();
                      var minutes = (endDate.getTime()-bngDate.getTime())/60/1000;

                      if(minutes>=60){
                         minutes=minutes/60;
                       }else{
                         var minute=parseInt(minutes);
                         news_list[i].pubDate=minute+ "分钟以前"
                       }
                      var datetime=parseInt(minutes);

                      if(datetime>=48){
                         news_list[i].pubDate="2天前"
                      }else if(datetime>=24){
                         news_list[i].pubDate="昨天"
                      }else{
                         news_list[i].pubDate=datetime+ "小时以前"
                      }
                      this.Objlist.push(news_list[i]);
				          }

				       }
				       this.locked = false
				       this.loading = false
			},
			load (uuid) {
         setTimeout(() => {
         this.getList();
         this.$broadcast('pulldown:reset', uuid)
        }, 1000)
      },
    }
  }
</script>

其他改动，集成了vuex,不知道怎么整合vuex的，可以看下源码，   源码下载点这里

关于和开源中国api的转发服务（Spring-Boot搭建），一直没发链接，转发服务点这里