1.首先创建小程序项目
删掉
三个文件夹里面的东西，后面重新创建
2.打开微信开发者工具 打开项目找到app.josn
3.我需要三个页面，所以创建首页，地图，和用户
4.配置 vant weapp ：
vant weapp地址：https://youzan.github.io/vant-weapp/#/search
①.点开miniprogram文件夹在终端中打开，在终端中输入“npm init”后，直接enter到最后，
②. init操作完成后 输入“npm i @vant/weapp -S –production”，配置vant weapp
③. 点开微信开发程序中的“工具” —>构建npm（构建完成后会有一个miniprogram_npm文件夹）
这样我们就配置完成
5.我需要一个导航栏
接下来 使用组件 进入vant weapp地址：https://youzan.github.io/vant-weapp/#/search
找到自己需要用的组件 我这里需要搜索框
同理将自己需要的放入即可
开始调用接口，我们需要搜索城市的接口
用 聚合数据 请求接口
“`javascript//请求所有城市列表//相当于把我们的请求封装起来，就不用请求很多次数据了，只用请vps云服务器求这一次即可，这个函数的名字是自己取的，在函数封装的时候，下面有一个success（res），会将指针this指向res，所以我们要在改变指针指向方向改变之前就要去给他固定住指针的方向 ctiyList:function(){ var that = this;//当需要传递参数时 固定指针 wx.request({ //url是接口上的请求地址+请求参数 url: ‘url’, 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) } }) },
写在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 遍历
最后结果
待更新。。。。
88814031
