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{ 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; 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{ 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{ 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{ 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; 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; 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{ 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; 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; 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{ 100%; height:500rpx;}