码迷，mamicode.com
首页 > 微信 > 详细

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

时间：2018-08-17 00:38:22      阅读：245      评论：0      收藏：0      [点我收藏+]

标签：flex   正是   100%   load   忘记   pat   .post   tps   png   

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

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

标签：flex   正是   100%   load   忘记   pat   .post   tps   png   

原文地址：https://www.cnblogs.com/derek1184405959/p/9490810.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！