[TOC]
[码云：接口代码](https://gitee.com/dingmeili/minor_program_item)
# 小程序的代码要点
> 先写wxml 先将结构写出来，再对数据进行渲染
> 先向接口发送请求，请求成功再获取数据，再将数据赋给wxml
# 1. index.wxml
> <import src="../template/template"></import> 将其他wxml文件引入此页面
```
<loading hidden="{{show}}"></loading>
//当页面为加载完时出现加载中动画效果
<view class="container">
<block wx:for="{{data}}" wx:for-item="item" wx:key="index">
//循环
<view bindtap="handleClick" class="item" data-id="{{item.id}}">
//点击发送请求
<view class="movie-item" >
//获取动态数据
<image src="{{item.imgUrl}}" />
<text>{{item.name}}</text>
<view class="evalute">评分<text >{{item.average}}</text></view>
</view>
</view>
</block>
</view>
```
## 1.1 block
* 1. wx:for="{{data}}" //对这个数组进行循环
* 2. wx:for-item="item" //给data一个别名
* 3. wx:key="key" //给data一个别名
## 1.2 bindtap="***" 点击事件
### 1.2.1 data-id="id" 跳转的关键点
> 没有id无法获取跳转的页面
# 2. index.js
```
const app = getApp()
Page({
data: {
show: false,
start: 0,
// data是否为空
isEmpty: true
},
onLoad() {
var self = this;
wx.request({
url: 'https://douban.uieee.com/v2/movie/top250',
header: {
'Content-Type': 'json'
},
success: function (res) {
/* var data = res.data.data;
self.setData({
data,
top:2
}); */
self.handleData(res);
}
})
},
handleData(res) {
//onload的数据和onreach
var totalData = []
var data = [];
var subject = res.data.subjects;
// console.log(subject)
for (let key in subject) {
// console.log(subject[key].title)
var name = subject[key].title;
// console.log(name)
var average = subject[key].rating.average;
var imgUrl = subject[key].images.small;
var temp = {};
var id = subject[key].id;
if(name.length>6){
name = name.slice(0,5);
}
temp.name = name;
temp.average = average;
temp.imgUrl = imgUrl;
temp.id = id;
data.push(temp);
// console.log(data)
}
//到到达底部重新加载
if(!this.data.isEmpty){
var totalData = this.data.data.concat(data);
console.log(totalData)
this.setData({
data: totalData,
show:true
})
}
else{
this.setData({
data,
show: true
})
this.data.isEmpty = false;
}
wx.hideNavigationBarLoading();
},
handleClick(event) {
var id = event.currentTarget.dataset.id;
// console.log(id)
wx.navigateTo({
url: '/pages/movie-datail/movie-datail?id=' + id
});
},
onReachBottom: function () {
wx.showNavigationBarLoading();
var self = this;
this.data.start += 20;
var url = "https://douban.uieee.com/v2/movie/top250"
var nextUrl = url + "?start=" + this.data.start + "&count=20";
console.log(nextUrl);
wx.request({
url: nextUrl,
header: {
'Content-Type': 'json'
},
success: function (res) {
self.handleData(res);
}
});
}
});
```
## 2.1 onLoad（）{}
```
onLoad() {
var self = this;
//将this定义到当前页面
wx.request({
url: 'https://douban.uieee.com/v2/movie/top250',
header: {
'Content-Type': 'json'
},
success: function (res) {
/* var data = res.data.data;
self.setData({
data,
top:2
}); */
self.handleData(res);
}
})
}
```
### 2.1.1 `wx:request({})` 向服务器发送请求
* 1. url:'#' //请求服务器地址
* 2. header：//请求头
```
header: {
'Content-Type': 'application/json' //在测试的豆瓣接口中是json
}
```
* 3. success: function (res){} //请求成功执行 请求体
```
success: function (res) {
self.handleData(res); //调用函数
}
```
## 2.2 请求体（此实例为 `handleData(res) {}` ）
```
handleData(res) {
//onload的数据和onreach
var totalData = []
var data = [];
var subject = res.data.subjects;
// console.log(subject)
for (let key in subject) {
// console.log(subject[key].title)
var name = subject[key].title;
// console.log(name)
var average = subject[key].rating.average;
var imgUrl = subject[key].images.small;
var temp = {};
var id = subject[key].id;
if(name.length>6){
name = name.slice(0,5);
}
temp.name = name;
temp.average = average;
temp.imgUrl = imgUrl;
temp.id = id;
data.push(temp);
// console.log(data)
}
//到到达底部重新加载
if(!this.data.isEmpty){
var totalData = this.data.data.concat(data);
console.log(totalData)
this.setData({
data: totalData,
show:true
})
}
else{
this.setData({
data,
show: true
})
this.data.isEmpty = false;
}
wx.hideNavigationBarLoading(); //加载完毕时结束加载动画 ，与2.3.1和再一起用
}
```
### 2.2.1 this.setData({}) 将请求到的数据发送给wxml进行渲染
> 函数用于将数据从逻辑层发送到视觉层，同时改变对应的this.data的值
## 2.3 下拉加载
```
data: {
show: false,
start: 0,
// data是否为空
isEmpty: true
}
onReachBottom: function () {
wx.showNavigationBarLoading();
var self = this;
this.data.start += 20;
var url = "https://douban.uieee.com/v2/movie/top250"
var nextUrl = url + "?start=" + this.data.start + "&count=20";
// 请求地址发生改变，获取的内容改变，格式一定不能错
console.log(nextUrl);
wx.request({
url: nextUrl, //新的请求接口
header: {
'Content-Type': 'json'
},
success: function (res) {
self.handleData(res);
}
});
}
```
### 2.3.1 加载中动画
> 开始加载 wx.showNavigationBarLoading();
> 结束加载 wx.hideNavigationBarLoading();
### 2.3.2 加载的内容（页面改变的变量）
```
this.data.start += 20;
start 应设置初始值 再data里如
data:{
start:0;
}
```
### 2.3.3 加载内容时要考虑当前值是否为空，所以 2.2 handleData(res) 里if-else是为此写的代码
> Tip
> 1. 要对totalData 进行定义 var totalData =[ ];
> 2. data:{ isEmpty:true } //isEmpty判断data是否为空
> 3. 当数据为空 ，也就是执行了else 后将 isEmpty 改为Flase，否则他将一直执行else
> this.data.isEmpty = false;
### 2.3.4 加载失败的可能原因
> 1. 地址格式不正确
> 2. 函数大小写未注意
> 3.data:{ start:0 } start 要给一个初始值
## 2.4 点击跳转其他页面
```
handleClick(event) {
var id = event.currentTarget.dataset.id;
// 本页面需获取页面，即跳转的标识符
wx.navigateTo({
url: '/pages/movie-datail/movie-datail?id=' + id
});
}
```
### 2.4.1 `wx:navigateTo `保留当前页面，跳转到应用内的某个页面，可以返回原页面
### 2.4.2 某个页面加载数据
```
Page({
onLoad(option){
var self = this;
var id = option.id;
wx.request({
url: 'https://douban.uieee.com/v2/movie/'+id,
header: {
'Content-Type': 'json'
},
success: function(res) {
var imgUrl = res.data.image;
self.setData({
imgUrl
})
}
});
}
})
```
- 开发环境及接口
- 0.豆瓣接口
- 1.开发环境配置
- 2.一些相关文档
- 小程序实例效果
- 第0节、TodoList
- 第一节、豆瓣相关
- 1、tabBar的配置及导航加标题
- 2、数据加载及下拉加载
- 3、加载相关
- 4、轮播
- 5、星星评分
- 第二节、音乐播放相关
- 1.点击收藏分享
- 2.音乐播放
- 初始版
- 组件版
- 组件加强版
- 3.点赞
- 点赞初级版
- 点赞第二版
- 5.左右按钮
- 6.缓存
- 第三节、补充
- 地图
- 点击拍照换图
- 扫一扫
- 小程序语法
- 第一节 、HTTP的封装
- 0.http请求
- 1.function封装
- 2.class封装http
- 3.promise封装
- 4.config地址
- 第二节、组件
- 2.组件单独设置样式
- 3.一些有意义的标签
- 4.behavior
- 5.SLOT
- 6.左右按钮
- 5.点赞组件
- 6.用户授权
- 图片按钮 如分享
- 第三节、api
- 1.页面跳转
- 获取input里的值
- 1.添加评论
- 2.搜索框
- 3. 获取input里的值
- 2.设置缓存
- 3.模态框,弹出框
- 4.分享showActionSheet
- 5.定义全局的数据
- 2. 基础知识
- 1.setData
- 2.文件结构
- 3.wxml语法
- 第一节 数据绑定
- 第二节 列表渲染
- 第三节 条件渲染
- 第四节 模板
- 第五节 事件
- 第六节 引用
- 4.wxs
- 1.文本缩进问题
- 5.小程序中遇到的wxss 问题
- 1.width100%越界问题
- 废弃的文件
- 一个完整的小程序
- 1.启动页面
- 2.yuedu轮播+封装及数据调用
- yuedu的详情页
- 3.电影
- movie-more
- web-view