微信小程序实战教程

咱们为了节省时间，直接用vant weapp组件来

1. 先创建一个新的文件夹 配置好vant weapp

vant weapp地址：https://youzan.github.io/vant-weapp/#/search

1.点开miniprogram文件夹在终端中打开，在终端中输入“npm init”后，直接enter到最后，

2. init操作完成后 输入“npm i @vant/weapp -S --production”

3. 点开微信开发程序中的“工具” —>构建npm（构建完成后会有一个miniprogram_npm文件夹）

4.回到vant weapp，找到search搜索，开始运用我们的组件

1. 将我们的引入部分复制粘贴到app.json文件中

2. 回到vant weapp中，找到search搜索组件，开始操作
3. 将红色框的代码复制到微信开发工具中

5. 开始调用接口，我们需要搜索城市的接口

1. 用 聚合数据 请求接口

我们要做到输入地址并且点击 搜索 后能够请求到所有的城市地址，以下html

js代码：

//请求所有城市列表
//相当于把我们的请求封装起来，就不用请求很多次数据了，只用请求这一次即可，这个函数的名字是自己取的，在函数封装的时候，下面有一个success（res），会将指针this指向res，所以我们要在改变指针指向方向改变之前就要去给他固定住指针的方向
  ctiyList:function(){
    var that = this;
    wx.request({
      //url是接口上的请求地址+请求参数
      url: 'http://v.juhe.cn/movie/citys?dtype=&key=0c1ea05f351afa36ce3c86a59ea122b3',
      method:"GET",
      header:{
        "content-type":"application/x-www.form-urlencoded"
      },
      success(res){
      //res是接收接口的所有的数据
        console.log(res);
        //在微信小程序中只能用setDate来改变变量的值 不能用“变量名=变量值”来改变
        that.setData({
          citys:res.data.result
          //citys是自己在data中定义的一个数组用来保存我们接收到的数据
        })
        // console.log(that.data.citys)
      }
    })
  },

2. 然后我们来判断我们在搜索框中写的内容和我们请求到的数据是否匹配是否相同

  onClick() {
    console.log('搜索' + this.data.value);
    //判断我们得到的数据与输入的数据是否匹配
    for(let i=0;i<this.data.citys.length;i++){
      if(this.data.citys[i].city_name==this.data.value){
		//如果我们输入的城市存在 那就返回我们输入城市的id值，并且保存在变量中
        this.setData({
          cityID:this.data.citys[i].id
        })
      }
    }
    console.log("城市id:"+this.data.cityID)
  },

3. 最后使用在页面加载时调用这个接口cityList

//js
onload:function(){
	this.cityList();
}

6.我们继续来调用今日播放的电影接口

1. 同样的请求接口

//今日放映影片
  todayMovie:function(cid){
    var that = this //this指针指向pages 我们要将这个指针保存下来所以要一个that,避免后面出现指针指向res的错误
    //请求接口
    wx.request({
      url: `https://v.juhe.cn/movie/movies.today?cityid=${cid}&dtype=&key=0c1ea05f351afa36ce3c86a59ea122b3`,
      method:"GET",
      header:{
        "content-type":"application/x-www.form-urlencoded"
      },
      success(res){
        // console.log(res)
        that.setData({
          today:res.data.result
        })
      }
    })
  },

2. 因为要显示我们的内容，所以在wxml的位置写上我们的wxml代码，

<view wx:for="{{today}}" wx:key="index">
//today是我们在data中保存的今日放映电影接口的数据
  <image src="{{item.pic_url}}"></image>
  //item是today数组里面的数据
  <view>
    <text>{{item.movieName}}</text>
  </view>
</view>

3. 最后在页面渲染的时候请求我们的今日电影接口