夜光带你走进 微信小程序开发（二十四）擅长的领域

夜光序言：

 

世人笑我痴红尘，不过红尘恋伊人。

 

 

 

 
 
正文：
 
                                              以道御术 / 以术识道

我们发现效果还可以

显示了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;
}