AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:02:03

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:精品!微信小程序电影推荐demo实战开发小结(附源码及思维导图) ... ... ... ... ... ...
相关的资讯,希望对您有帮助。

精品!微信小程序电影推荐demo实战开发小结(附源码及思维导图) ... ... ... ... ... ...

第一步 项目配置 一、编写app.json 对整个项目的公共配置 1、pages:配置页面路径(必须),列出所有的页面的路径,所有存在的页面都需要在此写出,否则在页面跳转的时候会报出找不到页面的错误2、window:窗口配置 ...

本文已获作者sesine授权转载,授权地址:http://www.jianshu.com/p/447b36463f09

V2.0版本

2016-12-28 更新到v2.0

UI

更新日志

  • 2016-11-20

    • 1.添加下拉刷新功能
    • 2.列表改为模板渲染
    • 3.封装了api请求的代码提高可复用性
  • 2016-11-21

    • 1.添加人物的详情页
    • 2.将电影详情和人物详情的网络请求进行了封装
  • 2016-11-22

    • 1.添加了消息通知组件
    • 2.搜索页调整
    • 3.调整了目录结构,整合静态资源(dist)和组件文件(component)
  • 2016-11-25

    • 1.将网络请求从wx.request改为fetch的方式
    • 2.完成搜索功能
    • 3.完成消息通知组件
    • 4.删除了没有用到的util文件夹
  • 2016-12-03

    • 1.将电影列表的下拉刷新从scroll-view的bindscrolltolower改为Page的onReachBottom事件触发
    • 2.将“我的”页面的文件补全,功能列表改为数据渲染,添加跳转。新增换肤
    • 3.删除了tabBar中的搜索选项,添加“我的”选项
    • 4.首页搜索栏(点击跳转到搜索页)添加轮播图
    • 5.添加定位功能,在小程序载入时进行定位
    • 6.添加浏览记录、收藏、相册、设置、摇一摇功能(都在开发中)
  • 2016-12-04

    • 1.将api列表 banner列表、搜索关键词列表、皮肤列表整合配置文件(config.js)
    • 2.完成换肤、设置、个人资料(还差修改)、摇一摇功能(再次进入不能摇的问题还需解决)
    • 3.添加util文件及文件夹,用于封装获取并格式化时间等工具类方法
    • 4.消息组件修改,删除了成功、失败等情况,避免与wx.showToast重合,添加了网络不正常的提示
    • 5.电影详情页面添加存储浏览历史的功能
  • 2016-12-06

    • 1.完成电影收藏和人物收藏功能
    • 2.搜索页面添加为空时的提示页面并封装成组件
  • 2016-12-14

    • 1.完成相册功能和关于页面
    • 2.添加定位功能(gps)
  • 2016-12-24

    • 1.相册的背景图片方式改成image标签的方式
    • 2.添加摇一摇debug测试开关变量

github地址:https://github.com/yesifeng/wechat-weapp-movie
提示:v2.0代码会跟文档有一些出入,但大部分都是相同的

第一步 项目配置


一、编写app.json

对整个项目的公共配置

1、pages:配置页面路径(必须),列出所有的页面的路径,所有存在的页面都需要在此写出,否则在页面跳转的时候会报出找不到页面的错误
2、window:窗口配置,配置导航及窗口的背景色和文字颜色,还有导航文字和是否允许窗口进行下拉刷新
3、tabBar:tab栏配置,配置tab栏背景色及出现位置,上边框的颜色(目前只支持黑或白),文字颜色及文字选中颜色,最核心的配置是list即tab栏的列表,官方规定最少2个,最多5个,每个列表项目可配置页面路径、文字、图标及选中时图标的地址
4、network:网络配置,配置网络请求、上传下载文件、socket连接的超时时间
5、debug:调试模式,建议开发时开启(true),可以看到页面注册、页面跳转及数据初始化的信息,另外报错的错误信息也会比较详细

{
  pages: [
    pages/popular/popular,
    pages/coming/coming,
    pages/top/top,
    pages/search/search,
    pages/filmDetail/filmDetail,
    pages/personDetail/personDetail,
    pages/searchResult/searchResult
  ],
  window: {
    navigationBarBackgroundColor: #47a86c,
    navigationBarTextStyle: white,
    navigationBarTitleText:  电影推荐,
    backgroundColor: #fff,
    backgroundTextStyle: dark
  },
  tabBar: {
    color: #686868,
    selectedColor: #47a86c,
    backgroundColor: #ffffff,
    borderStyle: white,
    list: [{
      pagePath: pages/popular/popular,
      iconPath: dist/images/popular_icon.png,
      selectedIconPath: dist/images/popular_active_icon.png,
      text: 热映
    }, {
      pagePath: pages/coming/coming,
      iconPath: dist/images/coming_icon.png,
      selectedIconPath: dist/images/coming_active_icon.png,
      text: 待映
    },{
      pagePath: pages/search/search,
      iconPath: dist/images/search_icon.png,
      selectedIconPath: dist/images/search_active_icon.png,
      text: 搜索
    },
    {
      pagePath: pages/top/top,
      iconPath: dist/images/top_icon.png,
      selectedIconPath: dist/images/top_active_icon.png,
      text: 口碑
    }]
  },
  networkTimeout: {
    request: 10000,
    downloadFile: 10000
  },
  debug: true
}

二、确定目录结构

根据UI图,提取组件和公共样式/脚本,以及page的目录

  • comm - 公用的脚本及样式
    • script - 公共脚本
      • config.js 配置信息 (单页数据量,城市等)
      • fetch.js 接口调用 (电影列表及详情,人物详情、搜索)
    • style - 公共样式
      • animation.wxss 动画
  • component - 公用的组件
    • filmList - 电影列表
      • filmList.wxml - 组件结构
      • filmList.wxss - 组件样式
  • dist - 静态资源
    • images 本地图片,主要存导航的图标 (样式中不可引用本地图像资源)
  • pages - 页面
    • popular - 页面文件夹 (popular为自定义的页面名称,页面相关文件的文件名需与页面名相同)
      • popular.js 页面逻辑
      • popular.wxml 页面结构
      • popular.wxss 页面样式
      • popular.json 页面窗口配置 (可参考app.json中的window配置)
  • app.js - 小程序整体逻辑 (初始化、显示、隐藏的事件,以及存放全局数据)
  • app.json - 小程序公共配置
  • app.wxss - 小程序公共样式

第二步 编写组件

电影列表

结构

样式

import ../../comm/style/animation.wxss;
.film {
    box-sizing: border-box;
    width: 750rpx;
    padding: 10rpx;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    box-shadow: 0 0 40rpx #f4f4f4 inset;
}
.film-item {
    width: 350rpx;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
    border: 1px solid #e4e4e4;
    box-shadow: 0 20rpx 40rpx #eee;
    overflow: hidden;
    animation: fadeIn 1s;
}
.film-cover, .film-cover-img {
    width: 350rpx;
    height: 508rpx;
}
.film-cover {
    position: relative;
    border-radius: 10rpx;
    overflow: hidden;
}
.film-rating {
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50rpx;
    padding-right: 20rpx;
    font-size: 12px;
    text-align: right;
    line-height: 50rpx;
    background-color: rgba(0, 0, 0, .65);
    color: #fff;
}
.file-intro {
    padding: 16rpx;
    margin-top: -8rpx;
}
.film-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.film-tag {
    width: 100%;
    margin-top: 10rpx;
    display: flex;
    justify-content: flex-start;
}
.film-tag-item {
    padding: 4rpx 6rpx;
    margin-right: 10rpx;
    font-size: 24rpx;
    box-shadow: 0 0 0 1px #ccc;
    border-top: 1px solid #fff;
    border-radius: 10rpx;
    background-color: #fafafa;
    color: #666;
}
.loading-tip {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    color: #ccc;
}

使用方法

以popular(热映)页面为例

在popular.wxml中插入以下代码引入组件结构:

<import src=../../component/filmList/filmList.wxml/>