夜光帶你走進 微信小程序開發（二十四）擅長的領域

夜光序言：

 

世人笑我癡紅塵，不過紅塵戀伊人。

 

 

 

 
 
正文：
 
                                              以道御術 / 以術識道

我們發現效果還可以

顯示了object對象

 

 

<!--pages/news/news-detail/news-detail.wxml-->
<view class="news-detail-container">

   <!-- <view>{{authorName}}</view> -->

   <image class="head-img" src="../../images/115.jpg" mode="widthFix"></image>
   <view class="author-time">
      <image class="author-avatar" src="../../images/114.jpg" mode="widthFix"></image>
      <text class="author-name">{{authorName}}</text>
      <text class="const-text">發表於</text>
      <text class="time">{{authorTime}}</text>
      <!-- <image catchtap="playermusic" class="music" src=""></image> -->
   </view>

   <text class="title">I am the bone of my sword. 身爲劍體</text>
   <view class="tool">
      <view class="circle-img">
          <image src="../../images/a.jpg" mode="widthFix"></image>
          <!-- <image></image> -->
          <image class="share-img" src="../../images/b.jpg" mode="widthFix"></image>
      </view>
      <view class="horizon"></view>
   </view>
   <text class="detail">I am the bone of my sword. 身爲劍體 Steel is my body, and fire is my blood. 鋼鐵之血灼璃之心 I have created over a thousand blades. 手創千劍歷經百戰 Unknown to death,Nor known to life. 無一敗績無一知己 Have withstood pain to create many weapons. 常獨自一人自醉與劍丘之巔 Yet, those 乏譏催客詘九挫循旦末hands will never hold anything. 因此此生亦無任何意義 So as I pray, unlimited blade works. 則其身定爲無限劍制</text>

</view>

 

 

 

// pages/news/news-detail/news-detail.js
var newsData = require("../../data/newsdata.js")


Page({

  /**
   * 頁面的初始數據
   */
  data: {
      // detailData:[] 這個初始化，我們也先不要
  },

  /**
   * 生命週期函數--監聽頁面加載
   * 夜光：這個生命週期函數用的情況比較多
   */
  onLoad: function (options) {
    //  console.log(options.newsid)
    console.log();
    this.setData(
      // 這個不行嗯~ 
      // detailData:newsData.initData[options.newsid]
      newsData.initData[options.newsid]
    )
  },
  

})

 

 

 

/* 文章的樣式 */
.articlelist{
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  background-color: #fff;
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
  padding: 10px;
  padding-bottom: 5px;

}

.author-time{
  margin-top: 10rpx;
  margin-bottom: 20rpx;
}

.author-icon{
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  /* 上下垂直居中 */
  vertical-align: middle;
}

.author-name{
   margin-left: 20rpx;
}

.author-time{
   margin-left: 20rpx;
   vertical-align: middle;
   margin-bottom: 5px;
   font-size: 26rpx;
}

.title{
  font-size: 38rpx;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}

.article-img{
   margin-left: 16px;
   width: 100%;
   height: 340rpx;
   margin: auto 0;
   margin-bottom: 10px;
}

.article-text{
   color: #666;
   font-size: 26rpx;
   margin-bottom: 20rpx;
   letter-spacing: 2rpx;
   line-height: 40rpx;

}

.article-like{
   font-size: 13px;
   flex-direction: row;
   line-height: 16px;
}

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

.article-like-text{
   vertical-align: middle;
   margin-right: 20px;
}