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

第七步:开始请求默认城市的今日电影
第八步:在页面中绑定数据
注意:我们为了方便操作,提升程序的复用率,我们一般都会将常用的代码,保存到一个函数中进行封装

学习感受:

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

标签

评论

this is is footer