零基础一天学会豆瓣电影微信小程序

第1 章什么是小程序？

1. 2017 年度百度百科十大热词之一

2. 微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是无需安装，用完即走，实际上是需要安装的，只不过小程序的体积特别小，下载速度很快，用户感觉不到下载的过程)

3. 小程序刚发布的时候要求压缩包的体积不能大于1M,，否则无法通过，在2017 年4 月做了改进，由原来的1M 提升到2M；

4. 2017 年1 月9 日0 点，万众瞩目的微信第一批小程序正式低调上线。

第2 章小程序可以干什么？

1. 同App 进行互补，提供同app 类型的功能，比app 使用方便简洁

2. 通过扫一扫或者在微信搜索即可下载

3. 用户使用频率不高，但又不得不用的功能软件，目前看来小程序是首选

4. 连接线上线下

5. 开发门槛低，成本低

第3 章小程序开发资料

3.1 相关资料

1) 官网：微信公众平台

2) 微信开发工具

3) 下载地址

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

第4 章开发小程序储备知识

4.1 Flex 布局简介

4.1.1 什么是flex 布局？

1) Flex 是Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

2) 任何一个容器都可以指定为Flex 布局。

3) display: ‘flex’

4.1.2 flex 属性

1) flex-direction:

row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

学习教程：Flex 布局语法教程 | 菜鸟教程

4.2 小程序适配方案: rpx (responsive pixel 响应式像素单位)

a) 小程序适配单位：rpx

b) 规定任何屏幕下宽度为750rpx

c) 小程序会根据屏幕的宽度不同自动计算rpx 值的大小

d) Iphone6 下：1px = 2rpx

4.3 什么是JSON数据格式：

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式，"名称/值"对的集合，在不同的语言中被理解为对象(Object)。

详细概念学习：https://www.cnblogs.com/abella/p/11125685.html

一、程序安装

1)：百度搜素“微信公众平台”，进行开发账号注册，如下图所示：

 

2)：注册完毕后，依次选择“开发”->“工具”->“下载”,根据机器操作系统类型，选择相应的开发工具软件，如下图所示：

3)：右键以管理员身份运行下载的工具安装文件，然后点击“下一步”，如下图所示：

4)：直至安装结束，点击“完成”，如下图所示：

二、设置页头页尾导航栏

1)：找到app.json文件

2）：设置页头中的背景颜色/名字/字体颜色

3）：设置页尾导航

①:设置底部导航栏文字颜色/选中颜色/背景颜色

②:设置底部导航栏中第一个属性的页面路径/图片/选中时候图片/文字

③:设置第二个属性的页面路径/图片/选中时候图片/文字

④:设置第三个属性的页面路径/图片/选中时候图片/文字

注:底部导航栏最少要有2个!

三、主页面轮播图

1):新建主页面

在app.json中pages里可以新增页面

①:页面的js文件,是页面的生命周期,主要是用来请求api数据/处理数据/执行按钮事件等

②:json文件是用来处理json数据，一般用来做配置

③:.wxml是用来显示页面内容,绑定/显示数据

④:wxss页面样式文件

2):轮播图样式

.view{
  background-color: #3a3a3a;
  min-height: 100%;
}
.swiper{
  height: 400rpx;
}
.item{
  height: 400rpx;
  width: 100%;
}

3):在js文件中设置图片路径

4):wxml页面样式布局

四、调用豆瓣api接口显示数据

①:发起数据请求

②:设置请求的URL地址（https://api.douban.com/v2/movie/new_movies?apikey=0df993c66c0c636e29ecbb5344252a4a）

③:设置请求的数据格式

④:得到请求的数据

⑤:把请求过来的数据保存到数组中,并且发送到前台页面

注:初始请求的代码必须放在onload中,请求的参数不能少!

1):得到请求结果

①:得到的数据是一个对象集合,里面存放着每条数据,页面上就是显示这些数据!

五、页面显示豆瓣电影数据

1):显示电影的图片

2):设置图片的样式

3):页面显示如下所示

4):显示右侧电影信息

①:页面样式代码

②:最终结果如下:

六、电影推荐功能

1):数据请求页面

url: 'https://movie.douban.com/j/search_subjects?type=movie&tag=中国'

注:默认显示中国电影数据,如果想看其他地区的,可以修改地区!

2):页面内容

3):页面样式

4):页面显示结果

5）：显示下拉列表

①:设置下拉列表样式

②:设置下拉列表样式

/* 输入框内字体大小 */
.select_text{
  font-size: 30rpx;
}
/* 下拉列表图片 */
.select_img{
  width: 40rpx;
  height: 40rpx;
  display: block;
  transition:transform 0.3s;
  margin-left: 260px;
}
/* 搜索框的样式 */
.select_box{
  background: #fff;
  width: 100%;
  /* 相对定位 */
  position: relative;
}
.select{
  width: 100%;
  height: 70rpx;
  border:1px solid #efefef;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}

显示默认数据：

 

③:显示结果

④:点击下拉图片触发事件

selectTap(){
         this.setData({
            show: !this.data.show
          });
      },

show:false,//控制下拉列表的显示隐藏，false隐藏、true显示

⑤:下拉列表的内容

⑥：下拉列表内容js代码

⑦：下拉列表样式

.option_box{
  position: absolute;
  top: 70rpx;
  width: 100%;
  border:1px solid #efefef;
  box-sizing: border-box;
  overflow-y: auto;
  background: #fff;
  /* 点击下拉列表显示动画特效 */
  transition: height 0.3s;
}
.option{
  display: block;
  line-height: 40rpx;
  font-size: 30rpx;
  border-bottom: 1px solid #efefef;
  padding: 10rpx;
}

⑧：具体结果

 

⑨：选中下拉列表得到结果

// 点击下拉列表
optionTap(e){
  let Index=e.currentTarget.dataset.index;//获取点击的下拉列表的下标
  this.setData({
    index:Index,
    show:!this.data.show
  });
  if(Index==1)
  {
    //所有调用电影的数据，必须写在这里
    var page=this;
    // wx.request:请求豆瓣电影数据
    wx.request({
      url: 'https://movie.douban.com/j/search_subjects?type=movie&tag=台湾',
      header:{

        'Content-Type':'json'
      },
      success:function(res){
        var result=res.data.subjects;
        console.log(result)
        page.setData({movies:result});
      }
    })
  }

七、点击显示电影详情页面

1):在app.js之中设置跳转

2):在recommand.js页面中添加detail事件

八、显示电影详情数据

1):根据ID查询电影详情数据（https://movie.querydata.org/api?id=）

2):显示详情数据

3):页面代码

4):样式代码

5):显示结果

九、电影查询

1):页面内容

2):页面样式

3):显示结果

十、显示搜索结果

1):页面内容

2):页面样式

.inputShow{
    padding-left: 35px;
    color: white;
    font-size: 12px;
  }

3):如何在下面实时获取文本框的内容

inputShow(e){
        this.setData({inputVal:e.detail.value})
    },

4):显示搜索结果

十一、显示搜索的电影

1):页面js代码（https://m.maoyan.com/ajax/search?stype=0&cityId=59&kw=）

2):显示json数据

3):页面内容显示

4):页面样式

 /* 1px=0.07毫米 */
  /* //movie-info:图片和电影信息之间的间距 */
  .movie-info{
    color: #FFFFFF;
    font-size: 12px;
    padding-top: 20px;
    line-height: 20px;
    margin-left: 30px;
  }
.SearchButton{
    background-color: #DD5E0E;
    color: white;
    font-size: 17px;
    height: 54rpx;
    line-height: 54rpx;
  }

5):页面显示结果

十二、点击查看详情

1):页面代码：

<view class="main">
  <view class="hr"></view>
  <image src="{{film.img}}" class="img" mode="widthFix"></image>
  <view class="hr"></view>
  <text>电影名称：{{film.nm}}</text>
  <view class="hr"></view>
  <text>电影类型：{{film.cat}}</text>
  <view class="hr"></view>
  <text>主要演员：{{film.star}}</text>
  <view class="hr"></view>
  <text>上映地区：{{film.src}}</text>
  <view class="hr"></view>
  <text>上映时间：{{film.pubDesc}}</text>
  <view class="hr"></view>
  <text>电影预告：</text>
  <video src="{{film.vd}}" style="width: 100%;"></video>
  <view class="hr"></view>
  <text>电影描述：{{film.dra}}</text>
  <view class="hr"></view>
</view>

2): 样式代码：

.main{
  background-color: rgba(32, 30, 30, 0.726);
  color: white;
}

.hr{
  height: 5rpx;
  border-top: 1rpx solid white;
  border-bottom: 1rpx solid white;
  width: 100%;
}
.img{
  width: 100%;
}

3): js代码（https://m.maoyan.com/ajax/detailmovie?movieId=）

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var page = this;
    var id = options.id;
    wx.request({
      url: 'https://m.maoyan.com/ajax/detailmovie?movieId='+id,
      header:{},
      success:function(res){
        page.setData({film:res.data.detailMovie});
      }
    })
  }

4): 查询详情效果图