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

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 条评论
登录 后参与评论

相关文章

来自专栏Web行业观察

移动前端兼容操作总结

手机设备屏幕尺寸不一,做移动端的Web页面,需要考虑在安卓/IOS的各种尺寸设备上的兼容,这里总结的是针对移动端设备的页面,设计与前端实现怎样做能更好地适配不同...

1963
来自专栏无原型不设计

Balanced-工具类App原型分享

Balanced是一款记事类的工具App,这类App在设计的时候讲究简单易用,如果操作太复杂,就不能做到记录事件的及时性和快速性。在制作原型时,这次尝试了将A...

3265
来自专栏九彩拼盘的叨叨叨

Web 前端菜鸟源码阅读列表

阅读优秀源码的好处有好多,如能学习一些技术知识,编码技巧,组织代码的方式,提高理解能力等等。

851
来自专栏web编程技术分享

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第十节)1. 详情页面的布局2. 从主页面到详情页面的跳转问题

3514
来自专栏葬爱家族

Android高德之旅(6)

我们看惯了高德地图,似乎已经习惯了它的ui,认为河流就是蓝色的,土地就是灰色的,交通路网就是黄色的。其实这个ui也是可以改的。今天就来使用下自定义地图ui。

1322
来自专栏林德熙的博客

win10 uwp win2d 离屏渲染

离屏渲染(Offscreen drawing)是一个不错的科技,在系统有空的时候,提前先画出部分界面。这样在需要直接渲染的时候就可以直接拿出来而不需要等待进行渲...

982
来自专栏河湾欢儿的专栏

html5标签

什么是html5? 仅仅是狭义的概念。h5草案前身叫做web application 由WHATWG组织编写,在2007年提交到了w3c,w3c起名叫做HTM...

3111
来自专栏jojo的技术小屋

原 荐 svga 动画

作者:汪娇娇 时间:2017年12月26日 对于一些小的简单的动画,借助css、js差不多就能实现,而且还不能保证还原度百分百(还能接受); 对于那些复杂的动画...

7444
来自专栏极客编程

最全的资源教程 转

6882
来自专栏葡萄城控件技术团队

对《30个提高Web程序执行效率的好经验》的理解

阅读了IT文章《30个提高Web程序执行效率的好经验》,这30条准则对我们web开发是非常有用的,不过大家可能对其中的一些准则是知其然而不知其所以然。 下面是我...

1925

扫码关注云+社区

领取腾讯云代金券