豆瓣电影小程序

一、初入项目一脸懵逼

这一个学期没有听过课的我，感觉到无比惭愧。可是，真的不是我不想听，我也想好好学好前端的，哭唧唧，主要这前端老师实在水到不行，还是要小小的抱怨一下，对他太不满意了，上课就照着官网文档念念念，之后就是直接给我们看网络视频（看白眼）。
一到期末，愁愁愁，一开始真的 不知道该再怎么整，烦恼~
最后再看了一些教程之后，终于有了点头绪，哈哈哈哈哈佩服姐妹的聪明才智

二、项目准备

1、本项目是采用uni-app设计的，主要开发软件是HBulider X，微信小程序开发
设计前，先到微信公众平台申请一个账号，appID有用！！！
2、采用接口：https://douban.uieee.com/
官网的那个接口我给整了老半天，就是不行（能力有限的我），所以小菜鸡的我还是乖乖用上面那个吧。我这个项目
3、官网文档：https://www.doubanapi.com/

三、进入主题

1、请求接口
豆瓣的header: {“Content-Type”: ‘“application/json; charset=utf-8”’}，好像就是这个，还是请求json数据就是要用到这个怎样，这样设置，数据就可以出来，没有设置就出不来（要加强自己的学习能力）
请求总体接口建议写一个总体的，这样就不会那么繁琐

const BASE_URL = 'https://douban.uieee.com'
export const myRequest = (options) => {
	return new Promise((resolve,reject) => {
		uni.request({
			url: BASE_URL + options.url,
			// method: 'GET',
			// data: options.data || {},
			header: {
				"Content-Type": '"application/json; charset=utf-8"'
			},
			success: (res) => {
				resolve(res)
			},
			fail: (error) => {
				reject(error)
			}
		})
	})
}

以上写完，封装$myRequest方法，并挂载到全局，（记得再main.js中登记一下，偶是这样记得哈哈哈）

import {myRequest} from './pages/utls/api.js'
Vue.prototype.$myRequest = myRequest

2、请求数据
后续请求数据的时候就可以直接使用上面定义的$myRequest,这里使用这个要和async和await搭配使用，否则请求不到数据

//获取正在上映的电影
	async getNowMovies (){
		const res = await this.$myRequest({
			url: '/v2/movie/in_theaters'
		})
		// console.log(res.data.subjects)
		this.tMovies = res.data.subjects;
	}

3、页面跳转并传值
使用uni.navigateTo，会记录你的父页面，并且能够返回上面一个页面

<view class="movie-item" 
      v-for="(item,index) in tMovies" :key="index" 
      @click="movieDetails(item.id)">
</view>

//获取电影详细信息
	movieDetails (id){
		uni.navigateTo({
			url: '../movie-details/movie-details?movieId='+id+'',
		})
	}

4、scroll-view横向滚动

设置scroll-x=“true”

<scroll-view scroll-x="true" @scroll="scroll">
	<view class="movies">
		<view class="movie-item" v-for="(item,index) in tMovies" :key="index" @click="movieDetails(item.id)">
			<image class="movie-img" :src="item.images.large" mode="aspectFit"></image>
			<view class="movie-title">{{item.title}}</view>
			<view class="movie-rating">豆瓣评分：{{item.rating.average}}</view>
		</view>
	</view>
</scroll-view>

设置页面布局为flex，不换行

.movies{
	width: 100%;
	display: flex;
	white-space: nowrap;
}

5、页面底部导航栏
详情请见官网文档：https://uniapp.dcloud.io

"tabBar":{
	"list":[
		{
			"text":"首页",
			"pagePath":"pages/home/home",
			"iconPath":"static/icon/home.png",
			"selectedIconPath":"static/icon/home-actived.png"
		},
		{
			"text":"榜单",
			"pagePath":"pages/board/board",
			"iconPath":"static/icon/board.png",
			"selectedIconPath":"static/icon/board-actived.png"
		},
		{
			"text":"我的",
			"pagePath":"pages/index/index",
			"iconPath":"static/icon/profile.png",
			"selectedIconPath":"static/icon/profile-actived.png"
		}
	]
}

四、最头疼的界面设计

根据之前经验，在开始传入数据之前，先设计界面的样式

1、设置文字超出部分以省略号显示，超出部分不显示，不换行显示

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;