微信小程序实战--集阅读与电影于一体的小程序项目（一）

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;
}