uni-app高分开源电影项目源码案例分析,支持一套代码发布小程序、APP平台多个平台(前端入门必看)

GitHub地址:https://github.com/Tzlibai/uni-app-video

一个优秀的uni-app案例,旨在帮助大家更快的上手uni-app,共同进步!

Features

代码编写简洁,注释清晰,快速入门必备;

支持在线模糊搜索;

程序类目懒加载,支持在线播放预告片;

更好的App跨平台框架、更方便的H5开发框架,加载新页面速度更快;

一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

扫码体验

H5

启动准备

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

​ 建议编辑器:HBuilderX

手摸手启动项目 ( 以小程序为例 ):

1.打开 HBuilderX导入项目:

H5

2.进入manifest.json文件中修改成自己的相关ID(如遇无法加载配置文件,重启编辑器即可);

H5

接下来就可以正常使用啦~

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

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

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

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

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

小程序报错:Failed to load media server responded with a status of 403

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

项目结构

.
├─ colorui/ # 引入的UI文件
├─ components/ # uni-app组件目录
│ ├─ comp-a.vue # 可复用的a组件
├─ pages/ # 业务页面文件存放的目录
│ ├─ home/
│ │ ├─ index.vue # home页面
│ ├─ detail/
│ │ ├─ index.vue # detail页面
├─ static # 存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─ unpackage/ # 打包目录
├─ App.vue # 应用配置,用来配置App全局样式以及监听
├─ main.js # Vue初始化入口文件
├─ manifest.json # 配置应用名称、appid、logo、版本等打包信息
├─ package.json # 配置页面路由、导航条、选项卡等页面类信息

复制代码Tips:

static 目录下的 js 文件不会被编译,如果里面有 es6 的代码,不经过转换直接运行,在手机设备上会报错。
css、less/scss 等资源同样不要放在 static 目录下,建议这些公用的资源放在 common 目录下。

uni-app之旅

前言:分享一下遇见过的问题难点和一些注意点,共同进步

像素单位

使用upx/rpx 而不是 px

修改内容(评论区大佬的订正): 1px = 2upx是不准确的,upx和rpx是响应式单位,以750px为基准宽度,根据设备屏幕宽度自动调整

路由

uni-app的路由全部配置在page.json这个文件中,问题就在于多人开发的时候,路由无法拆分,如果处理的不好,经常发生冲突。至于其中的一些配置项,就请见官方文档。

在页面中没有专门的 $route 和 $router对象 仅能在页面的生命周期里面接受路由传参,详情见文档。

uniapp.dcloud.io/frame?id=路由…

路由传参方式 let url = `/pages/shopManagement/sonPage/billDetails?StoreID=${StoreID}` 复制代码

路由接参方式:

onLoad(route){ this.getData.StoreID=route.StoreID this.getCurryInfo() }, onLoad接收到一个参数对象 DOM操作

如果你的项目仅是h5,那可以放心大胆的使用dom操作,但如果要在小程序和app跑,就不要做dom操作了,不生效。

不过ref还是可以用的,一样可以获取到这个节点,该干啥干啥。

img

生命周期

说到ref我就要提一下生命周期

具体的生命周期在文档中可以看详情

uniapp.dcloud.io/frame?id=应用…

大致上和vue的差不多,分成页面生命周期和应用生命周期,页面生命周期就是针对单页面的,应用生命周期就是针对整个小程序/app的,不过我提出在开发时的一些情况

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zypyyp.html