uni-app_uni-app入门 - CSDN
精华内容
参与话题
  • uniapp实战开发商城APP和小程序

    千人学习 2020-03-31 10:59:37
    课程包含Uniapp开发全端教程,课程由英特网络独家录制,购买课程后赠送后端CMS管理系统,可以修改商品及接口数据,同时CMS提供Uniapp所需要的全部API接口,包括课程内容:安卓证书申请/APP苹果打包/APP安卓打包/微信...
  • uni-app入门

    万次阅读 多人点赞 2019-09-10 15:59:27
    一、uni-app简单介绍 什么是uni-appuni-app 是使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。 uni-app的优点 跨平台发行,运行体验更好 与小程序的...

    一、uni-app简单介绍

    什么是uni-app?

    uni-app 是使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。

    uni-app的优点

    跨平台发行,运行体验更好

    • 与小程序的组件、API一致;
    • 兼容weex原生渲染,增加了开发效率高,但是由于weex坑比较多,建议还是使用局部渲染优化;

    通用前端技术栈,学习成本更低

    • 支持vue语法,微信小程序API
    • 内嵌mpvue

    开发生态,组件更丰富

    • 支持通过npm安装第三方包
    • 支持微信小程序自定义组件及JS SDK
    • 兼容mpvue组件及项目(内嵌mpvue开源框架)
    • App端支持和原生混合编码
    • 插件丰富,DCloud将发布插件到市场

    二、功能框架浏览图

    在这里插入图片描述

    三、创建项目

    1、安装HBuilderX

    HBuilderX内置相关环境,无需配置nodejs、vue等,三秒钟就可以创建一个项目。

    • 小提示:ctril+N可以快速调转到新建选择类型
      在这里插入图片描述

    2、创建uni-app
    在这里插入图片描述

    3、运行项目
    在这里插入图片描述
    4、官方提示

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

    四、学习框架

    1、项目结构介绍

    在这里插入图片描述

    2、开发规范

    2.1 uni-app 约定的开发规范

    • 页面文件遵循 Vue 单文件组件规范
    • 组件标签靠近小程序规范
    • 接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni
    • 数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期
    • 为兼容多端运行,建议使用flex布局进行开发

    2.2 uni-app 开发的注意事项

    • html标签
      uni-app的tag同小程序的tag,和HTML的tag不一样,比如div要改成view,span要改成text、a要改成navigator。

    • CSS
      推荐使用flex布局模型
      单位方面,uni-app 支持的通用 css 单位包括 px、rpx
      (早期 uni-app 提供了 upx ,目前已经推荐统一改为 rpx 了)

    • JS
      只有H5端可使用浏览器内置对象,比如document、window、localstorage、cookie等,以及jquery等依赖。

    • 项目文件
      显示页面必须放到pages目录下,页面所在目录的目录名需要放入相同名称的.vue文件。
      在这里插入图片描述

      静态资源如图片,固定放到static目录下。这是webpack、mpvue的规则

    • echats图表
      H5端流行的echart报表因为涉及大量dom操作,无法跨端使用,而wx-chart在跨端和更新方面都不足,推荐使用uChart组件。如仍然坚持使用原版echart,可在web-view组件中内嵌html来使用。

    3、页面样式与布局

    (1)尺寸单位

    uni-app支持以下css单位:

    单位 介绍
    px 屏幕像素
    upx uni-app提供根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,屏幕变宽,upx实际显示效果会等比放大
    vh 是视窗高度的百分比
    单位换算 设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx

    注意问题: 动态绑定的 style 不支持使用 upx,因为upx是编译器处理的,在手机端动态修改样式赋值时,无法直接使用 upx。

    解决方案: 使用 uni.upx2px(Number) 转换为 px 后再赋值。

    this.cWidth = uni.upx2px(750);
    

    (2)样式导入

    <style>
        @import "../../common/color.css";
        .colorA {
            box-shadow: none;
        }
    </style>
    

    (3)内联样式

    支持 style 和 class来控制样式,但建议不要在style中直接使用,影响渲染速度。

    (4)所支持的选择器
    在这里插入图片描述

    (5)背景图片 和 字体图标

    • 支持 base64 格式图片。
    • 支持网络路径图片。
    • 使用本地图片或字体图标需注意:
    1. 图片小于 40kb,uni-app 会自动将其转化为 base64 格式;
    2. 图片大于等于 40kb, 需开发者自己将其转换为base64格式使用,或将其挪到服务器上,从网络地址引用。
    3. 本地引用路径仅支持以 ~@ 开头的绝对路径(不支持相对路径)。
    /* 背景图片 */
     .bgImg {
         background-image: url('~@/static/logo.png');
     }
    /* 字体图标 */
     @iconImg {
         font-family: test1-icon;
         src: url('~@/static/iconfont.ttf');
     }
    

    (6)条件编译

    1、用特殊的代码做标记,不同标记里面的代码可以在不同平台里面执行。

    2、支持的文件

    • .vue
    • .js
    • .css
    • pages.json
    • 各预编译语言文件,如:.scss、.less、.stylus、.ts、.pug

    3、语法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。

    • #ifdef:if defined 仅在某平台存在
    • #ifndef:if not defined 除了某平台均存在
    • %PLATFORM%:平台名称
    	<!-- #ifndef APP-PLUS -->
    	<text class="app-text">text</text>
    	<!-- #endif -->
    	
    	<!-- #ifdef MP-WEIXIN -->
    	<text class="weixin-text">text</text>
    	<!-- #endif -->
    
    展开全文
  • uni-app实战商城类app和小程序

    千人学习 2020-03-09 15:31:20
    本季度为uni-app实战项目第2季度,将实战商城类app和小程序,其中会包括发布到安卓端app,iOS端app、微信小程序,另外还会涉及Weex(nvue),Vuex模块化管理,商城支付模块等。 课程大纲见以下图!
  • uni-app是一个使用 Vue.js 开发跨平台应用的前端框架,使用hbuilder X可以快速将一套代码打包至最多7个平台。对于个人开发者,或者创业公司来说就是开发神器,省去了很多开发成本。下面就给大家介绍一下怎么快速上手...
    uni-app是一个使用 Vue.js 开发跨平台应用的前端框架,使用hbuilder X可以快速将一套代码打包至最多7个平台。对于个人开发者,或者创业公司来说就是开发神器,省去了很多开发成本。下面就给大家介绍一下怎么快速上手uni-app。

    uni-app使用的是vuejs的语法,所以会vuejs的朋友就可以跳过学习语法这一步了,还不会vuejs的朋友也不要紧,可以先去vue官方文档看看,vue的文档可以说非常通俗易懂了,如果你有遇到前端方面的问题或者需要一些前端学习资料可以加q群:682783851。下面就假设大家都会vuejs了。

    首先,我们已经知道uni-app是用来制作一个跨平台应用的,所以,在开始之前,我们一定要知道uni-app是如何打包到多个平台的,使用uni-app开发,我这里是建议大家使用官方的开发者工具的,官方工具也非常好用,对于一些配置项非常方便,可以省去很多麻烦,使用开发者工具我们就知道了,uni-app跨平台都是开发者工具来完成编译的。
    那么对于多个平台,是不是只需要看一端就行了呢?答案是否定的,uni-app对百分之90的样式是完全跨平台的,对于一些特殊的,因为每个平台要求不一样,所以我们要使用条件编译来做适配,另外对于一些第三方授权登录或者支付功能每个平台也有所不同。这里我们注意要使用条件编译,重要点是一定要注意每个平台对组件或接口的兼容性
    另外,需要注意的是uni-app中对vue语法的兼容性,使用 Vue.js 注意事项
    了解上面的两点之后,我们就可以开始创建一个项目了,打开hbuilder X,左上角文件-新建-项目,可以选择uni-app的模板学习一下,看看uni-app的目录结构如何,下面是【购靓号】项目的目录结构

    下面目录说明好好看一下

    common 是存放公共js和css的目录,大家可以把一些工具js或者公共的css放这里面
    components是放组件的目录,我们所有的组件都可以放这里面,记住组件里面不能使用uni-app页面钩子函数
    pages 是uni-app放页面的文件夹,我们每次在这里面新建一个页面,hbuilder X都会在pages.json里面配置好。
    static 是存放字体或图片的文件夹,一些静态资源都可以放这里面
    store 是vuex状态管理,因为uni-app项目内置vuex所以直接在main.js里面配置一下就可以使用了
    subpages 是因为内容过多,分的包,这里面新建的页面pages.json里面不会自动生成对应配置项
    subpagesA 也是分的包,因为小程序限制,所以建议大家在一开始就考虑分包情况。免得后面又要整理
    unpackage 里面的打包后的东西,我们可以不用管,h5打包后会放在这个里面的dist/build/h5里面
    App.vue 可以说是入口文件,我们公共的css可以放这里面,应用启动需要做的事情也可以放这里面,但是这个里面是不能进行页面跳转的
    main.js 是入口js文件,跟vue脚手架一样的,我们可以引入全局js,配置一些全局js函数等都可以在这里操作
    manifest.json是uni-app的配置项,一般都是可视化配置,很少用到源码配置,大家基本看一看就知道了,不知道的加QQ群私聊群主:682783851
    pages.json 就是页面配置文件了,你写的每一个页面都要在这里面配置,每个页面一些的特殊配置项也是在这里面写,uni-app pages配置项
    uni.scss 是uni-app的样式包,大家随意放

    这个时候我们就可以开始开发页面了,直接在pages文件夹上右键就可以新建页面了,每一个页面都是vue文件,结构跟我们使用vue脚手架一样,写起来还是很舒服呀!
    上面是一个大概的讲述,具体的学习路线还是要依赖官方文档,大家可以根据下面流程学习

    uni-app介绍
    uni-app组件
    uni-app配置
    uni-app接口
    一定要注意每个组件和接口在平台的支持情况。

    官方文档非常详细,我们无需依赖其他书籍,有问题可以加QQ群,里面有很多学习资料,也可以提资源需求,还可以私聊群主解决问题,群主就是我,哈哈哈。
    另外,想看看uni-app做出来的跨平台应用是什么体验的小伙伴,可以看下面了,体验一下中大型项目的感觉,包含登录支付功能,还可以分享

    下面是【购靓号】平台的跨平台应用,PC端可访问购靓号 或复制打开链接https://www.golianghao.com。手机端可扫码体验
    展开全文
  • uni-app实战社区交友类app开发

    千人学习 2020-03-06 15:38:32
    适用人群 具备... 课程概述 ... 本季度为uni-app实战项目第一季度,将实战开发社区交友类app,其中会包括发布到安卓端app,iOS端app、微信小程序和支付宝小程序。 课程大纲见以下图!
  • uni-app使用总结

    千次阅读 2019-09-26 09:04:16
    我在uni-app遇到的问题 样式问题 1、组件和调用此组件的页面样式最好不要重名,不然会有样式覆盖问题。 2、数据绑定变量的时候不能识别upx,可以转化 computed: { halfWidth() { return uni.upx2px(750 / 2) + 'px...

    我在uni-app遇到的问题

    样式问题

    1、组件和调用此组件的页面样式最好不要重名,不然会有样式覆盖问题。

    2、数据绑定变量的时候不能识别upx,可以转化

    computed: {
        halfWidth() {
            return uni.upx2px(750 / 2) + 'px'; //350upx
        }
    }
    

    3、css获取状态栏的高度var(–status-bar-height)

    小程序中是固定25px;;5+app是真实状态栏高度;H5是0;
    注:真机才管用

    事件问题

    1、blur事件比页面的点击事件慢

    input、textarea获取值的时候用 v-model 双向绑定,或者用 input 事件,尽量少用blur事件;

    2、uni.chooseLocation()

    uni-app的uni.chooseLocation()在真机上不执行 fail ,还有 cancel ,只执行success。

    uni.chooseLocation({
    	fail:function(){  //不执行
    		console.log('失败');
    	},
    	cancel:function(){ //不执行
    		console.log('取消');
    	},
    	success: function(res){
    		console.log('成功');
    	},
    	complete:function(){ //成功后
    		console.log('完成');
    	}
    })
    

    注:成功后执行complete,失败或者取消不执行complete

    3、点击按钮显示输入框,输入框自动聚焦,弹不起软键盘(弹起后马上又收回去)

    可以先显示输入框,延迟100ms让输入框聚焦。

    4、组件属性设置不生效解决办法

    (1)监听scroll事件,记录组件内部变化的值,在设置新值之前先设置为记录的当前值。

    <scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">
    
    methods: {
    	scroll: function(e) {
    		this.old.scrollTop = e.detail.scrollTop
    	},
        goTop: function(e) {
            this.scrollTop = this.old.scrollTop
            this.$nextTick(function() {
            	this.scrollTop = 0
            });
        }
    }
    

    (2)监听scroll事件,获取组件内部变化的值,实时更新其绑定值

    <scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">
    
    methods: {
        scroll: function(e) {
            this.scrollTop = e.detail.scrollTop
        },
        goTop: function(e) {
            this.scrollTop = 0
        }
    }
    

    第二种解决方式在某些组件可能造成抖动,推荐第一种解决方式。
    详见官方文档的使用Vue.js注意事项——常见问题——4. 组件属性设置不生效解决办法。
    链接:uni-app官方文档

    5、禁止蒙版下的页面滚动

    (1)可使用 @touchmove.stop.prevent=“moveHandle”,moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数。

    <view class="mask" @touchmove.stop.prevent="moveHandle"></view>
    

     缺点:如果遮罩中的modal也需要滚动时,上面的办法失效。

    (2)蒙版中需要滚动的内容用scroll-view标签,蒙版下需要滚动的内容也用scroll-view标签(需设置高度,不能产生页面滚动条),再加上(1)中阻止滚动的方法。

      缺点:不能使用页面的刷新加载方法,只能用scroll-view的触底方法。

    (3)蒙版中需要滚动的内容用scroll-view标签,加上(1)中阻止滚动的方法。

      缺点:当蒙版中滚动内容触底或者到顶部后,页面开始滚动。

    6、原生组件的层级问题

      微信小程序端的原生组件有camera、canvas、input(仅在focus时表现为原生组件)、live-player、live-pusher、map、textarea、video。可以用cover-view、cover-image来进行覆盖。
      5+app端的原生组件有video。也可以用cover-view、cover-image来进行覆盖,但是不支持嵌套,可以引入原生子窗体,为了不影响性能,原生子窗体最好不多于三个。

    展开全文
  • uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播

    万次阅读 多人点赞 2019-11-11 17:02:46
    优直播uni-liveShow是基于vue+uni-app+vuex+nvue+swiper等技术开发仿制抖音|火山小视频/陌陌直播实战项目,支持编译到三端(H5、小程序、App端) 且兼容效果一致。 使用技术 编码器+技术:HBuilderX + vue/NVue/...

    优直播uni-liveShow是基于vue+uni-app+vuex+nvue+swiper等技术开发仿制抖音|火山小视频/陌陌直播实战项目,支持编译到三端(H5、小程序、App端) 且兼容效果一致。

    使用技术

    • 编码器+技术:HBuilderX + vue/NVue/uniapp/vuex
    • iconfont图标:阿里字体图标库
    • 自定义导航栏 + 底部Tabbar
    • 弹窗组件:uniPop(uni-app封装自定义弹出窗)
    • 测试环境:H5端 + 小程序 + App端

    ◆ uniapp透明导航栏

    顶部导航栏采用的是自定义模式,可设置透明背景(如:个人主页/朋友圈动态) 具体可参看这篇文章:uni-app自定义导航栏按钮|uniapp仿微信顶部导航条

     /**
      * @desc 	uni-app主入口页面
      * @about 	Q:282310962  wx:xy190310
      */
    
    import Vue from 'vue'
    import App from './App'
    
    // ***引入css
    import './static/fonts/iconfont.css'
    import './assets/css/reset.css'
    import './assets/css/layout.css'
    
    // ***引入状态管理
    import store from './store'
    Vue.prototype.$store = store
    
    // ***引入公共组件
    import headerBar from './components/header/header.vue'
    import tabBar from './components/tabbar/tabbar.vue'
    import popupWindow from './components/popupWindow.vue'
    Vue.component('header-bar', headerBar)
    Vue.component('tab-bar', tabBar)
    Vue.component('popup-window', popupWindow)
    
    // ***引入自定义弹窗组件uniPop
    import uniPop from './components/uniPop/uniPop.vue'
    Vue.component('uni-pop', uniPop)
    
    Vue.config.productionTip = false
    App.mpType = 'app'
    
    const app = new Vue({
        ...App
    })
    app.$mount()

    ◆ uniapp实现抖音小视频界面

    项目中小视频界面功能效果类似抖音/火山小视频,使用swiper组件实现上下滑动切换视频播放。

    <swiper :indicator-dots="false" :duration="200" :vertical="true" :current="videoIndex" @change="handleSlider" style="height: 100%;">
        <block v-for="(item,index) in vlist" :key="index">
            <swiper-item>
                <view class="uni_vdplayer">
                    <video :id="'myVideo' + index" :ref="'myVideo' + index" class="player-video" :src="item.src" 
                    :controls="false" :loop="true" :show-center-play-btn="false" objectFit="fill">
                    </video>
                    <!-- 中间播放按钮 -->
                    <view class="vd-cover flexbox" @click="handleClicked(index)"><text v-if="!isPlay" class="iconfont icon-bofang"></text></view>
                    <!-- 底部信息 -->
                    <view class="vd-footToolbar flexbox flex_alignb">
                        <view class="vd-info flex1">
                            <view class="item at">
                                <view class="kw" v-for="(kwItem,kwIndex) in item.keyword" :key="kwIndex"><text class="bold fs_18 mr_5">#</text> {{kwItem}}</view>
                            </view>
                            <view class="item subtext">{{item.subtitle}}</view>
                            <view class="item uinfo flexbox flex_alignc">
                                <image class="avator" :src="item.avator" mode="aspectFill" /><text class="name">{{item.author}}</text> <text class="btn-attention bg_linear1" :class="item.attention ? 'on' : ''" @tap="handleAttention(index)">{{item.attention ? '已关注' : '关注'}}</text>
                            </view>
                            <view class="item reply" @tap="handleVideoComment"><text class="iconfont icon-pinglun mr_5"></text> 写评论...</view>
                        </view>
                        <view class="vd-sidebar">
                            <view v-if="item.cart" class="ls cart flexbox bg_linear3" @tap="handleVideoCart(index)"><text class="iconfont icon-cart"></text></view>
                            <view class="ls" @tap="handleIsLike(index)"><text class="iconfont icon-like" :class="item.islike ? 'like' : ''"></text><text class="num">{{ item.likeNum+(item.islike ? 1: 0) }}</text></view>
                            <view class="ls" @tap="handleVideoComment"><text class="iconfont icon-liuyan"></text><text class="num">{{item.replyNum}}</text></view>
                            <view class="ls"><text class="iconfont icon-share"></text><text class="num">{{item.shareNum}}</text></view>
                        </view>
                    </view>
                </view>
            </swiper-item>
        </block>
    </swiper>

    视频video不能覆盖的问题,使用nvue页面就可以解决view覆盖在video之上,更多关于nvue页面开发,可以参看:uniapp开发nvue页面

    项目中的聊天页面,功能效果这里就不详细介绍了,可参看这篇:uni-app聊天室|vue+uniapp仿微信聊天实例

    ◆ uniapp仿陌陌直播页面

    解决video不能覆盖问题,直播页面采用的是nvue编写

    <template>
    	<div class="nlv__container">
    		<view class="nlv_main">
    			<swiper class="nlv-swiper" :indicator-dots="false" :vertical="false" :current="videoIndex" @change="handleSlider">
    				<swiper-item v-for="(item, index) in vlist" :key="index">
    					<!-- //直播区 -->
    					<view class="nlv-playerbox">
    						<video :id="'myVideo' + index" :ref="'myVideo' + index" class="player-video" :src="item.src" :autoplay="index == videoIndex"
    						:controls="false" :loop="true" :show-center-play-btn="false" objectFit="fill" :style="{height: winHeight, width: winWidth}">
    						</video>
    						
    						<!-- //顶部 -->
    						<view class="nlv_topbar" :style="{ height: headerBarH, 'padding-top': statusBarH }">
    							...
    						</view>
    						
    						<!-- //排名信息 -->
    						<view class="nlv-rankbox" :style="{top: headerBarH}">
    							<view class="nlv-rkls">
    								<text class="rkitem">总排名{{item.allRank}}</text>
    								<text v-if="item.hourRank" class="rkitem">小时榜第{{item.hourRank}}名</text>
    							</view>
    							<text class="nlv-uid">U直播:{{item.uid}}</text>
    						</view>
    						
    						<!-- 底部信息栏 -->
    						<view class="nlv-footToolbar">
    							<!-- 送礼物提示 -->
    							...
    							
    							<!-- 滚动msg信息 -->
    							<scroll-view class="nlv-rollMsgPanel" scroll-y show-scrollbar="false">
    								<block v-for="(msgitem, msgidx) in item.rollmsg" :key="msgidx">
    									<view class="nlv-msglist"><view class="msg_bg"><text class="msg_name">{{msgitem.uname}}</text> <text class="msg_text">{{msgitem.content}}</text></view></view>
    								</block>
    							</scroll-view>
    							
    							<view class="nlv-infobox">
    								<view class="nlv_reply" @tap="handleRollMsg(index)"><text class="nlv_reply_text">说点什么...</text></view>
    								<view class="nlv_btntool">
    									<view class="btn-toolitem"><text class="iconfont i-btntool">&#xe61f;</text></view>
    									<view v-if="item.cart" class="btn-toolitem" @tap="handleLiveCart(index)"><text class="iconfont i-btntool" style="color: #ff4e0e;font-size: 20px;">&#xe61e;</text></view>
    									<view class="btn-toolitem btn-toolitem-cart" @tap="handleLiveGift"><text class="iconfont i-btntool">&#xe600;</text></view>
    									<view class="btn-toolitem"><text class="iconfont i-btntool">&#xe682;</text></view>
    									<view class="btn-toolitem"><text class="iconfont i-btntool">&#xe656;</text></view>
    								</view>
    							</view>
    						</view>
    					</view>
    				</swiper-item>
    			</swiper>
    		</view>
    		
    		<!-- 商品广告、滚动消息、礼物 -->
    		...
    	</div>
    </template>
    
    <script>
    	// 引入视频数据
    	const liveJson = require('../mock-live.js')
    	
    	// 引入商品广告、滚动消息json、礼物
    	import liveCart from './cp-live/cart.vue'
    	import rollMsg from './cp-live/rollmsg'
    	import liveGift from './cp-live/gift'
    	
    	
    	let timer = null
    	export default {
    		data() {
    			return {
    				statusBarH: '',
    				headerBarH: '',
    				winHeight: '',
    				winWidth: '',
    				
    				videoIndex: 0,
    				vlist: liveJson,
    				
    				clickNum: 0,	//记录点击次数
    			}
    		},
    		components: {
    			liveCart, rollMsg, liveGift
    		},
    		beforeCreate() {
    			// 引入iconfont字体
    			// #ifdef APP-PLUS
    			const domModule = weex.requireModule('dom')
    			domModule.addRule('fontFace', {
    				fontFamily: "nvueIcon",
    				'src': "url('../../../static/fonts/iconfont.ttf')"
    			});
    			// #endif
    		},
    		created() {
    			// 获取设备宽、高、状态栏高度
    			let _sH = uni.getSystemInfoSync().statusBarHeight
    			let _hH = _sH + 50
    			let _wH = uni.getSystemInfoSync().windowHeight
    			let _wW = uni.getSystemInfoSync().windowWidth
    			this.statusBarH = `${_sH}px`
    			this.headerBarH = `${_hH}px`
    			this.winHeight = `${_wH}px`
    			this.winWidth = `${_wW}px`
    		},
    		onLoad(option) {
    			// 获取列表页索引
    			this.videoIndex = parseInt(option.index)
    		},
    		onReady() {
    			this.init()
    		},
    		methods: {
    			init() {
    				this.videoContextList = []
    				for(var i = 0; i < this.vlist.length; i++) {
    					// this.videoContextList.push(uni.createVideoContext('myVideo' + i, this))
    					// #ifdef APP-PLUS-NVUE
    					this.videoContextList.push(this.$refs['myVideo' + i][0])
    					// #endif
    					// #ifndef APP-PLUS
    					this.videoContextList.push(uni.createVideoContext('myVideo' + i, this))
    					// #endif
    				}
    			},
    			
    			
    			// >>> 【视频播放处理模块】-------------------------------------
    			// 滑动切换
    			handleSlider(e) {
    				let curIndex = e.detail.current
    				if(this.videoIndex >= 0){
    					this.videoContextList[this.videoIndex].pause()
    					this.videoContextList[this.videoIndex].seek(0)
    				}
    				if(curIndex === this.videoIndex + 1) {
    					console.log('向左滑动')
    					this.videoContextList[this.videoIndex + 1].play()
    				}else if(curIndex === this.videoIndex - 1) {
    					console.log('向右滑动')
    					this.videoContextList[this.videoIndex - 1].play()
    				}
    				this.videoIndex = curIndex
    			},
    			// 播放
    			play(index) {
    				this.videoContextList[index].play()
    			},
    			// 暂停
    			pause(index) {
    				this.videoContextList[index].pause()
    			},
    			
    			...
    		}
    	}
    </script>

    至此,基于uniapp+vue直播项目就介绍这么多了,希望能够喜欢!!

    ◆ 最后附上react、RN项目实战案例

    RN仿微信聊天室:https://blog.csdn.net/yanxinyun1990/article/details/100573360

    react+redux网页版聊天实例:https://blog.csdn.net/yanxinyun1990/article/details/94143575

     

    展开全文
  • 什么是uni-app

    千次阅读 2019-03-04 22:33:09
    uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。 为什么要选择uni-appuni-app在跨端数量、扩展能力、性能体验、周边生态、学习成本、...
  • uni-app 介绍 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS、Android、微信小程序等多个平台,保证其正确运行并达到优秀体验。 uni-app 继承自 Vue.js...
  • 什么是uni-app?

    千次阅读 2019-09-10 23:10:47
    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。 即使不跨端,uni-app同时也是更好的小程序开发...
  • 看过我上篇博客【好用又不好用的uni-app踩坑记录(二)】的小伙伴应该知道我们的接口方面已经完成那么现在我们来开始开发,输入日期查看历史上的今天的小程序吧
  • uni-app之空格换行 实例符号总结

    万次阅读 2019-05-05 21:06:27
  • uni-app 页面跳转

    万次阅读 多人点赞 2020-08-04 15:47:12
    今天看Dcloud官网更新了个uni-app,据说一套代码三端发布(Android,iOS,微信小程序),果断一试。 uni.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。 ...
  • uni-app 官方组件使用

    万次阅读 2019-03-11 14:57:24
    最近公司项目需要,开始使用uni-app 期间遇到的问题我都会记录下来,也希望能够帮到更多人,有什么疑问或者文章有什么纰漏的地方还请指点出来 1、下载官方组件,打开编辑器点击左上角文件新建项目选择uni-app,下面...
  • 上次我记录一下如何使用**uni-app**创建项目,并讲解**uni-app**的结构。隔了一个星期在准备ACM就没有写,今天来介绍一下如何引入官方的css样式库。
  • uni-app背景图片的设置

    千次阅读 2019-06-18 16:01:43
    关于uni-app背景图片的设置 参考链接: https://blog.csdn.net/weixin_43343144/article/details/90300788
  • uni-app 获取屏幕宽高

    万次阅读 2019-09-11 17:56:05
    const { windowWidth, windowHeight } = uni.getSystemInfoSync();
  • uni-app使用常见问题总结

    万次阅读 2019-07-15 10:42:01
    HBuilderX提示eslint-vue插件未安装 第一次使用HBuilderX的时候,每次保存文件都会提示eslint-vue插件未安装。 解决方案:菜单栏——工具——插件安装——eslint-plugin-vue卸载重新安装即可 ...
  • uni-app中如何使用全局组件呢?其实很简单的,看下图 只需要看红色箭头的内容,组件内容该是什么就是什么 使用的时候,在需要使用的组件内直接用就行了 直接用就行了,不需要再import了 ...
  • Uni-App - 组件 - 表单组件

    千次阅读 2019-02-20 12:47:31
    文档链接 http://uniapp.dcloud.io/component/button   概述 包含表单及常用表单元素的知识点讲解。
1 2 3 4 5 ... 20
收藏数 19,615
精华内容 7,846
关键字:

uni-app