Micro-Faith Small program in practice--set reading and film in one of the Small program Project (i)

1. Homepage Welcome screen

Project directory Structure

Create a new project Readermovie, and then create a new file with the following structure

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

Set the color of the navigation bar

{  "navigationBarBackgroundColor": "#b3d4db"}

App.json

Configure directory and background colors

{  "pages": [    "pages/welcome/welcome"  ],  "window": {    "navigationBarBackgroundColor": "#405f80"  }}

App.wxss

Set the Global font format

text{    font-family:MicroSoft yahei;}

Effect Preview

2. Carousel Diagram Playback

Swiper Documentation

New Catalog 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. News list

Navigation bar background color and text

Configuration document

Post.json

{  "navigationBarBackgroundColor": "#405f80",  "navigationBarTitleText":"新闻资讯"}

Effect

News list

Post.wxml

<view> <swiper indicator-dots= ' true ' autoplay= ' true ' interval= ' $ ' > <swiper-item> <image S Rc= '/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 ' > Lotus pond Moonlight </text> <image cl ass= ' post-image ' src= '/images/post/crab.png ' ></image> <text class= ' post-content ' > These days the heart is quite quiet. Tonight in the courtyard sitting in the shade, suddenly think of the Lotus pond, in the light of the full moon, there is always another look. </text> <view class= ' post-like ' > <image class= ' post-like-image ' src= '. /.. /images/icon/chat.png ' ></image> &Lt;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> &L T;/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;}

Effect

4. Data binding

The real data must not be written in the Wxml file as above, but the data is loaded from the server, and the following simulates loading data from the server.

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 Circular News List

List rendered document

Let's say there are two news, and the wx:for list loops through the news information.

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= ' $ ' > <swiper-item> <image S Rc= '/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.aut HOR_IMG}} "></image> <text class= ' post-date ' >{{item.date}}</text> </view> <t Ext 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. Small program event mechanism

Event Document

Routing documents

To jump from first page to News list page

Welcome.wxml Binding an Event

<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. Modularization of Small programs

List rendering

Modular

Separating data from the business into separate data files

Create the Data folder, and then create the Postsdata.js

Post.wxml

Modify the Place: Wx:for= "{{postlist}}" and some variables

<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

The

separates the article. Externally exposed interface via Module.exports.

var local_database = [{date: "2018/8/16", Title: "Moonlight in the Lotus Pond", imgsrc: '/images/post/crab.png ', content: ' The heart is quite quiet these days. Tonight in the courtyard sitting in the shade, suddenly think of the Lotus pond, in the light of the full moon, there is always another look. ', reading: "", Collection: ' ", Avatar: '/images/avatar/1.png '},{Date:" 2018/7/15 ", Title:" Figure ", Imgsrc: '/ima Ges/post/bl.png ', content: ' I have not met with my father for more than two years, I can not forget the most is his figure. That winter, grandmother died, the father of the Ajvazyan to wear a fee to kill a pro's errand also handed off, it is the day of the rains, reading: "" ", Collection: '", Avatar: '/images/avatar/2.png '},{Date: " 2018/6/2 ", title:" Jinan Winter ", imgsrc: '/images/post/vr.png ', content: ' For a person living in peiping, like me, if the winter is not windy, it is a miracle; Jinan's winter is no wind. ', reading: ' Collection: ' ", Avatar: '/images/avatar/3.png '},{Date:" 2018/5/1 ", Title:" Jiangnan Rain ", Imgsrc: '/ima Ges/post/cat.png ', content: ' Jiangnan spring rain so lingering, but sensational, so drunk, the shadow of the green rain lane, drizzle wind, run to make people tempted so ', reading: "", Collection: ' ", Avatar: '/image S/avatar/3.png '},{Date: "2018/4/6", title: "Yi Jiangnan", imgsrc: '/images/post/xiaolong.jpg ', content: ' Last night and Hao talk about a lot of childhood memories, unconsciously before There is a sea of rape, amber hot, a look at the head, even the air with sweet. ', reading: ' Collection: ' 50 ', Avatar: '/images/avatar/4.png '},]module.exports = {postlist:local_database} 

Post.js using require (path) to introduce code into

var postsData = require('../../data/posts-data.js')Page({  data: {    postlist: postsData.postlist  },  onLoad: function(options) {    // this.setData({    //   posts_key: postsData.postlist    // });  }})

Use of 8.template templates

Template

Create the template directory Post-item directory under the posts directory, and then create Post-item-template.wxml and POST-ITEM-TEMPLATE.WXSS separately

Post-item-template.wxml Creating a template

<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 using templates

<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 Creating a template

. 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:400px; 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 using templates

@import "post-item/post-item-template.wxss"swiper{  width:100%;  height:500rpx;}