如何用微信小程序模仿豆瓣首页

程序思路:

  • 用微信自带组件swiper来实现轮播图
  • 用豆瓣提供的api(这里使用的电影api)来获取最近的电影数据【豆瓣api地址】

获取数据用微信的request方法,只需要提供豆瓣api的url链接,就能够get到数据

  • 用setData()方法来将数据存进对应的page里面,在视图层(html)用wx:for来进行列表渲染
  • 在渲染过程中加一个加载提示框(微信的showToast,API),等到数据请求并渲染完成后,结束提示框

1.app.js   获取用户登录状态并获取用户信息

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync(‘logs‘) || []
    logs.unshift(Date.now())
    wx.setStorageSync(‘logs‘, logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

2.app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "color": "#fff",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "豆瓣",
    "navigationBarTextStyle":"#fff"
  },
  "tabBar": {
    "color": "#888",
    "selectedColor": "#09bb07",
    "backgroundColor": "#000",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "观看电影",
      "iconPath": "icon/1.png",
      "selectedIconPath": "icon/1.png"
    },{
      "pagePath": "pages/index/index",
      "text": "当前热映",
      "iconPath": "icon/2.png",
      "selectedIconPath": "icon/2.png"
    }]
  }
}

3.app.wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

4.until.js

function formatTime(date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()

  return [year, month, day].map(formatNumber).join(‘/‘) + ‘ ‘ + [hour, minute, second].map(formatNumber).join(‘:‘)
}
//获取对象类型
function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : ‘0‘ + n
}

module.exports = {
  formatTime: formatTime
}

5.index.wxml

<!--index.wxml-->
<view class="content">
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image" width="355" height="150" />
      </swiper-item>
    </block>
  </swiper>
  <block wx:for="{{movie}}" wx:key="*this">
    <view class="movie">
      <view class="pic">
        <image src="{{item.images.medium}}" mode="aspectFill"></image>
      </view>
      <view class="movie-info">
        <view class="base-info">
          <text>电影名字:{{item.title}}\n 导演:{{item.directors[0].name}}\n 演员:
            <text wx:for="{{item.casts}}">{{item.name}} </text>
          </text>
        </view>
      </view>
    </view>
  </block>
</view>

6.index.wxss

/**index.wxss**/
page {
  height: 100%;
}
.content {
  background-color: #3a3a3a;
  min-height: 100%;
}
swiper-item image {
  width: 100%;
}
.movie {
  padding-top: 5px;
  padding-bottom: 5px;
  display: flex;
  border-bottom: 1px solid #888;
}
.pic image {
  width: 100px;
  height: 150px;
  vertical-align: top;
}
.movie-info {
  padding-left: 20px;
}
.base-info {
  color: #fff;
  font-size: 12px;
  padding-top: 20px;
  line-height: 20px;
}

7.index.js

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    imgUrls: [],
    indicatorDots: false,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    movie: null
  },
  //事件处理函数
  bindViewTap: function () {
  },
  onLoad: function () {
    this.loadMovie();
  },
  loadMovie() {
    wx.showToast({
      title: ‘正在加载‘,
      icon: ‘loading‘,
      duration: 10000
    });
    let thispage = this;
    wx.request({
      url: ‘http://api.douban.com/v2/movie/in_theaters‘,
      method: ‘GET‘,
      header: { ‘content-type‘: ‘json‘ },
      success: function (res) {
        let subject = res.data.subjects;
        thispage.setData({ movie: subject });
        thispage.setData({
          imgUrls: [
            res.data.subjects[0].images.large,
            res.data.subjects[1].images.large,
            res.data.subjects[2].images.large
          ]
        });
        wx.hideToast();
      }
    });
  }
})

8.logs.wxml

<!--logs.wxml-->
<view class="container log-list">
  <block wx:for="{{logs}}" wx:for-item="log" wx:key="*this">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

9.logs.wxss

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}

10.logs.json

{
    "navigationBarTitleText": "查看启动日志"
}

11.logs.js

//logs.js
var util = require(‘../../utils/util.js‘)
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync(‘logs‘) || []).map(function (log) {
        return util.formatTime(new Date(log))
      })
    })
  }
})

时间: 2024-11-02 20:05:53

如何用微信小程序模仿豆瓣首页的相关文章

微信小程序访问豆瓣电影api400错误解决方法

最近在跟着demo学习微信小程序,却卡在了第一步请求豆瓣电影api上,折腾了很久,代码如下: wx.request({ url : "https://api.douban.com/v2/movie/in_theaters", data: {}, header:{ "Content-Type":"application/json" }, success: function(res) { console.log(res.data); var data

微信小程序 | 模仿百思不得其姐

微信小程序 仿百思不得姐 设备 微信开发者工具 v1.02.1901230 扩展 修复了视频点击播放不流畅的问题 修复了视频的暂停够无法播放问题 优化了部分页面 接口 首页 http://api.budejie.com/api/api_open.php?a=list&c=data&type=1 type=1 : 全部 type=41 : 视频 type=10 : 图片 type=29 : 段子 type=31 : 声音 加载更多 : 添加两个字段 page : 页码 (加载下一页需要) m

微信小程序之豆瓣电影

此文是学习小程序第二天做出的一个小demo,调用了豆瓣电影的api,但是需要填上自己appId,现在项目的 目录如下图: 在这个demo里面,我更改了小程序的navigationBar,设置了最下方的三个tabBar,这是公共的设置需要在app.json里面设置, 1 { 2 3 "pages": [ 4 "pages/index/index", 5 "pages/logs/logs", 6 "pages/query/index&quo

微信小程序访问豆瓣api报403错误解决方法

通过豆瓣API可以获取很多电影.书籍的数据信息,今天在调用豆瓣正在上映电影接口的时候报403错误,原因是豆瓣设置了小程序的访问权限.如下: 解决方法是使用代理,将豆瓣API地址换成 https://douban.uieee.com,但是,悲催的是又报了400(bad request)错误,如下: 接下来,设置请求头,header默认为: "ontent-type": "application/json"; 但是仍然会报400错误,将请求头中json设置改为xml,请

微信小程序源码下载(200多个)

微信小程序源码下载汇总,点击标题进入对应的微信小程序下载页面. 最新 demo源码(点击标题进入帖子下载) 描述 1 微信小程序 会议室预定小程序 微信小程序 会议室预定小程序**** 本内容被作者隐藏 **** 2 微信小程序-双人五子棋小游戏 微信小程序-双人五子棋小游戏**** 本内容被作者隐藏 **** 3 打卡签到小程序 用微信小程序实现的一个简单的打卡签到的小程序拒绝 4 微信小程序---左滑删除 微信小程序---左滑删除**** 本内容被作者隐藏 **** 5 一个借钱的记事本的微

分享一下微信小程序的实例【转】

wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 shitoujiandaobu 小程序:石头剪刀布(附代码说明) audiodemo 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义 star 微信小程序开发之五星评分 switchCity 微信小程序开发之城市选择器 城市切换 huadong_del  微信小程序滑动删除效果 jianh

微信小程序-整理各种小程序源码和资料免费下载

微信小程序整理下载 [小程序源码]微信小程序-车源宝微信版 [小程序源码]小程序-微赞社区(论坛demo) [小程序源码]微信小程序-收支账单 [小程序工具]微信小程序-日历 [小程序源码]小程序-在线聊天功能 [小程序源码]微信小程序-大好商城(新增功能天气查询和2048游戏) [小程序源码]微信小程序-查询号码归属地 [小程序源码]微信小程序-备忘录2 [小程序源码]微信小程序-QQ音乐 [小程序源码]小程序-货币汇率 [小程序源码]微信小程序-大学图书馆 [小程序源码]小程序-积分商城 [

微信小程序源码案例大全

微信小程序demo:足球,赛事分析 小程序简易导航 小程序demo:办公审批 小程序Demo:电魔方 小程序demo:借阅伴侣 微信小程序demo:投票 微信小程序demo:健康生活 小程序demo:文章列表demo 微商城(含微信小程序)完整源码+配置指南 微信小程序Demo:一个简单的工作系统 微信小程序Demo:用于聚会的小程序 微信小程序Demo:Growth 是一款专注于Web开发者成长的应用,- 微信小程序Demo: Music-Player 微信小程序Demo:团贷网(投资) 微信

微信小程序实例源码大全2

wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 shitoujiandaobu 小程序:石头剪刀布(附代码说明) audiodemo 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义 star 微信小程序开发之五星评分 switchCity 微信小程序开发之城市选择器 城市切换 huadong_del  微信小程序滑动删除效果 jianh