• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
【福利】微信小程序130个精选Demo合集发布时间：2022-07-18
下一篇：
微信小程序入门——怎么建多个项目？（导入官方Demo程序进行学习） ...发布时间：2022-07-18
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap