uniapp开发app（uniapp开发抖音小程序）

今天给各位分享uniapp开发app的知识，其中也会对uniapp开发抖音小程序进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

uni-app开发一个小视频应用(二)

前情回顾uni-app开发一个小视频应用(一)上篇文章，我们已经实现了首页的头部导航栏组件、底部的tabBar导航栏组件、中间的视频列表组件以及视频列表组件中的视频播放组件，传入视频列表渲染后已经可以上下滑动进行视频切换和播放，接下来我们将完成首页的剩余部分，左侧信息栏组件、右侧图标栏组件，以及完善视频切换动画、播放控制等功能。

左侧的信息栏组件，主要分三块: 作者名、视频标题名、音乐名。这个左侧信息栏信息是和当前播放视频相关联的，所以应该在循环视频列表的时候，将左侧信息栏组件一起渲染出来，所以左侧信息栏组件应该加到swiper-item中。

// components/list-left.vue

// components/video-list.vue

右侧图标栏组件，主要分为: 头像图标(头像设置border-radius)、收藏图标(iconfont图标)、评论图标(iconfont图标)、分享图标(iconfont图标)、音乐图标(图片设置border-radius)，右侧图标栏组件设置一个固定宽度，然后让各种图标依次排列即可，如:

// components/list-right.vue

当点击头像下部的加号图标，可以对该用户进行关注，即隐藏加号图标，还有就是收藏爱心图标颜色切换，当点击收藏爱心图标，爱心图标变成红色，再次点击收藏爱心图标，爱心图标变回白色，这里先只处理颜色的变化，具体后台交互暂不处理。

// 在头像图标下方通过绝对定位添加一个加号图标，并定位到头像底部

所谓滑动播放，即向上滑动的时候，暂停当前播放视频并且播放下一个视频，向下滑动的时候，暂停当前播放视频，播放上一个视频，而这最关键的就是如何判断是向上滑动还是向下滑动。swiper组件给我们提供了一个change事件，我们可以监听这个change事件，拿到滑动完成后滑动到了第几页，即swiper-item的序号(从0开始)，然后与滑动前的当前page相比较，就可以知道是向上滑还是向下滑了。

判断好了是上滑还是下滑后，我们还需要对上滑和下滑作出正确的处理，我们需要能够拿到每个视频播放组件，然后调用视频播放组件上的相关方法对播放进行控制，这就是涉及到了父组件如何调用子组件上方法，父组件要想调用子组件上的方法，关键是父组件要能够拿到子组件对象，我们可以通过ref实现，因为每一个视频播放组件是video-list视频列表组件的一个子组件，所以我们可以在video-list视频列表组件中给每一个video-player视频播放组件添加上一个ref="player"，即可拿到对应的视频播放组件了。

// components/video-list.vue

要想实现单击视频播放组件，视频可以进行播放和暂停切换，那么我们需要给视频播放组件添加一个isPlay属性表示视频是否处于播放中，如果是播放中，那么点击就暂停，如果不是播放中，那么点击就播放，同时，由于uni-app不支持vue的dblclick事件的，所以我们还需要对单击和双击操作进行判断，我们需要定义一个变量用于记录用户点击次数，如果300ms内用户点击次数大于等于2，那么就是双击，否则就是单击，如:

双击的时候会向video-list父组件(视频列表组件)发送一个follow事件，video-list组件监听到follow事件后再通知list-right组件调用其方法让其爱心图标变红即可，如:

之前我们的视频播放组件接收了一个index属性，即当前视频对应的索引号，我们可以通过这个索引号判断当前视频是否是第一个，然后将其video组件的autoPlay设置为true即可自动播放。

至此，首页已经完成，效果图如下:

原文地址：

uni-app小程序开发踩坑记录

最近要从零开发一个跟后台管理系统对接的小程序，因为功能比较复杂，时间短，选择了比较火的uni-app，因为小程序出现的时间较短，各方面并不完善，开发过程中就是不断踩坑的过程，特此记录一小下。

uni-app虽然功能还不完善，但是插件市场里东西还是不少的，在搭建框架中因为需求要求借鉴了之前开发的PC端，所以有一些跟之前开发VUE相关的插件 ，可以提高开发效率，

插件：

坑：

1.覆盖原生组件，需要用cover-view容器，但是cover-view里可包含的标签有限，类似view等在真机调试时不显示，需全部替换成cover-view，且icon无法显示，可以用cover-imaga代替。

2.小程序和小程序之间的跳转（如腾讯云的人机滑动验证），跳转回来时需要进行操作，此时可以判断app.vue中的options，如果按小程序文档中来说当options.scene === 1038时是小程序跳回来的场景，但是部分手机跳回来是options.scene为1001，只能将这2种都作为跳转判断的条件。

3.小程序跳转回来app中的onshow有时不执行，这个原因暂未找到

4.在uniapp的H5版本 ，接入 腾讯云滑动验证 ，示例的点击滑动验证元素是通过dom操作的，但是无效，可能跟uniAPP不支持dom操作有关系，采用定制接入方法一，手动调用。

uniapp开发App，ios发布流程

       第一步：在  App Store Connect 里，点击【我的APP】，选择你的应用；

       第二步：添加新版本，然后把升级信息填完，选择刚刚上传的版本作为发布版本

1）关于版本信息：填写版本升级的描述；

2）app预览：让设计做两种尺寸的图，关于app的功能介绍；

3）然后就是构建版本了，选择刚刚上传的版本；

4）app审核信息备注：登录流程/主要功能流程;

5)  版本发布一般选择手动发布；

6）广告标识符通常选择【是】，标识复选框通常选后三个即可；

7)  最后提交审核就可以了。

混合开发之uni-app

uni-app App端内置weex渲染引擎，提供原生渲染能力

然而， Weex并不是一个前端框架 。实际上，前端框架仅仅是 Weex 的语法层或称之为 DSL (Domain-specific Language)，它们与原生渲染引擎是分离的。换句话说，Weex 并不依赖于特定的前端框架，随着前端技术的发展，Weex 也可以集成更多广泛使用的前端框架。

以往的 weex ，有个很大的问题是它只是一个高性能的渲染器，没有足够的API能力，使得开发时非常依赖原生工程师协作，开发者本来想节约成本，结果需要前端、iOS、Android 3拨人开发，适得其反。而 nvue 解决了这个大问题，让前端工程师可以直接开发完整 App，并提供原生插件的市场交易和云打包。这些组合方案，开发者切实的提高效率、降低成本。

如果你是web前端，不熟悉 weex，那么建议你仍然以使用 vue 为主，在App端某些 vue 表现不佳的场景下使用 nvue 作为强化补充：

uni-app App 端内置 HTML5+ 引擎，让 js 可以直接调用丰富的原生能力。

小程序及 H5 等平台是没有 HTML5+ 扩展规范的，因此在 uni-app 调用 HTML5+ 的扩展规范时，需要注意使用条件编译。否则运行到h5、小程序等平台会出现 plus is not defined错误。

在普通的 H5+ 项目中，需要使用 document.addEventListener 监听原生扩展的事件。

uni-app 中，没有 document。可以使用 plus.globalEvent.addEventListener 来实现（注意manifest中需开启新编译器，即自定义组件模式"usingComponents":true）。

同理，在 uni-app 中使用 Native.js 时，一些 Native.js 中对于原生事件的监听同样需要按照上面的方法去实现。

注意：旧编译器（非自定义组件模式）不支持 plus.globalEvent 这个对象。

uniapp开发app的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于uniapp开发抖音小程序、uniapp开发app的信息别忘了在本站进行查找喔。