微信小程序实战--集阅读与电影于一体的小程序项目（一）
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.轮播图播放
新建目录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 我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: ...
- WordPress 网站开发“微信小程序“实战(三)
本文是"WordPress 开发微信小程序"系列的第三篇,本文记录的是开发"DeveWork+"小程序1.2 版本的过程.建议先看完第一篇.第二篇再来阅读本文. ...
- 微信小程序全面实战，架构设计 && 躲坑攻略(小程序入门捷径教程)
最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: 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 <!-- < ...
随机推荐
- VIM懒人配置
VIM懒人配置 VIM配置起来,是很折腾人的.所以为了方便,直接使用前人的配置.重在用不在折腾. 1 VIM安装 一行命令. # sudo apt-get install vim 2 配置 vim的个 ...
- net core体系-Standard-1概述
前言 早上起来.NET社区沸腾了,期待已久的.NET Core 2.0终于发布!根据个人经验,微软的产品一般在2.0时会趋于成熟,所以一个新的.Net开发时代已经来临!未来属于.NET Core. . ...
- linux下mysql修改字符集
# 编辑/etc/my.cnfvim /etc/my.cnf # 在[mysqld]标签下添加下面内容default-storage-engine = innodbinnodb_file_per_ta ...
- jquery的选择器——[作为学习备用]
1,转载:https://www.cnblogs.com/onlys/articles/jQuery.html jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $(&quo ...
- [sublime] 利用sublime搭建C/C++编译器
gcc/g++配置 先去下载TDM-GCC安装包,这里附下载地址(可能会有弹出界面,不用管他). 现在c盘中建立文件夹 g++,然后以管理员运行,点击Create傻瓜式安装, 这里要改一下安装路径,保 ...
- golang实现障碍、转弯最少的A*寻路
目录 目标: 要点: 源码: 目标: 优先寻找无障碍的路径 目标不可达时,寻找障碍最少的路径 路径长度相等时,优先转弯最少的路径 多个目标点时,根据以上要求到达其中一个目标点即可 要点: 最优格子的选 ...
- [jzoj]3468.【NOIP2013模拟联考7】OSU!(osu)
Link https://jzoj.net/senior/#main/show/3468 Description osu 是一款群众喜闻乐见的休闲软件. 我们可以把osu的规则简化与改编成以下的样子: ...
- JS浏览器兼容问题
一.JS与DOM的兼容性: (一) DOM节点的访问: 1.以前对DOM节点访问一般用“document.All.元素ID属性值”或者“document.元素ID属性值”这种简化的方法,在FireFo ...
- leetcode-只出现一次的数字合并两个有序数组
题目:合并两个有序数组 给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组. 说明: 初始化 nums1 和 nums2 的元素 ...
- Spring源码阅读 源码环境搭建（一）
ring 源码阅读的搭建(一) 一 下载spring源码 进入官方网页:https://spring.io/projects/spring-framework 进入相关的github位置,下载zip包 ...