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

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;
}

原文地址：https://www.cnblogs.com/derek1184405959/p/9490810.html

时间： 2024-07-31 19:04:54

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

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

24.更多电影 app.json "pages": [ "pages/posts/post", "pages/welcome/welcome", "pages/posts/post-detail/post-detail", "pages/movies/movies", "pages/movies/more-movie/more-movie" ], more-list-template.w

本项目是一个集阅读和电影资讯为一体的微信小程序主要分为启动页,阅读部分和电影部分3大块.以下是这次项目的总结: GitHub地址:https://github.com/wkx1214108696/FirstApplets.git 启动页页面布局:自适应的rpx和flex进行布局(之后所有的页面都是用flex布局) 使用`wx.switchTab(Object object)`跳转至阅读和电影资讯页面,设置了tab选项卡的部分必须使用`wx.switchTab(Object object)` 阅

微信小程序实战教程

微信小程序实战教程(第1篇) 课程观看地址:http://www.xuetuwuyou.com/course/154 课程出自学途无忧网:http://www.xuetuwuyou.com 课时1:1.开篇课时2:2.文档概览课时3:3.认识小程序课时4:4.小程序设计指南课时5:5.响应的数据绑定课时6:6.微信小程序游戏的演示课时7:7.基础组件课时8:8.view 课时9:9.文件结构课时10:10.配置课时11:11.逻辑层课时12:12.注册小程序

微信小程序之购物数量加减 —— 微信小程序实战商城系列（3）

我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: 在宝贝详情页里: 在购物车里: 现在就为大家介绍这个小组件,在小程序中,该如何去写下图为本项目的图: wxml:  <view class="stepper">  <text class="{{minusStatus}}" bindtap="bindMinus">-</text&

微信小程序实战之天气预报

原文:微信小程序实战之天气预报这个案例是仿UC中天气界面做的中间也有点出入,预留了显示当前城市名字和刷新图标的位置,自己可以写下,也可以添加搜索城市.值得注意的是100%这个设置好像已经不好使了,可以通过获取设备的高度通过数据绑定设置高度.地址:https://github.com/shuncaigao/Weather 界面主要分为四部分: 第一部分这里是预留的一块可以自行添加补充下 <view class="newTopView"> <!--左边添加当前城市名字

微信小程序实战之百思不得姐精简版

原文:微信小程序实战之百思不得姐精简版微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块.这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎star. 地址: https://github.com/shuncaigao/BS 项目中我能学到什么? tabbar使用方式网络调用真实接口 loading使用 scroll-view实现下拉刷新上拉加载 image组件对图片的处理, 音乐和视频组件的使用跳

微信小程序商店 | 即速商店_团购类小程序

即速应用商店-分类最齐全的小程序商店,收录当前最新最热门小程序,汇集各行业小程序案例及评测,在这里可以轻松找到各种实用好玩的小程序,也可免费发布自己的小程序获取巨大流量 . PS:关于微信小程序商店_即速商店? 如何免费发布微信小程序,获取流量? 微信小程序商店|即速商店_团购小程序要求:该类目下提交的微信小程序须具备购物.团购相关属性.如小程序内发布虚假违法信息,由小程序主体承担.点击 > 即刻提交 < 本期团购小程序推荐: ? 网易一起拼lite 测评:网易一起拼小程序只做优质

微信小程序再添能力：搜一搜增加小程序入口

随着移动互联网的快速发展,流量正悄然的变成大数据,借助"入口+流量"模式,互联网激活了大量的个性化入口,积累了巨量流量,并形成高企的资本市场估值.小程序作为当前最新的应用模式,在微信不断开放入口之后,或将迎来流量的爆发期. 今天,笔者发现,微信又为小程序开放了一个超级入口:微信搜一搜增添小程序入口.用户在微信发现中,通过搜一搜输入关键词,比如水果,搜索页面便会出现相关小程序推荐,点击更多,可直接进入小程序"水果"的搜索页面,相关小程序都会出现在页面中. 点击微信搜

微信小程序赚钱方法大全|都是谁适合利用小程序进行商业盈利？

微信小程序上线已经一年多的时间,小程序的入口也在不断的增加,功能也不断你的进行着迭代,很多创业者都看到了其中的创业商机,希望能抓住小程序这样的一波红利.但是如何能抓住小程序这波红利呢,如何切入微信小程序呢,现在小编和大家进行总结一下,进行全面分析,希望能给到大家想要的答案. 小程序商店也就是"小程序聚合平台".前期收录所有小程序,进行免费展示.待知名度.访问量和转化量做起来后,转为收费模式(摊位费.推广费),如速成应用. 本地服务针对提供本地服务的商家或有众有品牌连锁加盟门店,利