20200929冯佳丽

学习日志

项目：影城

准备工作：

1、API接口（我们请求的数据（json））

2、转换思维

3、双向绑定

第一步、导入插件（vant-weapp），为了提高开发效率。

1、在mirniprogram的文件夹上面右击，选择在终端打开，输入“npm init”初始化package.json文件，在后续的步骤中直接回车即可。

2、输入” npm i @vant/weapp -S --production “

3、选择开发工具中的菜单栏中的工具>构建npm

注：如果构建不成功，就继续构建，

4、在开发工具中的右上角找到详情，选择本地设置，勾选“使用npm模块”

5、如果你想在多个页面中使用vant，那么将配置写在 app.js中，如果你想在单个页面中使用vant，那么就将配置写在 index.json，也就是其中一个页面的json文件之中就可以了

6、选择你要使用的组件，开始导入，例如：导入button组件

​ "usingComponents":{ "van-search": "@vant/weapp/search/index"

}

如果要导入多个，直接在对象中使用逗号进行分隔即可

第二步：在页面中使用组件，在wxml文件使用组件：

<van-search
  value="{{ value }}"
  label="城市"
  placeholder="请输入搜索关键词"
  use-action-slot
  bind:change="onChange"
  bind:search="onSearch"
  
  <view slot="action" bind:tap="onClick">搜索</view>
</van-search>

第三步：准备开始请求数据

1、我们通过API接口请求，通过wx.request()方法请求

2、在“聚合数据”官网中测试连接

3、如果我们想要请求当日的电影，就必须要有城市的ID，所有我们需要先获取城市的ID

第四步：请求城市的ID，我们只请求一次足矣，当页面加载的时候，我们就开始请求，通过wx.request()方法请求。

注：为了方便操作，符合开发的需要，我们需要对请求的方法，进行简单的封装

第五步：获取城市的ID，当我们点击搜索的时候，到citys中找寻我们输入的城市的ID，如果我们输入的城市存在，就返回这个ID，供我们查找当前城市的 今日电影

第六步：当小程序打开的时候，不可能是什么都没有的，我们需要为小程序选择一个默认的城市，这里我们默认选择成都，成都的ID为6，我们直接保存在 cityID中即可

​ cityID:6

第七步：开始请求默认城市的今日电影

第八步：在页面中绑定数据

注意：我们为了方便操作，提升程序的复用率，我们一般都会将常用的代码，保存到一个函数中进行封装

学习感受：

今天的内容有点多哦，逻辑性还那么强。记得东西也多