微信小程序入门与实战

页面间的数据传递和跳转

添加点击事件

自定义属性：
必须以data-开头
多个单词由连接符 “ - ” 连接
单词最好不要有大写字母
多个单词会被转为驼峰命名
例如：post-id转换为postId

属性	解析
data-post-id	自定义组件属性
module.exports	模块导出给其它模块用

<!--pages/featured/featured.wxml-->
<import src="item/item.wxml" />
<view>
  <block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx">
    <view catchtap="onTapToDetail" data-post-id="{{item.postId}}" >
      <template is="item" data="{{...item}}" />
    </view>
  </block>
</view>

页面跳转处理及传递参数

属性	解析
currentTarget	事件绑定的当前组件
dataset	包含当前组件中所有属性名以data-开头的自定义属性值

import {DBPost} from '../../db/DBPost.js';
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      var dbPost=new DBPost();
      this.setData({
        postList:dbPost.getAllPostData()
      })
  },
  onTapToDetail(event){
    var postId=event.currentTarget.dataset.postId;
    console.log(postId);
    wx.navigateTo({
      url: '../post-detail/post-detail?id='+postId,
    })
  },
})

页面获取参数

属性	解析
options	通过url的key获取对应的value
setNavigationBarTitle	设置导航栏标题

// pages/post-detail/post-detail.js
import {
  DBPost
} from '../../db/DBPost.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var postId = options.id;
    this.dbPost = new DBPost(postId);
    this.postData= this.dbPost.getPostItemById().data;
    this.setData({
      post:this.postData
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
      wx.setNavigationBarTitle({
        title: this.postData.title,
      })
  },

})

构建文章详情页的wxml

<!--pages/post-detail/post-detail.wxml-->
<view class="container">
  <image class="head_image" src="{{post.postImg}}"></image>
  <text class="title">{{post.title}}</text>
  <view class="author-date">
    <view class="avatar_box">
      <image class="avatar" src="{{post.avatar}}"></image>
      <text class="author">{{post.author}}</text>
    </view>
    <text class="date">{{post.dateTime}}</text>
  </view>
  <text class="detail">{{post.detail}}</text>
  <view class="tool">
    <view class="tool-item">
      <image src="/images/icon/wx_app_like.png" ></image>
      <text class="count">{{post.readingNum}}</text>
    </view>
    <view class="tool-item comment">
      <image src="/images/icon/wx_app_message.png" ></image>
      <text class="count">{{post.commentNum}}</text>
    </view>
    <view class="tool-item">
      <image src="/images/icon/wx_app_collect.png" ></image>
      <text class="count">{{post.collectionNum}}</text>
    </view>
  </view>
</view>

构建文章详情页的wxss

属性	解析
space-between	组件位于边缘中间留有空白
vertical-align	设置元素的垂直对齐方式
transform: scale	组件缩放

/* pages/post-detail/post-detail.wxss */
.container{
  display: flex;
  flex-direction: column;
}
.head_image{
  width: 750rpx;
  height: 460rpx;
}
.title{
  font-size: 20px;
  margin: 30rpx;
  letter-spacing: 2px;
  color: #4B556C;
}
.author-date{
  display: flex;
  flex-direction: row;
  margin-top: 15rpx;
  margin-left: 30rpx;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.avatar_box{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.avatar{
  width: 50rpx;
  height: 50rpx;
}
.author{
  font-weight: 300;
  margin-left: 20rpx;
  color: #666;
}
.date{
  color: #919191;
  margin-right: 38rpx;
  font-size: 25rpx;
}
.detail{
  color: #666;
  margin: 40rpx 22rpx 0;
  line-height: 44rpx;
  letter-spacing: 1px;
  font-size: 14px;
}
.tool{
  height: 64;
  text-align: center;
  line-height: 64rpx;
  margin: 20rpx 28rpx 20rpx 0;
}
.tool-item{
  display: inline-block;
  vertical-align: top;
  margin-right: 30rpx;
}
.tool-item image{
  width: 30rpx;
  height: 30rpx;
  vertical-align: -3px;
  margin-right: 10rpx;
}
.comment image{
  transform: scale(.85);
}