uni-app进阶之Weex/nvue【day6】

简介: uni-app进阶之Weex/nvue【day6】

Weex/nvue

在这里插入图片描述

Nvue CSS只支持flex layout,这是WebView CSS语法的子集。这是因为操作系统本机布局不支持flex以外的web布局。当然,flex足以安排各种页面,但需要调整写作方法。
Nvue CSS只支持简单的类,对选择器的支持较少。
类仅在绑定时支持数组语法。
nvue中不支持某些web CSS属性,例如背景图像。但是,可以使用图像组件和层次结构来实现类似于web中的背景效果。因为本地开发中没有web这样的背景地图概念

纯原生渲染模式

在应用程序方面,uni app支持混合Vue页面和nvue页面,并支持相互跳转。还支持纯nvue本机渲染。
启用纯本机渲染模式可以减少应用程序端的包体积并减少内存使用。因为WebView渲染模式的相关模块将被删除。
在JSON源代码视图的“app plus”下的manifest配置“renderer”:“native”,这意味着在应用程序端启用纯本机渲染模式。页面JSON注册的Vue页面将被忽略,Vue组件也将由本机呈现引擎呈现。
如果未指定此值,则默认情况下不会启动纯本机渲染。

{    
    // ...    
     /* App平台特有配置 */    
    "app-plus": {    
        "renderer": "native", //App端纯原生渲染模式
    }    
}
weex编译模式 uni-app编译模式
平台 仅App 所有端,包含小程序和H5
组件 weex组件如div uni-app组件如view
生命周期 只支持weex生命周期 支持所有uni-app生命周期
JS API weex API、uni API、Plus API weex API、uni API、Plus API
单位 750px是屏幕宽度,wx是固定像素单位 750rpx是屏幕宽度,px是固定像素单位
全局样式 手动引入 app.vue的样式即为全局样式
页面滚动 必须给页面套或组件 默认支持页面滚动

页面滚动

本机开发没有页面滚动的概念。页面内容高于屏幕高度时不会自动滚动。只有一些组件可以滚动(列表、瀑布、滚动视图/滚动器)。要滚动内容,需要在可滚动组件下进行设置。这不符合前端开发的习惯。因此,当nvue编译为uni app模式时,会自动为页面的外层设置一个滚动条。如果页面内容过高,它将自动滚动。(组件不会嵌套,带有回收列表的页面也不会嵌套)。您可以设置为不自动设置。

{
  "path": "",
  "style": {
    "disableScroll": true // 不嵌套 scroller
  }
}
<template>
    <div @click="test">
        <text>点击页面发送数据</text>
    </div>
</template>
<script>
    export default {
        methods: {
            test(e) {
                uni.postMessage({test: "数据",value:"数据"});
            }
        }
    }
</script>

在Vue webview中使用plus。Postmessagetouninview(数据,nvueid)发送消息。数据为JSON格式(键值对的值仅支持字符串),nvueid是nvue所在的WebView的ID,WebView的ID获取方法参考:$getappwebview()。
参考nvue中的globalevent模块以侦听plusmessage事件,如下所示:

const globalEvent = weex.requireModule('globalEvent');
globalEvent.addEventListener("plusMessage", e => {
  console.log(e.data);//得到数据
});
相关文章
|
移动开发 前端开发 JavaScript
【整理】Native、Web App、Hybrid、React Native 和 Weex
【整理】Native、Web App、Hybrid、React Native 和 Weex
380 0
|
Web App开发 移动开发 JavaScript
|
移动开发 Java weex
Weex初探--从安装到运行首个app
好多人说Weex跨平台不错,一直要推荐我玩一下,我就不信了,来安装玩一下试试效果。实践出真知!安装过程各种坑,工具太多了,太麻烦了,差点放弃(还好坚持下来呢)。
2282 0
|
19天前
|
Web App开发 Java 视频直播
FFmpeg开发笔记(四十九)助您在毕业设计中脱颖而出的几个流行APP
对于软件、计算机等专业的毕业生,毕业设计需实现实用软件或APP。新颖的设计应结合最新技术,如5G时代的音视频技术。示例包括: 1. **短视频分享APP**: 集成FFmpeg实现视频剪辑功能,如添加字幕、转场特效等。 2. **电商购物APP**: 具备直播带货功能,使用RTMP/SRT协议支持流畅直播体验。 3. **同城生活APP**: 引入WebRTC技术实现可信的视频通话功能。这些应用不仅实用,还能展示开发者紧跟技术潮流的能力。
50 4
FFmpeg开发笔记(四十九)助您在毕业设计中脱颖而出的几个流行APP
|
13天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
37 3
|
1月前
|
Web App开发 Android开发
FFmpeg开发笔记(四十六)利用SRT协议构建手机APP的直播Demo
实时数据传输在互联网中至关重要,不仅支持即时通讯如QQ、微信的文字与图片传输,还包括音视频通信。一对一通信常采用WebRTC技术,如《Android Studio开发实战》中的App集成示例;而一对多的在线直播则需部署独立的流媒体服务器,使用如SRT等协议。SRT因其优越的直播质量正逐渐成为主流。本文档概述了SRT协议的使用,包括通过OBS Studio和SRT Streamer进行SRT直播推流的方法,并展示了推流与拉流的成功实例。更多细节参见《FFmpeg开发实战》一书。
38 1
FFmpeg开发笔记(四十六)利用SRT协议构建手机APP的直播Demo
|
1月前
|
Web App开发 5G Linux
FFmpeg开发笔记(四十四)毕业设计可做的几个拉满颜值的音视频APP
一年一度的毕业季来临,计算机专业的毕业设计尤为重要,不仅关乎学业评价还积累实战经验。选择紧跟5G技术趋势的音视频APP作为课题极具吸引力。这里推荐三类应用:一是融合WebRTC技术实现视频通话的即时通信APP;二是具备在线直播功能的短视频分享平台,涉及RTMP/SRT等直播技术;三是具有自定义动画特效及卡拉OK歌词字幕功能的视频剪辑工具。这些项目不仅技术含量高,也符合市场需求,是毕业设计的理想选择。
60 6
FFmpeg开发笔记(四十四)毕业设计可做的几个拉满颜值的音视频APP
|
1月前
|
编解码 Java Android开发
FFmpeg开发笔记(四十五)使用SRT Streamer开启APP直播推流
​SRT Streamer是一个安卓手机端的开源SRT协议直播推流框架,可用于RTMP直播和SRT直播。SRT Streamer支持的视频编码包括H264、H265等等,支持的音频编码包括AAC、OPUS等等,可谓功能强大的APP直播框架。另一款APP直播框架RTMP Streamer支持RTMP直播和RTSP直播,不支持SRT协议的直播。而本文讲述的SRT Streamer支持RTMP直播和SRT直播,不支持RTSP协议的直播。有关RTMP Streamer的说明参见之前的文章《使用RTMP Streamer开启APP直播推流》,下面介绍如何使用SRT Streamer开启手机直播。
53 4
FFmpeg开发笔记(四十五)使用SRT Streamer开启APP直播推流
|
26天前
|
IDE Java 开发工具
探索安卓开发之旅:打造你的第一款App
【8月更文挑战第24天】在这篇文章中,我们将一起踏上激动人心的安卓开发之旅。不论你是编程新手还是希望扩展技能的老手,本文将为你提供一份详尽指南,帮助你理解安卓开发的基础知识并实现你的第一个应用程序。从搭建开发环境到编写“Hello World”,每一步都将用浅显易懂的语言进行解释。那么,让我们开始吧!

热门文章

最新文章