微信小程序实战教程 超级详细

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

5.我需要一个导航栏

接下来 使用组件 进入vant weapp地址:https://youzan.github.io/vant-weapp/#/search 找到自己需要用的组件 我这里需要搜索框 同理将自己需要的放入即可 开始调用接口,我们需要搜索城市的接口 用 聚合数据 请求接口

写在data之后

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

```javascript
   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)
  },

这样就请求到数据

请求今日电影:和上图一样 将保存的数据传到today todayMovie:function(cid){

var that=this;
    wx.request({
          
   
      url: `url`,
      method:"GET",
      header: {
          
   
        "content-type": "application/x-www-form-urlencoded"
      },
      success(res){
          
   
        console.log(res)
        that.setData({
          
   
          today:res.data.result
        })
      }
    })
  },
<view wx:for="{
          
   {today}}" wx:key="index" class="movie_list">
  <image src="{
          
   {item.pic_url}}" alt=""></image>
  <view>
    <text>{
          
   {
          
   item.movieName}}</text>
  </view>
</view>

wxml文件里wx:for 遍历 最后结果 待更新。。。。

经验分享 程序员 微信小程序 职场和发展