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

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{  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;    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{  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{  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{   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;   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;  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{   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;   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;  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{  100%;  height:500rpx;}