微信小程序项目实战之豆瓣天气

概述

微信小程序项目实战之豆瓣天气

详细

代码下载：http://www.demodashi.com/demo/10943.html

一、准备工作

1、注册微信小程序

QQ截图20170717112223.png

2、在小程序设置中设置request合法域名

QQ截图20170804140416.png

3、将项目导入开发工具即可运行

二、程序实现

1、项目代码截图：

QQ截图20170804140500.png

2、主要API：

//获取电影信息
getMovie: function () {
  var that = this
  var url = "https://api.douban.com/v2/movie/in_theaters";
  var params = {
    city : "广州"
  };
 
  wx.request({
    url: url,
    data: params,
    header: {
      "content-type": "json"
    },
    success: function (res) { 
      that.setData({
        subjects: res.data.subjects
      })
    },
    fail: function (res) { },
    complete: function (res) { },
  })
},

3、主页面实现html：

<!--index.wxml-->
<swiper indicator-dots="true" indicator-active-color="#2AAC5E" indicator-color="rgba(255, 255, 255, .3)" autoplay="true" interval="5000" duration="1000">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" />
    </swiper-item>
  </block>
</swiper>
 
<view wx:for="{{subjects}}" wx:for-index="i" wx:for-item="item">
  <view class="" bindtap="go2Detail" id="{{item.id}}">
    <view class="hor p20">
      <view class="">
        <image class="icon" src="{{item.images.large}}"></image>
      </view>
      <view class="detail ml20">
        <view class="hor grade">
          <view class="">名称：{{item.title}}</view>
          <view class="o">{{item.rating.average}}分</view>
        </view>
        <view class="">类型：{{item.genres}}</view>
        <view class="">导演:
          <block wx:for="{{item.directors}}" wx:for-item="director">{{director.name}},</block>
        </view>
        <view class="">演员:
          <block wx:for="{{item.casts}}" wx:for-item="cast">{{cast.name}},</block>
        </view>
        <view class="">年份：{{item.year}}</view>
      </view>
    </view>
    <view class="l"></view>
  </view>
</view>

4、主页面实现css：

.slide-image{
  width: 100%;
}

5、公用的css：

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
 
 
.hor{
  display: flex;
}
 
.icon{
  width: 200rpx;
  height: 270rpx;
}
 
.p20{
  padding: 20rpx;
}
 
.p30{
  padding: 30rpx;
}
 
.ml20{
  margin-left: 20rpx;
}
 
.grade{
  justify-content: space-between;
}
 
.detail{
  display: block;
  flex-grow: 1;
}
 
.l{
  border: 1rpx solid #eee;
}
 
.l2{
  border: 5rpx solid #eee;
}
 
.w{
  color: #fff;
}
 
.o{
  color: #F16113;
}
 
.center{
  text-align: center;
  margin: 0 auto;
}
 
.f30{
  font-size: 30rpx;
}

6、主页面实现js：

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    imgUrls: [
      '../../assets/imgs/1.jpg',
      '../../assets/imgs/2.jpg',
      '../../assets/imgs/3.jpg'
    ]
  },
 
  onLoad: function () {
    console.log('onLoad')
    var that = this
    that.getMovie()
 
  },
 
  //获取电影信息
  getMovie: function () {
    var that = this
    var url = "https://api.douban.com/v2/movie/in_theaters";
    var params = {
      city : "广州"
    };
 
    wx.request({
      url: url,
      data: params,
      header: {
        "content-type": "json"
      },
      success: function (res) { 
        that.setData({
          subjects: res.data.subjects
        })
      },
      fail: function (res) { },
      complete: function (res) { },
    })
  },
 
  //跳转页面
  go2Detail: function (event) {
    app.go2Detail(event)
  }
})