uni-app高分开源电影项目源码案例分析

项目地址

项目特点

• 代码编写简洁，注释清晰，快速入门必备；
• 支持在线模糊搜索；
• 程序类目懒加载，支持在线播放预告片；
• 更好的App跨平台框架、更方便的H5开发框架，加载新页面速度更快；
• 一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

扫码预览

启动准备

​ 小程序账号及微信开发者工具： https://mp.weixin.qq.com

​ 建议编辑器：HBuilderX

小程序启动可能会遇到问题：

• HBuilderX报错：微信开发者工具拒绝HBuilderX访问端口

  答：微信开发者工具 -- 设置 -- 安全设置，点击开启服务端口即可解决。

• 小程序报错：不在以下 request 合法域名列表中

  答：这是因为在小程序中发起了wx.request请求,但是请求的域名没有在微信公众平台后台设置，管理员将需要使用的域名添加到小程序后台，（调试时可以点击微信开发者工具右上角 详情 -- 本地设置 -- 勾选不校验合法域名 ,可暂时取消报错）。

• 小程序报错：Failed to load media http://xxx.xx server responded with a status of 403

  答：这是小程序电影详情页面的预告片视频报错（不影响可忽略此错误），并不是加载视频错误，而是微信开发者工具中加载视频会提示这个错误，所以在调试带有视频的控件时，可以点击真机预览小程序。

部分源码示例

<template>
<view class="container">
<!-- loading动画 -->
<mi-loading ref="loading" title="加载中" :hasMask="true"></mi-loading>
<view style="background-color: #CAF2F2">
<cu-custom :isBack="true">
<block slot="backText"> </block>
<block slot="content" class="tarbar">搜索</block>
</cu-custom>
</view>
<scroll-view>
<view class="topBar">
<image src="~@/static/img/search.jpeg" mode="widthFix" class="response"></image>
<view class="searchBox">
<input class="search-t" placeholder="请输入关键字搜索" @input="messagesearch"></input>
<view class="button" @click="getInfo">Go
<view class="t"></view>
</view>
</view>
</view>
<!-- 电影列表 -->
<view class="movieH">搜索结果</view>
<view class="movieBox">
<view v-for="(item, index) in movieInfo" :key="index" class="movieList" @click="getDate(item)">
<image :src="item.img" class="movieImg"></image>
<view>
{{ item.title | ellipsis }}
<view class="moiveRate">
<!-- <uni-rate disabled="true" :value="item.rating.average/2" size=14 active-color="#D81E06" color="#DADADA">
</uni-rate> -->
<text class="moiveRateT"></text>
</view>
</view>
</view>
</view>
<uni-load-more :status="listStatus" :contentText="contentText" v-if="loadStatu"></uni-load-more>
</scroll-view>
</view>
</template>