用uni-app写一个简单的豆瓣电影微信小程序

如题，这个项目是用 uni-app 写的，只有一个列表页，没有详情页。

截图

首页
选择标签
搜索列表

封装api

./api/api

// 定义基本URL
const BASE_URL = 'https://movie.douban.com/j/';// 封装请求
const request = (url, method, data) => {return new Promise((resolve, reject) => {wx.request({url: BASE_URL + url,method: method,data: data || {},header: {Accept: "application/json",'Content-Type': 'application/x-www-form-urlencoded'},success(request) {resolve(request.data)},fail(error) {reject(error)},complete(res) {console.log('loading completed');}})})
}// 扩展 promise 的 finally 方法
Promise.prototype.finally = function (callback) {let P = this.constructor;return this.then(value => {P.resolve(callback()).then(() => value);},reason => {P.resolve(callback()).then( () => { throw reason });});
}// 导出接口
module.exports = {// 标签列表search_tags(params){return request('search_tags','get', params);},// 电影列表search_subjects(params){return request('search_subjects','get', params);},// 搜索列表subject_suggest(params){return request('subject_suggest','get', params);}
}

接口名	URL	Method	Params
获取标签列表	https://movie.douban.com/j/search_tags	GET	{ type: ‘movie’, source: ‘index’ }
获取电影列表	https://movie.douban.com/j/search_subjects	GET	{ type: ‘movie’, tag: ‘热门’, page_limit: 9, page_start: 0 }
搜索电影列表	https://movie.douban.com/j/subject_suggest	GET	{ q: ‘沙’ }

只用到这三个接口。

列表都能找到接口，但是始终找不到详情的接口，豆瓣电影官网的详情页面是服务端渲染整个页面（目前为止），所以先不做详情页，原本也只是随便做的demo。

./pages/index/index 首页代码

<template><view class="container"><view class="section"><SearchInput @search="getSubjectSuggest" /><uni-list v-if="suggest_list.length>0"><uni-list-item v-for="item in suggest_list":key="item.id":title="item.title" :note="item.sub_title" :thumb="item.img"thumb-size="lg" :rightText="item.year"></uni-list-item></uni-list><view class="uni-list"><view class="uni-list-cell"><view class="uni-list-cell-left"> 当前选择 </view><view class="uni-list-cell-db"><picker @change="bindPickerChange" :value="tags_key" :range="tags"><view class="uni-input">{{tags[tags_key]}}</view></picker></view></view></view></view><view><scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"@scroll="scroll"><uni-grid :column="3" :showBorder="false"><uni-grid-item class="uni-grid-item"style="height: 200px;"v-for="item in list":key="item.id"><view class="uni-grid-item-view" @click="goDetail(item)"><image style="width: 100%; height: 100px; background-color: #eee;" mode="scaleToFill" :src="item.cover"@error="imageError"></image><text class="">{{item.title}}</text><uni-rate :size="10" :max="5" :value="item.rate/2" /> {{item.rate}}</view></uni-grid-item></uni-grid></scroll-view></view></view>
</template><script>import { search_tags,      // 标签列表search_subjects,  // 电影列表subject_suggest   // 搜索列表} from '../../api/api';import { SearchInput } from '../../components/SearchInput.vue';export default {name:'index',data() {return {tags:[],tags_key: 0,scrollTop: 0,old: {scrollTop: 0},list: [],key: 0,page_start: 0,suggest_list: []}},components:{SearchInput},async onShow() {wx.showLoading({title: 'Now Loading...',});this.page_start = 0;let res = await search_tags({type: 'movie',source: 'index'});console.log(JSON.stringify(res));this.tags = res.tags;this.search_subjects();wx.hideLoading();},methods: {inject(e){console.log(e);},setActive(){ },// 改变标签bindPickerChange(e) {console.log('picker发送选择改变，携带值为', e.detail.value);this.tags_key = e.detail.value;this.page_start = 0;this.search_subjects();},upper(e) {console.log(e)},lower(e) {console.log(e)},scroll(e) {console.log(e)this.old.scrollTop = e.detail.scrollTop},imageError(e) {console.error('image发生error事件，携带值为' + e.detail.errMsg)},// 跳转到详情页goDetail(item){console.log(uni.navigateTo);uni.navigateTo({url: `/pages/detail/detail?id=${item.id}`});},// 获取搜索建议列表async getSubjectSuggest(q){let res = await subject_suggest({q});console.log(JSON.stringify(res));this.suggest_list = res;},// 获取电影列表async search_subjects(){let res = await search_subjects({type: 'movie',tag: this.tags[this.tags_key],page_limit: 9,page_start: this.page_start++});console.log(JSON.stringify(res));this.list = res.subjects;}}}
</script><style lang="scss" scoped>$rem: 37.5;.container {padding: 20rem/$rem;font-size: 16rem/$rem;.section{margin-bottom: 30rem/$rem;}.uni-grid-item{.uni-grid-item-view{padding: 5rem/$rem;}}}
</style>

./components/SearchInput 用到了一个搜索框组件

<template><view><uni-search-bar @confirm="search" @input="input"></uni-search-bar></view>
</template><script>export default {name: "SearchInput",data() {return {};},async onShow() {},methods:{search(val){console.log(val);this.$emit('search',val.value);},input(val){console.log(val);if(val===''){this.$emit('search','');}}}}
</script>

只是这么多内容，可以把自己的 AppId 放到 manifest.json 中。也可以扩展内容，做一个电视剧列表，相关接口在豆瓣电影官网都能找到。

项目地址：https://codechina.csdn.net/sonicwater1/uni-app-demo

用uni-app写一个简单的豆瓣电影微信小程序相关推荐

写一个音乐播放器的微信小程序
要创建一个音乐播放器的微信小程序,您需要熟悉微信小程序的开发环境和语言(如 JavaScript 和 WXML/WXSS). 具体来说,您需要做以下几件事: 设计音乐播放器的用户界面,并使用 WXML ...
用uni-app写一个使用高德地图的微信小程序
目录参考文档一.准备工作 1.申请小程序key 2.微信公众平台配置合法域名 3.配置mainfest.json 4.使用到的微信小程序插件,基础类二.开发中遇到的问题 1.无效的 app.js ...
使用微信开发工具制作一个简单的古诗词展示微信小程序
效果截图: 1.运行环境:微信开发者工具 2.数据准备:博主是使用Mock进行存储模拟数据 Mock数据准备格式如下: {"code": 0,"data": { ...
一个简单的银行存取款小程序
一个简单的银行存取款小程序来由银行存取款程序程序功能程序主体后期改进内容来由 2019年3月17晚,心血来潮想学习编程,向着一个伟大的程序员的方向出发.在我贫穷的知识库中,所了解到的编程语 ...
做一个派发工单的微信小程序
要制作一个派发工单的微信小程序,需要以下步骤: 了解微信小程序的开发环境和技术栈,比如微信小程序的前端语言.后端语言.数据存储方式等. 设计应用的功能需求,包括工单的创建.分配.执行和查询等. 根据功 ...
ipad php mysql_如何用PHP/MySQL为 iOS App 写一个简单的web服务器（译） PART1
原文:http://www.raywenderlich.com/2941/how-to-write-a-simple-phpmysql-web-service-for-an-ios-app 作为一个i ...
ios php mysql实例_如何用PHP/MySQL为 iOS App 写一个简单的web服务器（译） PART1
原文:http://www.raywenderlich.com/2941/how-to-write-a-simple-phpmysql-web-service-for-an-ios-app 作为一个i ...
如何用PHP/MySQL为 iOS App 写一个简单的web服务器（译） PART1
原文:http://www.raywenderlich.com/2941/how-to-write-a-simple-phpmysql-web-service-for-an-ios-app 作为一个i ...
一个Android开发者眼中的微信小程序
前言转眼间微信小程序已经推出好几个年头了,作为一名Android开发者,一直想尝试下:正好赶上公司策略调整,在开发完App后领导想着在开发一个小程序版,基于微信庞大的用户量,微信小程序成为了首选:在 ...

用uni-app写一个简单的豆瓣电影微信小程序

用uni-app写一个简单的豆瓣电影微信小程序相关推荐

最新文章

热门文章