一、初入項目一臉懵逼

這一個學期沒有聽過課的我，感覺到無比慚愧。可是，真的不是我不想聽，我也想好好學好前端的，哭唧唧，主要這前端老師實在水到不行，還是要小小的抱怨一下，對他太不滿意了，上課就照著官網文檔念念念，之后就是直接給我們看網絡視頻（看白眼）。
一到期末，愁愁愁，一開始真的 不知道該再怎么整，煩惱~
最后再看了一些教程之后，終于有了點頭緒，哈哈哈哈哈佩服姐妹的聰明才智

二、項目準備

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;

總結

以上是生活随笔為你收集整理的豆瓣电影小程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。