<view class="container">
 <image class="avatar" src="/images/avatar/1.png"></image>
 <text class="motto">Hello, 七月</text>
 <view class="journey-container" bindtap="onTap">
  <text class="journey">開(kāi)啟小程序之旅</text>
 </view>
</view>

.container{
 display: flex;
 flex-direction:column;
 align-items: center;
 background-color:#b3d4db;
}

.avatar{
 width:200rpx;
 height:200rpx;
 margin-top:160rpx;
}

.motto{
 margin-top:100rpx;
 font-size:32rpx;
 font-weight: bold;
}

.journey-container{
 margin-top: 200rpx;
 border: 1px solid #405f80;
 width: 200rpx;
 height: 80rpx;
 border-radius: 5px;
 text-align:center;
}

.journey{
 font-size:22rpx;
 font-weight: bold;
 line-height:80rpx;
 color: #405f80;
}

page{
 height: 100%;
 background-color:#b3d4db;
}

Page({
 onTap: function (event) {
  // wx.navigateTo({
  //  url:"../posts/post"
  // });
  
  wx.switchTab({
   url: "../posts/post"
  });
  
 },
 onReachBottom:function(event){
  console.log('asfasdfa')
 }
})

{
 "navigationBarBackgroundColor": "#b3d4db"
}

<template name="postItem">
 <view class="post-container">
  <view class="post-author-date">
   <image class="post-author" src="{{avatar}}"></image>
    <text class="post-date">{{date}}</text>
  </view>
   <text class="post-title">{{title}}</text>
   <image class="post-image" src="{{imgSrc}}"></image>
   <text class="post-content">{{content}}
   </text>
   <view class="post-like">
     <image class="post-like-image" 
     src="/images/icon/chat.png"></image>
     <text class="post-like-font">{{collection}}</text>

     <image class="post-like-image" 
     src="/images/icon/view.png"></image>
     <text class="post-like-font">{{reading}}</text>
   </view>
  </view>
</template>

.post-container{
 flex-direction:column;
 display:flex;
 margin-top:20rpx;
 margin-bottom:40rpx;
 margin-left: 0rpx;
 background-color:#fff;
 border-bottom: 1px solid #ededed;
 border-top: 1px solid #ededed;
 padding-bottom: 5px;
}

.post-author-date{
 margin-top:10rpx;
 margin-bottom: 20rpx;
 margin-left: 10px;
}

.post-author{
 width:60rpx;
 height:60rpx;
 vertical-align: middle;
}

.post-date{
 margin-left: 20px;
 vertical-align: middle;
}

.post-image{
 width:100%;
 height:340rpx;
 margin:auto 0;
 margin-bottom: 15px;
}

.post-date{
 font-size:26rpx;
 margin-bottom: 10px;
}
.post-title{
 font-size:34rpx;
 font-weight: 600;
 color:#333;
 margin-bottom: 10px;
 margin-left: 10px;
}
.post-content{
 color:#666;
 font-size:28rpx;
 margin-bottom:20rpx;
 margin-left: 20rpx;
 letter-spacing:2rpx;
 line-height: 40rpx;
}
.post-like{
 font-size:13px;
 line-height: 16px;
 margin-left: 10px;
}

.post-like-image{
 height:16px;
 width:16px;
 margin-right: 8px;
 vertical-align:middle;
}

.post-like-font{
 vertical-align:middle;
 margin-right: 20px;
}

<import src="post-item/post-item-template.wxml" />
<!--<import src="/pages/posts/post-item/post-item-template.wxml" />-->
<view>
 <swiper catchtap="onSwiperTap" vertical="{{false}}" indicator-dots="true" autoplay="true" interval="5000">
  <swiper-item>
   <image id="7" src="/images/wx.png" data-postId="3"></image>
  </swiper-item>
  <swiper-item>
   <image src="/images/vr.png" data-postId="4"></image>
  </swiper-item>
  <swiper-item>
   <image src="/images/iqiyi.png" data-postId="5"></image>
  </swiper-item>
 </swiper>
 <block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx">
  <!--//template-->
  <view catchtap="onPostTap" data-postId="{{item.postId}}">
    <template is="postItem" data="{{...item}}"/>
  </view>
</block>
</view>

@import "post-item/post-item-template.wxss";

 swiper{
  width:100%;
  height:600rpx;
 }
 /*less sass*/
 swiper image{
  width:100%;
  height:600rpx;
 }

var postsData = require('../../data/posts-data.js')

Page({
 data: {
 //小程序總是會(huì)讀取data對(duì)象來(lái)做數(shù)據(jù)綁定，這個(gè)動(dòng)作我們稱為動(dòng)作A
 // 而這個(gè)動(dòng)作A的執(zhí)行，是在onLoad函數(shù)執(zhí)行之后發(fā)生的
 },
 onLoad: function () {

 // this.data.postList = postsData.postList
 this.setData({
  postList:postsData.postList
  });
 },

 onReachBottom:function(event){
 console.log('asdfasdfasdf')
 },

 onPostTap: function (event) {
 var postId = event.currentTarget.dataset.postid;
 // console.log("on post id is" + postId);
 wx.navigateTo({
  url: "post-detail/post-detail?id=" + postId
 })
 },

 onSwiperTap: function (event) {
 // target 和currentTarget
 // target指的是當(dāng)前點(diǎn)擊的組件 和currentTarget 指的是事件捕獲的組件
 // target這里指的是image，而currentTarget指的是swiper
 var postId = event.target.dataset.postid;
 wx.navigateTo({
  url: "post-detail/post-detail?id=" + postId
 })
 }
})

{
 "navigationBarTitleText":"文與字"
}

<!--先靜后動(dòng)，先樣式再數(shù)據(jù)-->
<view class="container">
 <image class="head-image" src="{{isPlayingMusic?postData.music.coverImg:postData.headImgSrc}}"></image>
 <image catchtap="onMusicTap" class="audio" src="{{isPlayingMusic? '/images/music/music-stop.png': '/images/music/music-start.png'}}"></image>
 <view class="author-date">
 <image class="avatar" src="{{postData.avatar}}"></image>
 <text class="author">{{postData.author}}</text>
 <text class="const-text">發(fā)表于</text>
 <text class="date">{{postData.dateTime}}</text>
 </view>
 <text class="title">{{postData.title}}</text>
 <view class="tool">
 <view class="circle-img">
  <image wx:if="{{collected}}" catchtap="onColletionTap" src="/images/icon/collection.png"></image>
  <image wx:else catchtap="onColletionTap" src="/images/icon/collection-anti.png"></image>
  <image catchtap="onShareTap" class="share-img" src="/images/icon/share.png"></image>
 </view>
 <view class="horizon"></view>
 </view>
 <text class="detail">{{postData.detail}}</text>
</view>

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

.head-image {
 width: 100%;
 height: 460rpx;
}

.hide{
 opacity: 0;
}

.audio {
 width: 102rpx;
 height: 110rpx;
 position: absolute;
 left: 50%;
 margin-left: -51rpx;
 top: 180rpx;
 opacity: 0.6;
}

.author-date {
 flex-direction: row;
 margin-left: 30rpx;
 margin-top: 20rpx;
}

.avatar {
 height: 64rpx;
 width: 64rpx;
 vertical-align: middle;
}

.author {
 font-size: 30rpx;
 font-weight: 300;
 margin-left: 20rpx;
 vertical-align: middle;
 color: #666;
}

.const-text {
 font-size: 24rpx;
 color: #999;
 margin-left: 20rpx;
}

.date {
 font-size: 24rpx;
 margin-left: 30rpx;
 vertical-align: middle;
 color: #999;
}

.title {
 margin-left: 40rpx;
 font-size: 36rpx;
 font-weight: 700;
 margin-top: 30rpx;
 letter-spacing: 2px;
 color: #4b556c;
}

.tool {
 margin-top: 20rpx;
}

.circle-img {
 float: right;
 margin-right: 40rpx;
 vertical-align: middle;
}

.circle-img Image {
 width: 90rpx;
 height: 90rpx;
}

.share-img {
 margin-left: 30rpx;
}

.horizon {
 width: 660rpx;
 height: 1px;
 background-color: #e5e5e5;
 vertical-align: middle;
 position: relative;
 top: 46rpx;
 margin: 0 auto;
 z-index: -99;
}

.detail {
 color: #666;
 margin-left: 30rpx;
 margin-top: 20rpx;
 margin-right: 30rpx;
 line-height: 44rpx;
 letter-spacing: 2px;
}

var postsData = require('../../../data/posts-data.js')
var app = getApp();
Page({
 data: {
  isPlayingMusic: false
 },
 onLoad: function (option) {
  var postId = option.id;
  this.data.currentPostId = postId;
  var postData = postsData.postList[postId];
  this.setData({
   postData: postData
  })

  var postsCollected = wx.getStorageSync('posts_collected')
  if (postsCollected) {
   var postCollected = postsCollected[postId]
   if (postCollected){
    this.setData({
    collected: postCollected
    })
   }
  }
  else {
   var postsCollected = {};
   postsCollected[postId] = false;
   wx.setStorageSync('posts_collected', postsCollected);
  }

  if (app.globalData.g_isPlayingMusic && app.globalData.g_currentMusicPostId
   === postId) {
   this.setData({
    isPlayingMusic: true
   })
  }
  this.setMusicMonitor();
 },

 setMusicMonitor: function () {
  //點(diǎn)擊播放圖標(biāo)和總控開(kāi)關(guān)都會(huì)觸發(fā)這個(gè)函數(shù)
  var that = this;
  wx.onBackgroundAudioPlay(function (event) {
   var pages = getCurrentPages();
   var currentPage = pages[pages.length - 1];
   if (currentPage.data.currentPostId === that.data.currentPostId) {
    // 打開(kāi)多個(gè)post-detail頁(yè)面后，每個(gè)頁(yè)面不會(huì)關(guān)閉，只會(huì)隱藏。通過(guò)頁(yè)面棧拿到到
    // 當(dāng)前頁(yè)面的postid，只處理當(dāng)前頁(yè)面的音樂(lè)播放。
    if (app.globalData.g_currentMusicPostId == that.data.currentPostId) {
     // 播放當(dāng)前頁(yè)面音樂(lè)才改變圖標(biāo)
     that.setData({
      isPlayingMusic: true
     })
    }
    // if(app.globalData.g_currentMusicPostId == that.data.currentPostId )
    // app.globalData.g_currentMusicPostId = that.data.currentPostId;
   }
   app.globalData.g_isPlayingMusic = true;

  });
  wx.onBackgroundAudioPause(function () {
   var pages = getCurrentPages();
   var currentPage = pages[pages.length - 1];
   if (currentPage.data.currentPostId === that.data.currentPostId) {
    if (app.globalData.g_currentMusicPostId == that.data.currentPostId) {
     that.setData({
      isPlayingMusic: false
     })
    }
   }
   app.globalData.g_isPlayingMusic = false;
   // app.globalData.g_currentMusicPostId = null;
  });
  wx.onBackgroundAudioStop(function () {
   that.setData({
    isPlayingMusic: false
   })
   app.globalData.g_isPlayingMusic = false;
   // app.globalData.g_currentMusicPostId = null;
  });
 },

 onColletionTap: function (event) {
  // this.getPostsCollectedSyc();
  this.getPostsCollectedAsy();
 },

 getPostsCollectedAsy: function () {
  var that = this;
  wx.getStorage({
   key: "posts_collected",
   success: function (res) {
    var postsCollected = res.data;
    var postCollected = postsCollected[that.data.currentPostId];
    // 收藏變成未收藏，未收藏變成收藏
    postCollected = !postCollected;
    postsCollected[that.data.currentPostId] = postCollected;
    that.showToast(postsCollected, postCollected);
   }
  })
 },

 getPostsCollectedSyc: function () {
  var postsCollected = wx.getStorageSync('posts_collected');
  var postCollected = postsCollected[this.data.currentPostId];
  // 收藏變成未收藏，未收藏變成收藏
  postCollected = !postCollected;
  postsCollected[this.data.currentPostId] = postCollected;
  this.showToast(postsCollected, postCollected);
 },

 showModal: function (postsCollected, postCollected) {
  var that = this;
  wx.showModal({
   title: "收藏",
   content: postCollected ? "收藏該文章？" : "取消收藏該文章？",
   showCancel: "true",
   cancelText: "取消",
   cancelColor: "#333",
   confirmText: "確認(rèn)",
   confirmColor: "#405f80",
   success: function (res) {
    if (res.confirm) {
     wx.setStorageSync('posts_collected', postsCollected);
     // 更新數(shù)據(jù)綁定變量，從而實(shí)現(xiàn)切換圖片
     that.setData({
      collected: postCollected
     })
    }
   }
  })
 },

 showToast: function (postsCollected, postCollected) {
  // 更新文章是否的緩存值
  wx.setStorageSync('posts_collected', postsCollected);
  // 更新數(shù)據(jù)綁定變量，從而實(shí)現(xiàn)切換圖片
  this.setData({
   collected: postCollected
  })
  wx.showToast({
   title: postCollected ? "收藏成功" : "取消成功",
   duration: 1000,
   icon: "success"
  })
 },

 onShareTap: function (event) {
  var itemList = [
   "分享給微信好友",
   "分享到朋友圈",
   "分享到QQ",
   "分享到微博"
  ];
  wx.showActionSheet({
   itemList: itemList,
   itemColor: "#405f80",
   success: function (res) {
    // res.cancel 用戶是不是點(diǎn)擊了取消按鈕
    // res.tapIndex 數(shù)組元素的序號(hào)，從0開(kāi)始
    wx.showModal({
     title: "用戶 " + itemList[res.tapIndex],
     content: "用戶是否取消？" + res.cancel + "現(xiàn)在無(wú)法實(shí)現(xiàn)分享功能，什么時(shí)候能支持呢"
    })
   }
  })
 },

 onMusicTap: function (event) {
  var currentPostId = this.data.currentPostId;
  var postData = postsData.postList[currentPostId];
  var isPlayingMusic = this.data.isPlayingMusic;
  if (isPlayingMusic) {
   wx.pauseBackgroundAudio();
   this.setData({
    isPlayingMusic: false
   })
   // app.globalData.g_currentMusicPostId = null;
   app.globalData.g_isPlayingMusic = false;
  }
  else {
   wx.playBackgroundAudio({
    dataUrl: postData.music.url,
    title: postData.music.title,
    coverImgUrl: postData.music.coverImg,
   })
   this.setData({
    isPlayingMusic: true
   })
   app.globalData.g_currentMusicPostId = this.data.currentPostId;
   app.globalData.g_isPlayingMusic = true;
  }
 },

 /*
 * 定義頁(yè)面分享函數(shù)
 */
 onShareAppMessage: function (event) {
  return {
   title: '離思五首·其四',
   desc: '曾經(jīng)滄海難為水，除卻巫山不是云',
   path: '/pages/posts/post-detail/post-detail?id=0'
  }
 }

})

{
  "navigationBarTitleText":"閱讀"
}

var local_database = [
  {
    date: "Sep 18 2016",
    title: "正是蝦肥蟹壯時(shí)",
    imgSrc: "/images/post/crab.png",
    avatar: "/images/avatar/1.png",
    content: "菊黃蟹正肥，品嘗秋之味。徐志摩把,“看初花的荻蘆”和“到樓外樓吃蟹”,并列為秋天來(lái)杭州不能錯(cuò)過(guò)的風(fēng)雅之事；用林妹妹的話講是“螯封嫩玉雙雙滿，",
    reading: "112",
    collection: "96",
    headImgSrc: "/images/post/crab.png",
    author: "林白衣",
    dateTime: "24小時(shí)前",
    detail: "菊黃蟹正肥，品嘗秋之味。徐志摩把“看初花的荻蘆”和“到樓外樓吃蟹”并列為秋天來(lái)杭州不能錯(cuò)過(guò)的風(fēng)雅之事；用林妹妹的話講是“螯封嫩玉雙雙滿，殼凸紅脂塊塊香”；在《世說(shuō)新語(yǔ)》里，晉畢卓更是感嘆“右手持酒杯，左手持蟹螯，拍浮酒船中，便足了一生矣。”漫漫人生長(zhǎng)路，美食與愛(ài)豈可辜負(fù)？于是作為一個(gè)吃貨，突然也很想回味一下屬于我的味蕾記憶。記憶中的秋蟹，是家人的味道，彌漫著濃濃的親情。\n\n是誰(shuí)來(lái)自山川湖海，卻囿于晝夜，廚房與愛(ài)？ 是母親，深思熟慮，聰明耐心。吃蟹前，總會(huì)拿出幾件工具，煞有介事而樂(lè)此不疲。告訴我們螃蟹至寒，需要佐以姜茶以祛寒，在配備的米醋小碟里，亦添入姜絲與紫蘇，前者驅(qū)寒后者增香。泡好菊花茶，歲月靜好，我們靜等。",
    postId: 0,
    music: {
     url: "http://music.163.com/song/media/outer/url?id=142604.mp3",
      title: "夜夜夜夜-齊秦",
      coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000"
    }
  },
  {
    title: "比利·林恩的中場(chǎng)故事",
    content: "一 “李安是一位絕不會(huì)重復(fù)自己的導(dǎo)演，本片將極富原創(chuàng)性李安眾所矚目的新片《比利林恩漫長(zhǎng)的中場(chǎng)休息》，正式更名《半場(chǎng)無(wú)戰(zhàn)事》。",
    imgSrc: "/images/post/bl.png",
    reading: 62,
    detail: "一 “李安是一位絕不會(huì)重復(fù)自己的導(dǎo)演，本片將極富原創(chuàng)性”李安眾所矚目的新片《比利林恩漫長(zhǎng)的中場(chǎng)休息》，正式更名《半場(chǎng)無(wú)戰(zhàn)事》。預(yù)告片首次曝光后，被視作是明年奧斯卡種子選手。該片根據(jù)同名暢銷書(shū)改編。原著小說(shuō)榮獲美國(guó)國(guó)家圖書(shū)獎(jiǎng)。也被BBC評(píng)為21世紀(jì)最偉大的12本英文小說(shuō)之一。影片講述一位19歲德州男孩的比利·林恩入伍參加伊戰(zhàn)，在一次交火中他大難不死，意外與戰(zhàn)友成為大眾的關(guān)注焦點(diǎn)，并被塑造成英雄。之后他們返回國(guó)內(nèi)，在橄欖球賽中場(chǎng)休息時(shí)授勛。這名戰(zhàn)爭(zhēng)英雄卻面臨前所未有的心靈煎熬……李安為什么選中這部電影來(lái)拍？因?yàn)槔畎蚕胍魬?zhàn)前所未有的技術(shù)難題：以120幀每秒的速度、4K、3D技術(shù)全面結(jié)合，來(lái)掀起一場(chǎng)電影視覺(jué)革命。什么意思？所謂“電影是24格每秒的謊言”，其中的24格，就是幀數(shù)。",
    collection: 92,
    dateTime: "24小時(shí)前",
    headImgSrc: "/images/post/bl.png",
    author: "迷的城",
    date: "Nov 20 2016",
    avatar: "/images/avatar/1.png",
    postId: 1,
    music: {
     url: "http://music.163.com/song/media/outer/url?id=108220.mp3",
      title: "鬼迷心竅-李宗盛",
      coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000002xOmp62kqSic.jpg?max_age=2592000"
    }
  },
  {
    //按住alt + shift + F 可以格式化代碼樣式
    title: "當(dāng)我們?cè)谡務(wù)摻?jīng)濟(jì)學(xué)時(shí)，我們?cè)谡務(wù)撌裁?#63;",
    content: "引言在我跟學(xué)生課后交流時(shí)，以及我在知乎上閱讀有關(guān)“經(jīng)濟(jì)”問(wèn)題的論題時(shí)，經(jīng)常會(huì)遇到這樣的情況：...",
    detail: "1 引言\n\n在我跟學(xué)生課后交流時(shí)，以及我在知乎上閱讀有關(guān)“經(jīng)濟(jì)”問(wèn)題的論題時(shí)，經(jīng)常會(huì)遇到這樣的情況：有些人套用“經(jīng)濟(jì)理論“的知識(shí)去解釋現(xiàn)實(shí)中發(fā)生的經(jīng)濟(jì)事件，結(jié)果發(fā)現(xiàn)很多事情講不通，或者發(fā)現(xiàn)”理論告訴我們的“與現(xiàn)實(shí)發(fā)生的是相反的。也有學(xué)生經(jīng)常跟我說(shuō)：經(jīng)濟(jì)學(xué)有什么用？為了說(shuō)明這個(gè)，我經(jīng)常從兩個(gè)方面來(lái)進(jìn)行解釋，嘗試用我個(gè)人所擅長(zhǎng)的解決問(wèn)題的視角和他們能夠聽(tīng)懂的方法來(lái)說(shuō)明經(jīng)濟(jì)學(xué)是什么，它的作用邊界在哪里：\r\n\n2 ”簡(jiǎn)筆素描“與”油畫(huà)肖像“我們給人畫(huà)肖像畫(huà)，可以用簡(jiǎn)筆素描，也可以用油畫(huà)肖像。油畫(huà)肖像可以在最大程度上保存了人物的各方面的細(xì)節(jié)和特點(diǎn)，而簡(jiǎn)筆素描則忽略了很多細(xì)節(jié)。盡管簡(jiǎn)筆素描忽略了人物的許多細(xì)節(jié)，但我們?nèi)耘f能夠很容易的認(rèn)出畫(huà)中的人物是誰(shuí)。為什么？因?yàn)檫@種方法保留了人物最顯著的特征，以至于我們可以忽略其次要特征而對(duì)人物做出判定。\n\n2.1 ”簡(jiǎn)筆素描“對(duì)于絕大多數(shù)的非經(jīng)濟(jì)學(xué)專業(yè)大眾而言（經(jīng)濟(jì)學(xué)相關(guān)專業(yè)碩士學(xué)歷以上），人們所接觸到的經(jīng)濟(jì)學(xué)都是初級(jí)微觀經(jīng)濟(jì)學(xué)。所謂的初級(jí)微觀經(jīng)濟(jì)學(xué)，對(duì)于經(jīng)濟(jì)問(wèn)題的”畫(huà)法“就是一種”簡(jiǎn)筆素描“。比如初級(jí)微觀經(jīng)濟(jì)學(xué)教材中廣為使用的這種一元一次需求函數(shù)：y=bx+a，需求量的唯一變量是產(chǎn)品價(jià)格。但僅憑直覺(jué)我們就可以斷言，現(xiàn)實(shí)中影響需求量的因素絕不止價(jià)格這一種，因此我們可以認(rèn)為這個(gè)模型對(duì)經(jīng)濟(jì)問(wèn)題的描述是失真的。然而但這種失真卻是必要的和有意義的，其意義在與它利于揭示價(jià)格對(duì)于需求的影響，而不在于否定影響需求的其他因素——",
    imgSrc: "/images/post/sls.jpg",
    headImgSrc: "/images/post/sls.jpg",
    reading: 62,
    collection: 92,
    author: "知乎",
    date: "Nov 12 2016",
    dateTime: "三天前",
    avatar: "/images/avatar/3.png",
    postId: 2,
    music: {
     url: "http://music.163.com/song/media/outer/url?id=27538254.mp3",
      title: "女兒情-萬(wàn)曉利",
      coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000004Wv5BO30pPc0.jpg?max_age=2592000"
    }
  },
  {
    title: "微信·小程序開(kāi)發(fā)工具安裝指南",
    content: "這兩天閑來(lái)無(wú)事，也安裝了 “微信折疊”的開(kāi)發(fā)工具來(lái)玩一下。以下是一些小道消息及使用體驗(yàn)，過(guò)兩天我會(huì)寫(xiě)一篇文章以開(kāi)發(fā)者的角度來(lái)詳細(xì)評(píng)價(jià)微信小程序",
    imgSrc: "/images/post/xiaolong.jpg",
    reading: 102,
    detail: "這兩天閑來(lái)無(wú)事，也安裝了 “微信折疊”的開(kāi)發(fā)工具來(lái)玩一下。以下是一些小道消息及使用體驗(yàn)，過(guò)兩天我會(huì)寫(xiě)一篇文章以開(kāi)發(fā)者的角度來(lái)詳細(xì)評(píng)價(jià)微信小程序:微信小程序不能開(kāi)發(fā)游戲類、直播類功能，小程序每個(gè)人關(guān)注的上限是20個(gè)（還不確定，不過(guò)我相信這是真的，這次公布的API里并沒(méi)有視頻組件。微信太大，蘋(píng)果要有所顧忌，但是微信也要做出相應(yīng)的讓步)微信目前有沒(méi)有同蘋(píng)果商談好，還是個(gè)未知數(shù)，畢竟會(huì)對(duì)AppStore有一定的沖擊。拋棄了大量的javascript組件后，這個(gè)生態(tài)體系變得相當(dāng)?shù)姆忾]，微信解釋肯定是：為了更好的性能提升。那么我們拭目以待。小程序的入口是微信里的三級(jí)菜單，就是在“Tab欄發(fā)現(xiàn)里的游戲下面加入一個(gè)“小程序”。反正，這一欄里的購(gòu)物和游戲我是從來(lái)沒(méi)點(diǎn)進(jìn)去過(guò)的。以騰訊的尿性，小程序同服務(wù)號(hào)一樣，其關(guān)系鏈及重要功能的開(kāi)放程度會(huì)因“人”而異。對(duì)，優(yōu)質(zhì)的接口只會(huì)開(kāi)放給騰訊的兒子們（滴滴呀、京東呀）",
    collection: 92,
    dateTime: "24小時(shí)前",
    headImgSrc: "/images/post/xiaolong.jpg",
    author: "貓是貓的貓",
    date: "Nov 20 2016",
    avatar: "/images/avatar/5.png",
    postId: 3,
    music: {
     url: "http://music.163.com/song/media/outer/url?id=108119.mp3",
      title: "戀戀風(fēng)塵-老狼",
      coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000001VaXQX1Z1Imq.jpg?max_age=2592000",
    }
  },
  {
    title: "從視覺(jué)到觸覺(jué) 這款VR手套能給你真實(shí)觸感",
    content: "8月29日消息，據(jù)國(guó)外媒體VentureBeat報(bào)道，一家名為Dexta Robotics的公司最近發(fā)布了一款有望變革虛擬現(xiàn)實(shí)手部追蹤與交互方式的新產(chǎn)品",
    imgSrc: "/images/post/vr.png",
    reading: 102,
    detail: "消息，據(jù)國(guó)外媒體VentureBeat報(bào)道，一家名為Dexta Robotics的公司最近發(fā)布了一款有望變革虛擬現(xiàn)實(shí)手部追蹤與交互方式的新產(chǎn)品。該產(chǎn)品名為“Dexmo”，它是一款像手套那樣戴在手上使用的未來(lái)主義外骨骼。它內(nèi)置大量的元件，能夠與VR體驗(yàn)進(jìn)行交互，可幫助你感覺(jué)握在你的雙手的虛擬物體。Dexmo據(jù)Dexta稱，“Dexmo是一款針對(duì)你的雙手的機(jī)械外骨骼。它能夠捕捉你的手部運(yùn)動(dòng)，以及提供即時(shí)的力反饋。有了Dexmo，你可以感受到虛擬物體的大小、形狀和堅(jiān)硬度。你可以接觸數(shù)字世界。”市面上已經(jīng)有數(shù)款產(chǎn)品旨在處理虛擬現(xiàn)實(shí)中的手部交互，也有相關(guān)的產(chǎn)品即將要進(jìn)入市場(chǎng)。例如，頗受歡迎的HTC Vive頭盔配有一副控制器，其控制器能夠使得追蹤系統(tǒng)看到你的雙手，讓你可以用它們來(lái)在特定體驗(yàn)中與物體進(jìn)行交互。今年晚些時(shí)候，Oculus將開(kāi)始出貨類似的手部控制產(chǎn)品Oculus Touch。10月，索尼也將開(kāi)始出貨配備兩個(gè)PlayStation Move手部控制器的PS VR。Leap Motion甚至更進(jìn)一步：利用傳感器來(lái)追蹤手指和手部的運(yùn)動(dòng)。",
    collection: 26,
    dateTime: "24小時(shí)前",
    headImgSrc: "/images/post/vr.png",
    author: "深白色",
    date: "Nov 20 2016",
    avatar: "../../../images/avatar/3.png",
    postId: 4,
    music: {
     url: "http://music.163.com/song/media/outer/url?id=188204.mp3",
      title: "沉默是金-張國(guó)榮",
      coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000003at0mJ2YrR2H.jpg?max_age=2592000"
    }
  },
  {
    title: "愛(ài)奇藝創(chuàng)維開(kāi)展戰(zhàn)略合作，合力布局開(kāi)放娛樂(lè)生態(tài)",
    content: "愛(ài)奇藝和創(chuàng)維分別作為國(guó)內(nèi)領(lǐng)先的在線視頻品牌",
    imgSrc: "/images/iqiyi.png",
    reading: 96,
    detail: "愛(ài)奇藝和創(chuàng)維分別作為國(guó)內(nèi)領(lǐng)先的在線視頻品牌和家電品牌。雙方一直銳意創(chuàng)新，為用戶提供優(yōu)質(zhì)的服務(wù)體驗(yàn)和產(chǎn)品體驗(yàn)。據(jù)悉，愛(ài)奇藝與創(chuàng)維將展開(kāi)從資本到VIP會(huì)員服務(wù)等各方面的深入合作。籍由此次合作，愛(ài)奇藝將戰(zhàn)略投資創(chuàng)維旗下?lián)碛懈叨嘶ヂ?lián)網(wǎng)電視品牌的酷開(kāi)公司。從下一財(cái)年開(kāi)始，創(chuàng)維旗下互聯(lián)網(wǎng)電視將通過(guò)銀河互聯(lián)網(wǎng)電視集成播控平臺(tái)，預(yù)置VIP會(huì)員服務(wù)及相關(guān)內(nèi)容。這種捆綁終端與VIP內(nèi)容的全新銷售模式，將大幅提升互聯(lián)網(wǎng)電視終端用戶的體驗(yàn)，給予用戶更多優(yōu)質(zhì)內(nèi)容的選擇。",
    collection: 26,
    dateTime: "21小時(shí)前",
    headImgSrc: "/images/iqiyi.png",
    author: "深白色",
    date: "Nov 20 2016",
    avatar: "../../../images/avatar/5.png",
    postId: 5,
    music: {
     url: "http://music.163.com/song/media/outer/url?id=152428.mp3",
      title: "朋友-譚詠麟",
      coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000004eGsCN3SUheO.jpg?max_age=2592000"
    }
  },
]

module.exports = {
  postList: local_database
}

{
 "pages": [
  "pages/welcome/welcome",
  "pages/posts/post",
  "pages/posts/post-detail/post-detail"
 ],
 "window": {
  "navigationBarBackgroundColor": "#405f80"
 },
 "tabBar": {
  "borderStyle": "white",
  "position": "bottom",
  "list": [
   {
    "pagePath": "pages/posts/post",
    "text": "閱讀",
    "iconPath": "images/tab/yuedu.png",
    "selectedIconPath": "images/tab/yuedu_hl.png"
   },
   {
    "pagePath": "pages/posts/post",
    "text": "電影",
    "iconPath": "images/tab/yuedu.png",
    "selectedIconPath": "images/tab/yuedu_hl.png"
   }
  ]
 }
}

text{
  font-family: MicroSoft Yahei;
  font-size: 24rpx;
  color: #666;
}

input{
  font-family: MicroSoft YaHei;
}