您现在的位置是:首页 >技术交流 >新星计划 uni-app 学习1网站首页技术交流

新星计划 uni-app 学习1

lsswear 2024-06-17 10:32:17
简介新星计划 uni-app 学习1

活动地址:

教程地址:

白话uni-app | uni-app官网

每日一学Vue脚手架中基础的ref属性与原生id区别_ref和id区别_lqj_本人的博客-CSDN博客

每日一学vue2:组件复用(详细讲解)、mixin(混入)、mounted(){}钩子函数、plugins(自定义插件)_mixin mounted_lqj_本人的博客-CSDN博客

由于有vue2基础,这部分不再多写,B站可以找到对应教程。

一、基础

数据和页面采用前后分离。

由vue文件编译成js文件,uni-app有编译器、运行时的概念。

文件内代码架构遵循“vue单文件组件(SFC)规范”。

vue单文件组件(SFC)规范,解释如下:

<template>、<script> 和 <style>为顶级语言块,一个<template>下必须包含一个<view>,将页面作为一个特殊组件处理。

vue2中 <template>一个页面尽可有一个,vue3中可以有多个。

外部引用需要根据es6语法,用util.js导入。

<style>
	@import "./common/uni.css";//css导入
	
	.uni-hello-text{
		color:#7A7E83;
	}
</style>

<script>
@import "./common/uni.css";//css导入
import pageHead from './components/page-head.vue' //vue文件导入
import commonData from '../../commonData.js'//引入js
var util = require('../../../common/util.js');  //require这个js模块
var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法
</script>

//全局mian.js导入
import pageHead from './components/page-head.vue' //导入
Vue.component('page-head', pageHead) //注册。注册后在每个vue的page页面里可以直接使用<page-head></page-head>组件。

标签属于组件使用,比如引入一个vue文件,就可将其作为组件使用。

可以使用微信组件和内置组件。h5旧标签编译时会编译成新标签,但是编译H5时可能会混乱,所以推荐都是用新标签。

h5原组件uni-app解释
divview
span、fonttext
anavigator
imgimage
inputinputuniapp中仅作为输入框
其他表单空间radio组件、checkbox组件、时间选择组件、日期选择组件、图片选择api、视频选择api、多媒体文件选择api、通用文件选择api因为跨平台,组件和api有其兼容性。
form、bottun、label、textarea、canvas、video保留
selectpicker
iframeweb-view
li、uiulist组件
audio背景音乐api文档

 手机端常用标签,更多组件可以在插件市场中下载和安装,有收费和免费。

名称解释
scroll-view可区域滚动视图容器
swiper可滑动区域视图容器
icon图标
rich-text富文本框
progress进度条
slider滑块指示器
switch开关选择器
camera相机
live-player直播
map地图
cover-view可覆盖原生组件试图容器

 js的变化,分为运行环境变化、数据绑定模式变化、api变化3部分。

浏览器专用的window、document、navigator、location对象,包括cookie等存储,只有在浏览器中才有,app和小程序都不支持。

在uni-app的各个端中,除了h5端,其他端的js都运行在一个独立的v8引擎下,不是在浏览器中,所以浏览器的对象无法使用,依赖document的很多HTML的库,比如jquery无法使用。

app和小程序支持web-view组件,里面可以加载标准HTML,这种页面仍然支持浏览器专用对象。

dom操作改为mvvm,数据双向绑定,这是vue的特点。

uni-app中只支持标准的vue,不支持小程序的数据绑定语法。

在高级用法里,vue支持给组件设ref(引用标记),这类似于之前html中给一个dom元素设id,然后在js中也可以用this.$refs.xxx来获取。

alert、confirm改成uni.showmodel;ajax改成uni.request;local.storage改为uni.storage。uni-app的js api还有很多,但基本就是小程序的api,把wx.xxx改为uni.xxx即可。

css选择器有2个变化:*选择器不支持;元素选择器里没有body,改为了page。

单位推荐使用rpx,全端支持;布局推荐使用flex。

css里背景图和字体文件,尽量不要大于40k,因为会影响性能。在小程序端,如果要大于40k,需放到服务器侧远程引用或base64后引入,不能放到本地作为独立文件引用。

每个页面需要在page.js中注册,和小程序app.json类似,page节点下第一个页面就是首页。一般在/pages/xx的目录下。页面原生的导航栏和底部tabbar在pages.json中做配置。

小程序app.json被拆分,page.json处理页面管理,mainfest.json处理非页面管理;小程序app.js和app.wxss合并在app.vue中。

uniapp和小程序比较

二、vue部分内容

由于uni-app使用vue编写,其编译和编写时可使用vue特性做其他操作,所以写出来加深印象。

1、vue ref

ref与id以及对应的this.$refs.xxx与document.getElementById("xxx")区别如下:

  • <tempalte> 标签下效果相同
  • 组件中ref获取对象,而根据id获取的内容仅为字符串

ref使用方法

<template>
  <div id="app">
    <h1 ref="qqq">{{lqj}}</h1>
    <h1 id="qqq1">{{lqj}}</h1>
    <HelloWorld ref="msg"></HelloWorld>
    <HelloWorld id="msg1"></HelloWorld>
    <button @click="dianji">TEST</button>
  </div>
</template>
<script>
...
export default {
  name: 'App',
  data(){
    return{
      lqj:'test'
    }
  },
...
  methods:{
    dianji(){
      console.log(this.$refs.qqq)//<h1>test</h1>
      console.log(this.$refs.msg)//组件对象
      console.log(document.getElementById("msg1"))//含有标签的字符串
      console.log(document.getElementById("qqq1"))//<h1>test</h1>
    },

  }
}
...
</script>

2、组件使用

组件中props不可直接修改,需要用该组件中的data重新赋值的变量操作,同样该组件内修改不影响父组。

相同功能的需求,可以抽象成方法后放在公用文件夹下,使用的时候import。全局加载的话,组件内不用再加载。

生命周期函数mounted(),不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作,可以在 mounted 内部使用 vm.$nextTick

官网:API — Vue.js

mounted: function () {
  this.$nextTick(function () {
    // 仅在整个视图都被渲染之后才会运行的代码
  })
}

vue.prototype给原型添加方法。

//test.js 自定义的文件
export const lqj={
    install(Vue){
        Vue.prototype.hello = () =>{alert('nihao')}
    }
}
//main.js
import {lqj} from './test'
Vue.use(lqj)
// 创建vm
new Vue({
    render: h => h(App),
}).$mount('#app')
//组件
<template>
    <div>
         <button @click="dianji">点击我显示nihao</button>
    </div>
</template>
<script>
export default {
  methods:{
     dianji(){
        this.hello()
     }
  }
}
</script>
//点击后提示框显示

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。