返回顶部
首页 > 资讯 > 精选 >uniapp中怎么使用nvue
  • 430
分享到

uniapp中怎么使用nvue

2023-07-04 15:07:08 430人浏览 安东尼
摘要

这篇文章主要介绍“uniapp中怎么使用nVue”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“uniapp中怎么使用nvue”文章能帮助大家解决问题。开始创建第一个 nvue 页面。目录结构:ind

这篇文章主要介绍“uniapp中怎么使用nVue”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“uniapp中怎么使用nvue”文章能帮助大家解决问题。

开始创建第一个 nvue 页面。

目录结构:

uniapp中怎么使用nvue

index.nvue 代码如下:

<template><div>        <text>{{text}}</text>    </div></template><script>export default {data() {return {text: 'Hello World'}}}</script>

如此真机运行可能遇到如下错误:

uniapp中怎么使用nvue

造成这个问题的原因是 uni-app 项目里必须有一个 vue 的页面,新建一个 vue 页面然后重新运行就不会有问题了。

uniapp中怎么使用nvue

image 设置 border-radius

在 nvue 里面不能给 image 设置 border-radius,想要将矩形图案变为圆形需要在 image 外面包一层 div,代码如下:

<div >    <image  src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"></image></div>

设置真实像素

在 weex 的规范里只有一个长度单位即:px,屏幕总宽度为 750px,设置长度后,weex 引擎会根据手机屏幕的宽度动态计算出实际长度,类似于 uni-app 的 upx。

但是在实际开发过程中可能不想要这样动态的长度单位,此时可以使用 weex 1.x版本里面一个长度单位:wx。这个单位就是实际像素单位,虽然 weex 文档没有提及,但目前任然是可用的,当然随着 weex 的更新,wx 也可能会不再支持。

引入外部的 CSS

在 App.vue 里写的公用的样式在 nvue 里是不生效,多个 nvue 想要使用公用的样式,需要引入外部的 css。

由于 weex 的限制,不能在 style 节点下使用 @import "xxx.css" 这样的方式引入外部 css,需要使用如下方式引入 css:

<style src="@/common/test.css"></style><style>   .test {        color: #E96900;   }</style>

需要注意的是在 <style src="@/common/test.css"></style> 节点里写样式是不生效的。

使用 ttf 字体文件

在nvue或者weex中是不能直接在css中 通过 @font-face 这样的方式引入字体文件的,需要在js中使用 dom 模块引入字体文件,可参考 weex文档:

const domModule = weex.requireModule('dom');domModule.addRule('fontFace', {    'fontFamily': "iconfont2",    'src': "url('Http://at.alicdn.com/t/font_1469606063_76593.ttf')"});

vue 打开 nvue 时传递参数

由于 vue 打开 nvue 时不能在 url 后携带参数,只能使用 storage 的方式进行参数传递。

在 vue 页面打开 nvue

uni.setStorageSync('test', 'hello');uni.navigateTo({    url:"/pages/nvue/nvue"})

在 nvue 页面获得参数,在 created 里调用 uni-app 的 api 时需要延时一段时间才能调用成功(最新版 uni-app 框架已经修复此问题,不用延时也可以调用成功)。

<script>    export default {        created() {        console.log("nvue created!");            setTimeout(() => {                uni.getStorage({                key:'test',                    success: (res) => {                    console.log("获得上个页面传递的数据" + res.data)                    }                })            },200)        }    }</script>

仿微信朋友圈效果

在开发中,有个页面需要做到如微信朋友圈那样效果:整体列表为从上到下排列,每个列表为左右两列,左边为用户头像,右边消息内容。

在开发的时候,首先想到的是父元素使用 flex-direction: row; 让头像和内容,分别在左右展示。但是出了问题,内容区域的高度不能根据文字的长度而撑开;如果父元素使用上下排列,内容区域的高度就可以被文字所撑开。

出现问题的代码如下:

<template>    <div >        <div class="items">            <div class="headImg"></div>            <div class="rgtBox">                <text>上下排列时候可以撑开内容,上下排列时候可以撑开内容,上下排列时候可以撑开内容,上下排列时候可以撑开内容,上下排列时候可以撑开内容,上下排列时候可以撑开内容,上下排列时候可以撑开内容,上下排列时候可以撑开内容,上下排列时候可以撑开内容。</text>            </div>        </div>        <div class="items" >            <div class="headImg"></div>            <div class="rgtBox" >                <text>左右排列时候不可以撑开内容,左右排列时候不可以撑开内容,左右排列时候不可以撑开内容,左右排列时候不可以撑开内容,左右排列时候不可以撑开内容,左右排列时候不可以撑开内容,左右排列时候不可以撑开内容,左右排列时候不可以撑开内容,左右排列时候不可以撑开内容</text>            </div>        </div>    </div></template><script>    export default {    }</script><style>    .items {        background-color: #fff;        margin-bottom: 50px;    }    .headImg {        width: 100px;        height: 100px;        background-color: #555;    }    .rgtBox {        background-color: #fff;    }</style>

出现这个问题应该是 weex 的 bug,左边元素设置高度后,右边若不设置高度,其最大高度为左边元素的高度。解决办法就是将头像和内容均上下排列,然后设置内容区域的 margin-left、margin-top 和 min-height 就能达到类似的效果。

代码如下:

<template>    <div >        <div class="item">            <div class="headImg"></div>            <div class="rgtBox">                <text>一段短文本,一段短文本</text>            </div>        </div>        <div class="item">            <div class="headImg"></div>            <div class="rgtBox">                <text>这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本</text>            </div>        </div>    </div></template><script>    export default {}</script><style>    .item {        background-color: #fff;        margin-bottom: 50px;    }    .headImg {        width: 100px;        height: 100px;        background-color: #555;    }    .rgtBox {        width: 600px;        min-height: 100px;        margin-left: 130px;        margin-top: -100px;         background-color: #fff;    }</style>

关于“uniapp中怎么使用nvue”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网精选频道,小编每天都会为大家更新不同的知识点。

--结束END--

本文标题: uniapp中怎么使用nvue

本文链接: https://www.lsjlt.com/news/346214.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • uniapp中怎么使用nvue
    这篇文章主要介绍“uniapp中怎么使用nvue”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“uniapp中怎么使用nvue”文章能帮助大家解决问题。开始创建第一个 nvue 页面。目录结构:ind...
    99+
    2023-07-04
  • 如何在uniapp中使用nvue
    如何在uniapp中使用nvue?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。开始创建第一个 nvue 页面。目录结构:index.nvue 代码如下:<template...
    99+
    2023-06-15
  • uniapp中nvue设置px无效怎么办
    随着跨平台技术的不断发展,Uni-app作为一种基于Vue.js开发跨平台应用的框架,受到了越来越多开发者的关注和喜爱。其中,nvue作为一个特别在APP开发中广泛使用的组件,拥有着更高的性能表现以及更好的用户体验,同时在设计布局时也支持使...
    99+
    2023-05-14
  • 如何使用uniapp vue与nvue实现轮播图
    小编给大家分享一下如何使用uniapp vue与nvue实现轮播图,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!vue部分如下:<template...
    99+
    2023-06-22
  • Uniapp中colorui怎么使用
    Uniapp是一款基于Vue.js的开发框架,可以一次编写代码,将应用程序部署到多个平台,如Web、iOS、Android等。ColorUI是Uniapp框架中的一种UI框架,它提供了丰富的UI组件、模板和样式,使得开发者可以快速开发出美观...
    99+
    2023-05-22
  • Uniapp中怎么使用Echarts
    这篇文章主要介绍“Uniapp中怎么使用Echarts”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Uniapp中怎么使用Echarts”文章能帮助大家解决问题。一、视图层画图依赖于canvas标签...
    99+
    2023-07-04
  • uniapp中的easycom怎么使用
    这篇文章主要介绍了uniapp中的easycom怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇uniapp中的easycom怎么使用文章都会有所收获,下面我们一起来看看吧。什么是easycom?easy...
    99+
    2023-07-05
  • uniapp怎么使用stomp
    随着现代 Web 应用程序的发展,越来越多的开发人员正在使用 WebSocket 技术来进行实时通信。但是,如果你需要使用消息代理,特别是 ActiveMQ 或 RabbitMQ,那么 STOMP 协议是另一个值得考虑的选择。而在开发移动应...
    99+
    2023-05-22
  • uniapp怎么使用uview
    本文小编为大家详细介绍“uniapp怎么使用uview”,内容详细,步骤清晰,细节处理妥当,希望这篇“uniapp怎么使用uview”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。安装uview的安装方式有两种,一...
    99+
    2023-07-05
  • 怎么在uniapp项目中使用mqtt
    这篇文章将为大家详细讲解有关怎么在uniapp项目中使用mqtt,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、uniapp插件市场的参考插件  https://ext.dcloud.net.cn/pl...
    99+
    2023-06-15
  • 聊聊uniapp项目中怎么使用Axios
    Uniapp 是基于 Vue.js 的跨平台开发框架,可以同时构建 iOS、Android 和 Web 应用,而 Axios 是一款流行的基于 Promise 的 HTTP 库。虽然 Uniapp 可以使用 Vue.js 自带的 $http...
    99+
    2023-05-14
  • uniapp怎么使用audio标签
    随着移动互联网的发展,音频相关应用也越来越受到用户的欢迎,比如音乐播放器、语音聊天、语音识别等等。而使用uniapp开发这些音频应用是非常方便的,其中有一个重要的组件就是<audio>标签。本文将介绍uniapp中如何使用<...
    99+
    2023-05-14
  • uniapp地图组件map怎么使用
    这篇文章主要介绍了uniapp地图组件map怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇uniapp地图组件map怎么使用文章都会有所收获,下面我们一起来看看吧。首先引入map组件 <...
    99+
    2023-07-02
  • uniapp怎么使用h5网络请求
    近年来,随着移动端互联网的不断发展,越来越多的Web应用逐渐被移植至原生应用中。而随着移动端开发技术的不断更新,开发者们也在不断地追求更加高效、优秀的开发方式。其中,Uniapp作为一种多端统一开发框架,受到了越来越多的关注和喜爱。在uni...
    99+
    2023-05-14
  • 怎么使用uniapp开发小程序
    要使用uniapp开发小程序,你可以按照以下步骤进行操作: 首先,安装uni-app开发工具,官方提供了uni-app的开发工具...
    99+
    2024-04-09
    uniapp
  • uniapp中vuex的应用使用步骤
    目录一、vuex是什么?二、使用步骤1.引入2.state属性,主要功能为存储数据3. Getter属性,主要功能为计算筛选数据4. Mutation属性,Vuex中store数据改...
    99+
    2022-11-13
    uniapp使用vuex的作用 uniapp vuex uniapp怎么使用vuex
  • uniapp使用地图
    uniapp使用地图 使用内置地图查看定位 效果 实现 唤醒题图// 高德地图、腾讯、百度等地图中打开data(){ return{ latitude: 39.909,longitude: 116.39742,covers:...
    99+
    2023-08-17
    uni-app 微信小程序 小程序
  • uniapp分页器怎么用
    随着移动互联网的快速发展,移动端应用的开发越来越受到重视。而开发一款好的移动端应用,需要具备多种技术和框架的支持。其中,uniapp是一款优秀的开发框架,可以兼容多个平台,节省了开发者的时间和成本。在开发过程中,实现分页功能是非常常见的需求...
    99+
    2023-05-14
  • 如何在uniapp项目中使用mqtt
    目录一、uniapp插件市场的参考插件二、具体引入过程1.安装mqtt和uuid2.页面引入mqtt并调用3.运行结果由于要取一些实时数据并在手机app上展示,就想到用mqtt进行即...
    99+
    2024-04-02
  • Uniapp中如何使用谷歌地图
    随着移动应用的兴起,越来越多的开发者选择使用跨平台开发框架来编写应用程序。Uniapp是一种目前比较流行的跨平台开发框架,可以在Android、iOS、Web等多个平台上部署应用。同时,谷歌地图是一种广泛使用的地图应用程序,然而,许多开发者...
    99+
    2023-05-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作