nvue基础快速入门

news2025/1/23 17:38:51

一、uniapp连接手机

 

1、用USB让手机和电脑连接

2、点击3---8次手机版本信息打开开发者模式

3、在更多设置里面找到开发者选项

4、打开USB调试和允许手机可以USB安装,以及不要让手机只允许充电,要打开文件传输模式(在手机消息栏里面会有提示),并且打开手机的同步

二、在hbuilder里面设置成weex编译模式:

 nvue主要是提升app端的性能的,

nvue不兼容的东西 uni- app编译方式都拯救不了:例如css错误白屏什么的

nvue只会编译到app端,如果app端没找到nvue就会去找vue文件

如果是app打开的uniapp,那你必须创建这两个文件,否则不显示东西。

 三、使用nvue

小程序端会自动忽略nvue,所以不用再pages.json里面配置路径路由

1、文本内容一定要写在<text></text>标签里面(写div标签里面是文本内容就不会显示内容)

 2、生命周期:

 3、组件使用注意事项:

 只有list标签和scroll标签才能做到上下滑动屏幕

data里面的变量一定要写在 <text></text>里面才能有响应式

案例:

<template>
    <div>
        <list >
            <refresh style="height: 80px; " @refresh="refrash" @pullingdown="pullingdown" :display="show">
                <text>{{refreshtext}}</text>
            </refresh>
            <cell  v-for="i in 10" :key="i">
                {{i}}
            </cell>
            <header>
                <div style="height: 50px; background-color: black;"></div>
            </header>
            <cell  v-for="i in 100" :key="i">
                {{i}}
            </cell>
        </list>
            
        </div>
</template>

<script>
    export default {
        data() {
                    return {
                        text: 'Hello World',
                        show:"hide",
                        refreshtext:"下拉可以刷新"
                    }
                },
        methods:{
            //执行刷新
            refrash(e){
                this.show = "show"
                this.refreshtext = "正在刷新中。。。"
                setTimeout(()=>{
                    this.show = "hide"
                    this.refreshtext = "下拉可以刷新"
                },1000)
            },
            //判断下拉刷新状态
            pullingdown(e){
                if(e.pullingDistance > e.viewHeight){
                    this.refreshtext = "释放就能刷新楼"
                }else{
                    this.refreshtext = "下拉可以刷新"
                }
            }
        }
    }
</script>

<style>

</style>

4、nvue中css的注意事项:

 如果你要让两个div变成同一行,只能这样子做:(不能通过display:inline-block,因为这里面默认写了style="diaplsy:flex; flex-direction:column")

 如果4个div想要换行就在父元素上加flex-wrap:wrap;

 

不能和着写的意思是不能缩写,

这样子不生效。 一定要分开写,margin、paddin也是这样子

选择器只支持单类的意思是:对每个标签来说,想要使用class都只能给一个class类名,不允许

.firstnode div{ } 这样子是不对的,必须给div加类名 .firstnode .secondnode{ }

引入文件不能这样子:

 必须这样子写:(注意如果这个.css文件里面不符合规范,你引入进文件里面也用不了css的样式,里面报错了,没有提示)

5、weex组件浅析:

上拉刷新:建议使用这个方法(用在list标签里面,使用loadin标签和loading监听事件) 

建议不要使用list标签的loadmore事件来监听上拉事件,原因是上拉几次刷新以后,再下拉刷新就不会有下拉刷新的效果了,有bug

6、nvue和vue之间的通信(一):

2022.11.05 实验过以下代码,已经不能用了,nvue与vue通信直接使用uni.$emit()发送和uni.$on()接收就可以实现通信了

{

 问题:我在首页点击了加入购物车,我希望我点击购物车的时候会显示我加入的商品,这里就算是用到了通信。

 (1)给一个标签一个事件:

 (2) 写方法,发送的形式最好是对象格式,尽量少用单个数值。下图用到就是对象格式,里面包含的信息是数据data,来源from,除了这些还可以随意加数据。

 

(3)发送给App.vue文件监听,需要使用监听函数 onUniNViewMessage(e){}(然后通过App.vue文件下的uni.$emit方法传递给其他页面信息)

 (4)在接收页面编写接收方法uni.$on()

}

以上通信方法不可用了

以下可以

进行nvue与vue文件进行通信

{

发送方:

 接收方:

7、nvue和vue之间的通信(二):

应用场景:在首页点击发布按钮跳转到发布的page页里面,然后在发布page页点击发布后返回首页,同时发布页的内容发生变化。

(1)第一种方式(复杂)

发送方vue:

 

接收方nvue:

(2)第二种方式(简单)

发送方vue:

接收方nvue:

这里注意:这个data里面显示的{{vuemessage}}必须放在<text></text>标签里面,不然不会有响应式。

8、vue和nvue共享的变量和数据

、 (1)利用本地存储

存储: 

查看:

(2)使用globalData

在APP.vue里面创建:

修改全局变量的值:

获取全局变量的值 :

 总结,以上两种全局变量的设置,在获取的时候都只能获取一次(这种全局变量无法做到实时),只有放在以下地方的时候可以做到一直能够实时获取:

在需要获取全局变量的地方使用onShow生命周期来控制打开页面时候就做到修改值,vue和nvue页面都可以使用onShow,但是你会发现只有切换页面回来时候才会有数据发生变化,所以上面

种共享数据和变量的方式很难做到实时性(建议是用来做登录状态验证的)需要实时性的话就使用nvue和vue通信的方式来做

9、nvue使用uniapp接口:

在vue文件里面,导航栏接口是写在page.json里面的,nvue则写在生命周期里面

 

 如果有些接口调用不了,我们可以使用h5+的接口

以下的坑:

style="lines:1;"     可以让标签里面超过一行的字不显示

style="align-self:flex-end;"     可以让标签内的位置显示在同一行下半部分

style="align-self:flex-start;" 

在nvue里面的text标签里面不要用回车换行,这个回车换行会被写成一大堆空格键,显示会出问题

<text> 1111 <text>123</text>  <text>好像是不显示东西

nvue文件默认都是这样子的flex的布局,垂直方向的flex布局

 所以,如果我们使用就可以占满空间,也不用计算屏幕变化的大小来做改变了。

border-bottom-width: 5px;写不会在重新加载app的时候出现都有底色的情况。border-bottom: 5px;这样子重新进入app的时候会出bug,设置边框颜色了但是最开始加载的时候还是黑色。

有一些函数或方法已经被换掉成别的东西了,在官网查的时候一定要看清楚这个函数或方法被改成什么了。以前能那样用的,过了一段时间可能就得换个方法用了。比如onNavigationBarSearchInputClicked这个本来是在create生命周期里面用uni. 调用的,但是现在后来改成和create一样的生命周期一样的等级使用了:

以前:现在:

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408157.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

前后端交互流程

1.前后端交互: 前后端交互&#xff0c;也可以理解为数据交互。前端需要获取&#xff08;GET&#xff09;的数据获取上传&#xff08;POST&#xff09;的数据&#xff0c;要通过 请求 来完成的&#xff0c;前端发送请求&#xff0c;后端接收到请求后&#xff0c;便进行对数据库…

若依移动端Ruoyi-App——引入uview2.0开发项目

1. 背景&#xff1a; 若依移动端Ruoyi-App只有个人中心&#xff0c;登录&#xff0c;其他模块都是建设中&#xff0c;因uniapp本身样式不够美观&#xff0c;所以本文基于ruoyi移动端引入uview2.0&#xff0c;实现基本功能。 RuoYi-App: &#x1f389; RuoYi APP 移动端框架&am…

element plus 的表单form使用详解

首先在你需要使用form组件的Vue文件里引入 import type { FormInstance } from element-plus 拿这一张图解释一下属性&#xff0c;第一项ref"ruleFormRef",&#xff0c;ruleFormRef就是我们定义并使用各个属性的必要条件&#xff0c;const ruleFormRef ref<Form…

vue 项目启动失败 ‘webpack-dev-server‘ 不是内部或外部命令,也不是可运行的程序

报错描述 我使用命令 npm run dev 启动项目 报了下面的错。 webpack-dev-server 不是内部或外部命令&#xff0c;也不是可运行的程序 > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js webpack-dev-server 不是内部或外部命令&#xff0c;也不…

Vue3 框架使用报错以及解决办法

1、TypeError: Failed to fetch dynamically imported module: 引入组件时&#xff0c;没有添加.vue后缀 或者引入的组建没有被使用 2、SyntaxError: The requested module /node_modules/_schart.js3.0.4schart.js/lib/sChart.min.js?v0343bb8c does not provide an export…

前后端分离项目,如何解决跨域问题?

跨域问题是前后端分离项目中非常常见的一个问题&#xff0c;举例来说&#xff0c;编程猫&#xff08;codingmore&#xff09;学习网站的前端服务跑在 8080 端口下&#xff0c;后端服务跑在 9002 端口下&#xff0c;那么前端在请求后端接口的时候就会出现跨域问题。 403 Forbidd…

在uniapp中获取可视区域的高度(uni.getSystemInfo)

前言在实际开发中我们会遇到不确定高度的情况&#xff0c;那么在uniapp中我们如何获取区域的高度呐&#xff1f;一起来看看吧使用到的&#xff1a;uni-app提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息uni.getSystemInfo(OBJECT)异步获取系…

Google Chrome装到D盘的方法

1. 下载chrome安装包 Google Chrome 网络浏览器 2. 创建自定义安装目录 D:\Program Files\Google\Chrome 3. 创建个人数据目录 D:\Program Files\Google\PersonData 4. 创建chrome浏览器的默认安装目录&#xff08;目录中的文件删除掉&#xff09; C:\Program Files\Google …

手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】

???作者&#xff1a;bug菌 博客&#xff1a;CSDN、掘金等 ??公众号&#xff1a;猿圈奇妙屋 ??特别声明&#xff1a;原创不易&#xff0c;转载请附上原文出处链接和本文声明&#xff0c;谢谢配合。 ??版权声明&#xff1a;文章里可能部分文字或者图片来源于互联网或者百…

React中CodeMirror插件的使用及封装

目录 一、CodeMirror是什么 二、React中CodeMirror的基本使用介绍 &#xff08;一&#xff09;引入CodeMirror 1. 安装CodeMirror插件 2.引入 CodeMirror 插件 &#xff08;二&#xff09;引入文件配置 &#xff08;三&#xff09;关键属性解读 1.value 2.mode 3.the…

Vue3 从零开始 搭建 简单 干净 的 后台管理系统

前言&#xff1a; 记得自己大二时&#xff08;2017年&#xff09;&#xff0c;想搭建一个后台管理系统&#xff0c;当时头脑想的是用原生JS写的。我肯定干不出来&#xff0c;后来乖乖用了当时比较流行的layui&#xff0c;就算现在也真的难以做下去。 这几天&#xff0c;有了需…

微信小程序如何将表单的数据发送到数据库,云开发,并实现将数据渲染到页面中

一、表单数据发送到数据库 1. 利用bindsubmit来写一个函数 <form bindsubmit"bindSubmit"><view class"form_border"><label>收件人名称:</label><input name"userName" auto-focus placeholder" 请填写收件…

【Java编程指南】语法基础

目录 一、前言 二、关键字 三、数据类型 1.存储单元 2.存储范围 3.类型转换 四、常量 五、变量 六、标识符 七、注释 一、前言 学习目标 1&#xff1a;熟悉Java的关键字、数据类型&#xff08;包括范围&#xff09;、常量与变量的区别 学习目标 2&#xff1a;类型转…

Java项目中利用飞书自定义机器人Webhook向飞书群推送告警通知

今天来看一下如何在Java项目中利用飞书的自定义机器人Webhook向飞书群推送告警通知 一、功能场景 企业存在给特定群组自动推送消息的需求&#xff0c;比如&#xff1a;监控报警推送、销售线索推送、运营内容推送等。 你可以在群聊中添加一个自定义机器人&#xff0c;通…

vue-print 实现打印功能

目录一、安装1. Vue22. Vue3二、基本使用1. 直接打印页面HTML2. 个性化设置3. 打印URL三、API一、安装 1. Vue2 npm install vue-print-nb --saveimport Print from vue-print-nb // Global instruction Vue.use(Print);//or// Local instruction import print from vue-pri…

选 择 器

目录 1、三种基本选择器&#xff08;重要&#xff09; &#xff08;1&#xff09;基本选择器 &#xff08;2&#xff09;类选择器 class &#xff08;3&#xff09;id选择器 2、层次选择器 &#xff08;1&#xff09;后代选择器 &#xff08;2&#xff09;子选择器 &am…

【JavaScript速成之路】JavaScript内置对象--数组对象

&#x1f4c3;个人主页&#xff1a;「小杨」的csdn博客 &#x1f525;系列专栏&#xff1a;【JavaScript速成之路】 &#x1f433;希望大家多多支持&#x1f970;一起进步呀&#xff01; 文章目录前言数组对象1&#xff0c;数组类型检测2&#xff0c;数组元素增删3&#xff0c;…

【面试题】面试官:如果后端给你 1w 条数据,你如何做展示?

最近一位朋友参加阿b的面试&#xff0c;然后面试官问了她这个问题&#xff0c;我问她咋写的&#xff0c;她一脸淡定的说&#xff1a;“虚拟列表。”大厂面试题分享 面试题库前后端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★地址&#xff1a;前端面…

canvas简易使用教程

简介:<canvas> </canvas> 是 HTML5 新增的&#xff0c;一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。提供了一个通过JavaScript 和 HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑(如照片集)以及…

FilterChain(过滤器链)详解

在一个 Web 应用程序中可以注册多个 Filter 程序&#xff0c;每个 Filter 程序都可以针对某一个 URL 进行拦截。如果多个 Filter 程序都对同一个 URL 进行拦截&#xff0c;那么这些 Filter 就会组成一个Filter 链&#xff08;也称过滤器链&#xff09;。 Filter 链用 FilterCh…