Tz张无忌
Tz张无忌
  • 发布:2020-05-15 16:36
  • 更新:2020-08-06 18:18
  • 阅读:3637

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

分类: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>
0 关注 分享

要回复文章请先登录注册

x***@qq.com

x***@qq.com

代码呢?
2020-08-06 18:18