微信小程序實戰--集閱讀與電影於一體的小程序項目（一）

1.首頁歡迎界面

項目目錄結構

新建項目ReaderMovie，然后新建文件，結構如下

welcome.wxml

<view class='container'>
    <image class='user-avatar' src="/images/avatar/4.png"></image>
    <text class='user-name'><text style='color:blue'>Hello</text>,八月</text>
    <view class='moto-container'>
        <text class='moto'>開啟小程序之旅</text>
    </view>
</view>

welcome.wxss

.container{ 
    display:flex;              /*彈性模型*/
    flex-direction:column;     /*垂直方向 列 排布*/
    align-items:center;        /*居中*/
}  

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

.user-name{
    margin-top:150rpx;
    font-size:32rpx;
    font-weight:bold;
}
.moto-container{
    margin-top:200rpx;  
    border:1px solid #405f80;
    width:200rpx;
    height:80rpx;
    border-radius:5rpx;
    text-align:center;
}
.moto{
    font-size:22rpx;
    font-weight:bold;
    line-height:80rpx;
    color:#405f80;
}
page{
    height:100%;
    background:#b3d4db;
}

welcome.js

Page(
  {}
)

welcome.json

設置導航條的顏色

{
  "navigationBarBackgroundColor": "#b3d4db"
}

app.json

配置目錄和背景顏色

{
  "pages": [
    "pages/welcome/welcome"
  ],
  "window": {
    "navigationBarBackgroundColor": "#405f80"
  }
}

app.wxss

設置全局的字體格式

text{
    font-family:MicroSoft yahei;
}

效果預覽

2.輪播圖播放

swiper文檔

新建目錄posts

post.wxml

<view>
  <swiper indicator-dots='true' autoplay='true' interval='2000'>
    <swiper-item>
      <image src='/images/post/bl.png'></image>
    </swiper-item>
    <swiper-item><image src='/images/post/xiaolong.jpg' ></image></swiper-item>
    <swiper-item><image src='/images/post/vr.png' ></image></swiper-item>
  </swiper>
</view>

post.wxss

swiper{
  width:100%;
  height:500rpx;
}

3.新聞列表

導航欄背景色和文字

配置文檔

post.json

{
  "navigationBarBackgroundColor": "#405f80",
  "navigationBarTitleText":"新聞資訊"
}

效果

新聞列表

post.wxml

<view>
  <swiper indicator-dots='true' autoplay='true' interval='2000'>
    <swiper-item>
      <image src='/images/post/bl.png'></image>
    </swiper-item>
    <swiper-item><image src='/images/post/xiaolong.jpg' ></image></swiper-item>
    <swiper-item><image src='/images/post/vr.png' ></image></swiper-item>
  </swiper>

  <view class='post-container'>
    <view class='post-author-date'>
      <image class='post-author' src="/images/avatar/1.png"></image>
      <text class='post-date'>2018/8/16</text>
    </view>

    <text class='post-title'>荷塘月色</text>
    <image class='post-image' src='/images/post/crab.png'></image>
    <text class='post-content'>這幾天心里頗不寧靜。今晚在院子里坐着乘涼，忽然想起日日走過的荷塘，在這滿月的光里，總該另有一番樣子吧。</text>
    <view class='post-like'>
      <image class='post-like-image' src='../../images/icon/chat.png'></image>
      <text class='post-like-font'>100</text>
      <image class='post-like-image' src='../../images/icon/view.png'></image>
      <text class='post-like-font'>65</text>   
    </view>
  
  </view>

</view>

post.wxss

swiper{
  width:100%;
  height:500rpx;
}

.post-container{
  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-bottom: 5px;
}

.post-author-date{
  margin:10rpx 0 20rpx 10rpx

}

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

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

.post-title{
  font-size: 34rpx;
  font-weight: 600;
  color:#333;
  margin-bottom: 10px;
  margin-left: 10px;

}

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

.post-content{
  color:#666;
  font-size: 28rpx;
  margin-bottom:20rpx;
  margin-left: 20rpx;
  letter-spacing: 2rpx;
  line-height: 40rpx;
}

.post-like{
  font-size: 13px;
  flex-direction: row;
  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;
}

效果

4.數據綁定

真正的數據肯定不可能像上面那樣寫在wxml文件里面，而是從服務器加載的數據，下面模擬從服務器加載數據。

post.wxml

  <view class='post-container'>
    <view class='post-author-date'>
      <image class='post-author' src="{{author_img}}"></image>
      <text class='post-date'>{{date}}</text>
    </view>

    <text class='post-title'>{{title}}</text>
    <image class='post-image' src='{{post_img}}'></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'>{{collect_num}}</text>
      <image class='post-like-image' src='../../images/icon/view.png'></image>
      <text class='post-like-font'>{{view_num}}</text>   
    </view>
  
  </view>

post.js

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var post_content1={
      date:"2018/8/16",
      title:"荷塘月色",
      post_img: '/images/post/crab.png',
      content:'這幾天心里頗不寧靜。今晚在院子里坐着乘涼，忽然想起日日走過的荷塘，在這滿月的光里，總該另有一番樣子吧。',
      view_num:"100",
      collect_num:'50',
      author_img:'/images/avatar/1.png'
    }
    this.setData(post_content1);
  },
})

5.wx-for循環新聞列表

列表渲染文檔

假設有兩篇新聞，通過wx:for列表循環展示新聞信息。

post.js

Page({

  /**
   * 頁面的初始數據
   */
  data: {

  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var posts_content = [
      {
        date: "2018/8/16",
        title: "荷塘月色",
        post_img: '/images/post/crab.png',
        content: '這幾天心里頗不寧靜。今晚在院子里坐着乘涼，忽然想起日日走過的荷塘，在這滿月的光里，總該另有一番樣子吧。',
        view_num: "100",
        collect_num: '50',
        author_img: '/images/avatar/1.png'
      },
      {
        date: "2018/7/15",
        title: "背影",
        post_img: '/images/post/bl.png',
        content: '我與父親不相見已二年余了，我最不能忘記的是他的背影 。那年冬天，祖母死了，父憨穿封費莩渡鳳殺脯輯親的差使也交卸了，正是禍不單行的日子',
        view_num: "120",
        collect_num: '150',
        author_img: '/images/avatar/2.png'
      }
    ]
    this.setData({
      posts_key: posts_content
    });
  },

})

post.wxml

<view>
  <swiper indicator-dots='true' autoplay='true' interval='2000'>
    <swiper-item>
      <image src='/images/post/bl.png'></image>
    </swiper-item>
    <swiper-item><image src='/images/post/xiaolong.jpg' ></image></swiper-item>
    <swiper-item><image src='/images/post/vr.png' ></image></swiper-item>
  </swiper>

  <block wx:for="{{posts_key}}" wx:for-item="item">
    <view class='post-container'>
      <view class='post-author-date'>
        <image class='post-author' src="{{item.author_img}}"></image>
        <text class='post-date'>{{item.date}}</text>
      </view>

      <text class='post-title'>{{item.title}}</text>
      <image class='post-image' src='{{item.post_img}}'></image>
      <text class='post-content'>{{item.content}}</text>
      <view class='post-like'>
        <image class='post-like-image' src='../../images/icon/chat.png'></image>
        <text class='post-like-font'>{{item.collect_num}}</text>
        <image class='post-like-image' src='../../images/icon/view.png'></image>
        <text class='post-like-font'>{{item.view_num}}</text>   
      </view> 
    </view>
  </block>
</view>

6.小程序事件機制

事件文檔

路由文檔

實現從首頁跳轉到新聞列表頁

welcome.wxml綁定一個事件

<view class='container'>
    <image class='user-avatar' src="/images/avatar/4.png"></image>
    <text class='user-name'><text style='color:blue'>Hello</text>,八月</text>
    <view class='moto-container' bindtap='onTap'>
        <text class='moto'>開啟小程序之旅</text>
    </view>
</view>

welcome.js

Page({
  onTap:function(){
    wx.redirectTo({
      url: '../posts/post',
    })
  }
}
)

7.小程序的模塊化

列表渲染

模塊化

將業務中的數據分離到單獨的數據文件

創建data文件夾，再創建postsdata.js

post.wxml

修改地方：wx:for="{{postlist}}"，還有一些變量

<block wx:for="{{postlist}}" wx:for-item="item">
    <view class='post-container'>
      <view class='post-author-date'>
        <image class='post-author' src="{{item.avatar}}"></image>
        <text class='post-date'>{{item.date}}</text>
      </view>

      <text class='post-title'>{{item.title}}</text>
      <image class='post-image' src='{{item.imgSrc}}'></image>
      <text class='post-content'>{{item.content}}</text>
      <view class='post-like'>
        <image class='post-like-image' src='../../images/icon/chat.png'></image>
        <text class='post-like-font'>{{item.collection}}</text>
        <image class='post-like-image' src='../../images/icon/view.png'></image>
        <text class='post-like-font'>{{item.reading}}</text>
      </view>
    </view>
  </block>

postsdata.js

把文章分離出來。通過 module.exports 對外暴露接口。

var local_database = [{
  date: "2018/8/16",
  title: "荷塘月色",
  imgSrc: '/images/post/crab.png',
  content: '這幾天心里頗不寧靜。今晚在院子里坐着乘涼，忽然想起日日走過的荷塘，在這滿月的光里，總該另有一番樣子吧。',
  reading: "100",
  collection: '50',
  avatar: '/images/avatar/1.png'
},
{
  date: "2018/7/15",
  title: "背影",
  imgSrc: '/images/post/bl.png',
  content: '我與父親不相見已二年余了，我最不能忘記的是他的背影 。那年冬天，祖母死了，父憨穿封費莩渡鳳殺脯輯親的差使也交卸了，正是禍不單行的日子',
  reading: "120",
  collection: '150',
  avatar: '/images/avatar/2.png'
},
{
  date: "2018/6/2",
  title: "濟南的冬天",
  imgSrc: '/images/post/vr.png',
  content: '對於一個在北平住慣的人，像我，冬天要是不刮風，便覺得是奇跡；濟南的冬天是沒有風聲的。',
  reading: "80",
  collection: '50',
  avatar: '/images/avatar/3.png'
},

{
  date: "2018/5/1",
  title: "江南之雨",
  imgSrc: '/images/post/cat.png',
  content: '江南之春雨如此纏綿，然煽情，如此醉，影青青之煙雨巷，雨絲風，潤之使人動心如此',
  reading: "80",
  collection: '50',
  avatar: '/images/avatar/3.png'
},

{
  date: "2018/4/6",
  title: "憶江南",
  imgSrc: '/images/post/xiaolong.jpg',
  content: '昨晚和阿浩談起諸多童年記憶，不知不覺眼前浮現一片油菜花海，黃燦燦，一眼望不到頭，連空氣都帶着甜香。',
  reading: "80",
  collection: '50',
  avatar: '/images/avatar/4.png'
},
]

module.exports = {
  postlist:local_database
}

post.js使用 require(path) 將代碼引入

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

Page({
  data: {
    postlist: postsData.postlist
  },

  onLoad: function(options) {
    // this.setData({
    //   posts_key: postsData.postlist
    // });
  }
})

8.template模板的使用

模板

在posts目錄下創建模板目錄post-item目錄，然后分別創建post-item-template.wxml和post-item-template.wxss

post-item-template.wxml創建模板

<template name="postItem">
  <view class='post-container'>
      <view class='post-author-date'>
        <image class='post-author' src="{{avatar}}"></image>
        <text class='post-date'>{{item.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.wxml使用模板

<import src='post-item/post-item-template.wxml' />

<view>
  <swiper indicator-dots='true' autoplay='true' interval='2000'>
    <swiper-item>
      <image src='/images/post/bl.png'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/post/xiaolong.jpg'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/post/vr.png'></image>
    </swiper-item>
  </swiper>

  <block wx:for="{{postlist}}" wx:for-item="item">
    <template is="postItem" data="{{...item}}" />
  </block>
</view>

post-item-template.wxss創建模板

.post-container{
  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-bottom: 5px;
}

.post-author-date{
  margin:10rpx 0 20rpx 10rpx

}

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

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

.post-title{
  font-size: 34rpx;
  font-weight: 600;
  color:#333;
  margin-bottom: 10px;
  margin-left: 10px;

}

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

.post-content{
  color:#666;
  font-size: 28rpx;
  margin-bottom:20rpx;
  margin-left: 20rpx;
  letter-spacing: 2rpx;
  line-height: 40rpx;
}

.post-like{
  font-size: 13px;
  flex-direction: row;
  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;
}

post.wxss使用模板

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

swiper{
  width:100%;
  height:500rpx;
}