新星计划 uni-app 学习1

lsswear

已于 2023-05-29 10:37:52 修改

阅读量400

点赞数

分类专栏： uni-app 学习文章标签： uni-app 学习

于 2023-05-17 17:53:52 首次发布

本文链接：https://blog.csdn.net/lsswear/article/details/130718737

版权

uni-app 学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

活动地址：

教程地址：

白话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	解释
div	view
span、font	text
a	navigator
img	image
input	input	uniapp中仅作为输入框
其他表单空间	radio组件、checkbox组件、时间选择组件、日期选择组件、图片选择api、视频选择api、多媒体文件选择api、通用文件选择api	因为跨平台，组件和api有其兼容性。
form、bottun、label、textarea、canvas、video	保留
select	picker
iframe	web-view
li、ui	ulist组件
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>
//点击后提示框显示