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
402 0
|
Web App开发 移动开发 JavaScript
|
移动开发 Java weex
Weex初探--从安装到运行首个app
好多人说Weex跨平台不错,一直要推荐我玩一下,我就不信了,来安装玩一下试试效果。实践出真知!安装过程各种坑,工具太多了,太麻烦了,差点放弃(还好坚持下来呢)。
2291 0
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
679 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
740 1
|
1天前
|
供应链 搜索推荐 API
1688APP原数据API接口的开发、应用与收益(一篇文章全明白)
1688作为全球知名的B2B电商平台,通过开放的原数据API接口,为开发者提供了丰富的数据资源,涵盖商品信息、交易数据、店铺信息、物流信息和用户信息等。本文将深入探讨1688 APP原数据API接口的开发、应用及其带来的商业收益,包括提升流量、优化库存管理、增强用户体验等方面。
19 6
|
2天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
22 3
|
8天前
|
移动开发 小程序 PHP
校园圈子论坛系统采取的PHP语音和uni账号开发的小程序APP公众号H5是否只需要4800元?是的,就是只需要4800元
关于校园圈子论坛系统采用PHP语言和uni-app开发的小程序、APP、公众号和H5是否仅需4800元这个问题,实际上很难给出一个确定的答案。这个价格可能受到多种因素的影响
39 8
|
4天前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。

热门文章

最新文章

下一篇
DataWorks