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

概述

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

详细

一、准备工作

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)
  }
})
三、运行效果

1、导入到微信web开发者工具中,默认运行就是index页面

image.png

2、运行起来的界面如下:

QQ截图20170804140558.pngQQ截图20170804140609.pngQQ截图20170804140621.pngQQ截图20170804140908.png

注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值