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

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;

}

微信小程序实战--集阅读与电影于一体的小程序项目（一）的更多相关文章

微信小程序实战–集阅读与电影于一体的小程序项目（八）
31.电影详情页面 movie-template.wxml <view class="movie-container" catchtap="onMovieTap&q ...
[转]微信小程序之购物车 —— 微信小程序实战商城系列（5）
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类 —— 微信小程序实战商城 ...
[转]微信小程序之购物数量加减 —— 微信小程序实战商城系列（3）
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70194144 我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: ...
微信小程序全面实战，架构设计 &amp&semi;&amp&semi; 躲坑攻略(小程序入门捷径教程)
最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: Paste_Image.png 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开 ...
微信小程序编写新闻阅读列表
微信小程序编写新闻阅读列表不忘初心,方得始终:初心易得,始终难守. 本篇学习主要内容 Swiper 组件(轮播图) App.json 里的关于导航栏.标题的配置. Page 页面与应用程序的生命周期 ...
[转]微信小程序之加载更多（分页加载）实例 —— 微信小程序实战系列（2）
本文转自;http://blog.csdn.net/michael_ouyang/article/details/56846185 loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后 ...
【微信小程序】转载：微信小程序实战篇-下拉刷新与加载更多
下拉刷新实现下拉刷新目前能想到的有两种方式 1. 调用系统的API,系统有提供下拉刷新的API接口当然,你可以直接在全局变量app.json的window里面配置上面这个属性,这样整个项目都允许下 ...
微信小程序实战篇：商品属性联动选择（案例）
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示: 商品属性联动.gif 代码示例 1.commodity.xml <!-- &lt ...
微信小程序实战购物车功能
代码地址如下:http://www.demodashi.com/demo/12400.html 一.准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com/ ...

随机推荐

read properties
读取配置文件在项目中使用频率很大,但是实际项目中各种人,各种用法,五花八门,往往是一种方式的各种变体,然很多种方式是其中一种方式的复杂化.今天我来总结下读取配置文件的集中方式及一些不能靠copy代码能 ...
软件工程导论-目录-K-T+RJ大
目录 10 第1章软件工程学概述/1 19 1.1 软件危机/1 19 1.1.1 软件危机的介绍/1 19 1.1.2 产生软件危机的原因/3 21 1.1.3 消除软件危机的途径/4 22 1. ...
logstash 1&period;5&period;3 配置使用redis做续传
logstash是ELK中的一员大将, redis插件也是<The Logstash Book>中介绍的一个很好用的玩意儿. 之前,用比较小的集群部署的时候,没有介入redis中间件,所以 ...
构建工具之 - Gradle一般使用常见问答
Gradle借助Groovy语言作为其配置脚本,使得Gradle变的十分强大,几乎是无所不能,我们在掌控这个强大且功能繁多的工具时也比较困难和凌乱,因此本文记录一些使用过程常见的配置,以备不时之需! ...
C++ primer的第一章的主要内容
第一章主要是把C++的主要的部分简单的介绍了一下,让读者对C++开始有一个简单的了解.看完第一章的收获就是知道如何去读入不确定数目的输入,主要是形式是:whlie(cin>>s){},利用 ...
LinqToSql和ASP&period;NET Entity FrameWork 中使用事务
ASP.NET Entity FrameWork中: int flag = -1; if (this.URPmanagementEntities1.Connection.State != System ...
Android Studio 中SDK Manager的设置
android studio 代码块左边的缩进对齐线的颜色修改: Settings -> Editor -> Colors & Fonts -> General -> ...
WordCount结对项目
合作者:201631062124,201631062423 代码地址:https://gitee.com/yryx/WordCount 作业地址:https://edu.cnblogs.com/cam ...
关于linux中的秘钥认证，最清晰解读
所谓"公钥登录",原理很简单,就是用户将自己的公钥储存在远程主机上.登录的时候,远程主机会向用户发送一段随机字符串,用户用自己的私钥加密后,再发回来.远程主机用事先储存的公钥进行解 ...
同一主机设置多个密钥与不同github账号关联，或同一主机同一密钥分别关联github和gitlab
前言 github一把公钥只能用于一个github账户,如果想在同一主机上给两个属于不同账户的仓库提交时,必须在本地创建两对公/私钥匙,分别把两把公钥给两个帐号. 或者有时候,你公司内部使用的gitl ...