Uniapp 开发入门实记

雅伊

2023-10-07 帮助4人

前言

今天是端午啦，也是我 6月更文的第25天啦

在这先祝各位端午安康，在放假之余还是不能松懈坚持完成本月的挑战

但是时间有限就只能吃库存的老本了，旧文首发毕竟整理整理还能用，哈哈哈哈 😂

在介绍了那么多天的 vue 相关原理原理之后我相信大家都会有所收获

虽然学习的成果可能不会立竿见影，但是它是在不断积累之中逐渐显现的。

那么今天就来介绍一下 vue 的衍生品 -- Uniapp

Uniapp 是一款基于 Vue.js 的跨平台开发框架，它可以通过 Vue.js 的语法来开发多种平台的应用，包括 H5、小程序、App 等。

前置准备

rpx 响应式单位

rpx 的全称是 responsive pixel 是一种响应式的长度单位，可以根据屏幕宽度进行自适应缩放，因此在开发小程序和 H5 等需要适配不同屏幕尺寸的应用时非常有用。

它与 px 的区别在于 px 是固定长度单位，而 rpx 是相对长度单位。在使用 rpx 进行布局时，根据设计稿的尺寸使用具体的像素值，然后将其转换为对应的 rpx 值。

rpx 与 px 之间的换算公式： 1rpx = (屏幕宽度 / 750) px。

其中 750 是移动端设计宽度时的标准宽度，移动端的设计标准是 750 × 1334 ，但是这并不代表所有设备的屏幕宽度都是 750 px。

根据不同设备的屏幕宽度可能会有所不同，因此在进行 rpx 和 px 的转换时，需要先获取当前设备的屏幕宽度，然后根据公式与设计稿的长度进行换算

例如，如果设计稿中某个元素的宽度为 100px，而屏幕宽度为 750px，屏幕的标准为750px 则该元素的宽度应该为 750/750*100=100 rpx

路由 & 导航

navigator: 保留当前页面，跳转到应用内的某个页面，只能跳转到非 tabBar 页面 ( 头部会有返回按钮)

redict：关闭旧的页面，在新页面打开，仍无法跳转到 tabBar 的页面

relaunch：关闭所有页面，打开到应用内的某个页面，能打开 tabBar设置的页面且支持携带参数

switch: 不能携带参数

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

style 及 class 的动态绑定

在将 v-bind 用于 class 和 style 时，Vue.js 还做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

style

<view :style="'backgroundColor: bule;border: 1px solid red'"> </view>

<view :style="{backgroundColor: bgColor; fontSize: fontSize   'px'}"> </view>


data() {
  return {
    bgColor: 'yellow',
    fontSize: 20
  }

class

<!-- 对象的状态判断 -->
<view :class="{myClass: isFlag }"> </view>

<!-- 三元表达式 -->
<view :class="{ isFlag? 'myClass':'' }"> </view>

<!-- 数组写法 -->
<view class="static" v-bind:class="[isFlag ? myClass : '', errorClass]">222</view><!-- 三元表达式 -->


data() {
  return {
    isFlag: true，
    errorClass: 'text-danger',
  }
}


  
.myClass {
  color: red
}

百分比有效果

如果想使用百分比设置元素的高度或宽度，需要先设置页面的高度。因为在浏览器中，百分比的计算依赖于元素所在的容器的高度和宽度。

如果没有设置容器的高度和宽度，浏览器无法计算出百分比所对应的像素值。


  /*每个页面公共css */
  /* 百分比想有效果，那么必须外层父元素设置了高度。 */
  page {
    height: 100%;
  }

必须在每个页面设置 height: 100%,

v-if 和 v-show 区别

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换，来控制元素的显示和隐藏。

注意

不推荐同时使用 v-if 和 v-for。
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

v-for

在 v-for 里使用数组

v-for 指令可以实现基于一个数组来渲染一个列表。元素、索引

<!-- array 中 item 的某个 property -->
<view v-for="(item, index) in items" :key="item.id" >
  {{ index }} - {{ item.message }}
</view>

  date() {
    return {
      items: [
        { id: 1, message: 'Foo' },
        { id: 2, message: 'Bar' }
      ]
    }
  }

在 v-for 里使用对象

也可以用 v-for 来遍历一个对象的 property。元素、键名、索引

<view v-for="(value, name, index) in object" >
  {{ index }}. {{ name }}: {{ value }}
</view>

  data() {
    return {
      object: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2020-04-10'
      }
    }
  }

在组件上使用 v-for

在自定义组件上，你可以像在任何普通元素上一样使用 v-for , 但组件上的 key 是必须的

<my-component v-for="item in items" :key="item.id"></my-component>

在v-for 中需要使用 :key 来指定列表中项目的唯一的标识符。

key的作用

主要是为了高效的更新虛拟DOM，在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能。

使用 v-for 循环 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
使用 v-for 循环中 item 本身，这时需要 item 本身是一个唯一的字符串或者数字

vue 中在进行列表渲染的时候，会默认遵守就地复用策略:

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

另外 vue 中在使用相同标签名元素的过渡切换时，也会使用到 key 属性，其目的也是为了让 vue 可以区分它们，否则 vue 只会替换其内部属性而不会触发过渡效果。

注意事项

在H5平台使用 v-for 循环整数时和其他平台存在差异，如 v-for="(item, index) in 10" 中，在H5平台 item 从 1 开始，其他平台 item 从 0 开始，可使用第二个参数 index 来保持一致。
在非H5平台循环对象时不支持第三个参数，如 v-for="(value, name, index) in object" 中，index 参数是不支持的。
小程序端数据为差量更新方式，由于小程序不支持删除对象属性，使用的设置值为 null 的方式替代，导致遍历时可能出现不符合预期的情况，需要自行过滤一下值为 null 的数据。

双向绑定

v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。

radio 不支持双向绑定只能用 :value @change

v-model 本质是语法糖，它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected 的初始值而是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

uniapp 表单组件

select 标签用 picker 组件进行代替
表单元素 radio 用 radio-group 组件进行代替

<template>
  <view>
   <form @submit="onSubmit">
    <picker class="input" @change="bindPickerChange" :value="index" :range="array" name="select">
      <view class="picker">
        当前选择：{{array[index]}}
      </view>
    </picker>

    <radio-group class="radio-group input" @change="radioChange" name="country">
      <label class="radio" v-for="(item, index) in items" :key="item.name">
        <radio :value="item.name" :checked="item.checked" /> {{item.value}}
      </label>
    </radio-group>
    <view>
      <button type="primary" form-type="submit"> 提交</button>
    </view>
  </form>
    {{ obj }}
  </view>
</template>
<script>
  export default {
    data() {
      return {
        index: 0,
        array: ['A', 'B', 'C'],
        items: [{
            name: 'USA',
            value: '美国'
        },
        {
            name: 'CHN',
            value: '中国',
            checked: 'true'
        },
        {
            name: 'BRA',
            value: '巴西'
        },
        {
            name: 'JPN',
            value: '日本'
        },
        {
            name: 'ENG',
            value: '英国'
        },
        {
            name: 'TUR',
            value: '法国'
        }
        ],
        country: '',
        obj: {}
      }
    },
    methods: {
      bindPickerChange(e) {
        console.log(e)
        this.index = e.detail.value
      },
      radioChange(e) {
          console.log('radio发生change事件，携带value值为：', e.target.value)
          this.country = e.target.value
      },
      onSubmit(e) {
        console.log(e)
        this.obj = e.detail.value
        this.obj.select = this.array[this.index]
      }
    }
  }
</script>
<style scoped lang="scss">
.input{
  padding: 20rpx;
  margin: 30rpx;
}
</style>

radio选中与取消选中时都会触发 radio-group 上的change事件

computed 计算属性

计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。

每一个计算属性都包含一个 getter 和一个 setter ，默认是利用 getter 来读取。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

计算属性的 getter

computed: {
    // 计算属性的 getter
    reversedMessage(){
      return this.message.split('').reverse().join('')
    }
  }

计算属性可以依赖多个 Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。

计算属性的 setter 在你需要时也可以提供一个 setter 函数，当手动修改计算属性的值时，就会触发 setter 函数，执行一些自定义的操作。

<template>
    <view>
        <view>{{ fullName }}</view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            firstName: 'Foo',
            lastName: 'Bar'
        }
    },
    computed: {
        fullName: {
            // getter
            get(){
                return this.firstName   ' '   this.lastName
            },
            // setter
            set(newValue){
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
            }
        }
    }
}
</script>

现在再运行 fullName = 'John Doe' 时，setter 会被调用，firstName 和 lastName 也会相应地被更新。

getter与setter区别

get：通过设置get方法可以得到fullName的新值。
set：通过set的方法，设置一个值（newValue）来改变fullName相关联的值，引起fullName重新的计算，相应的页面上fullName也会发生改变成新的内容。

watch

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动： watch

类型：{ [key: string]: string | Function | Object | Array }

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

Vue 实例将会在实例化时调用 $watch() ，遍历 watch 对象的每一个 property

watch监听的方式

示例一：

watch: {
    // 使用watch来响应数据的变化
    word(newVal, oldVal) {
        console.log('最新值是：' newVal,"原来的值是："  oldVal);
    }
},

示例二：

<script>
export default {
    data() {
        return {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
            e: {
                f: {
                    g: 5
                }
            }
        }
    },
    watch: {
        a: function(val, oldVal) {
                console.log('new: %s, old: %s', val, oldVal)
        },
        // 方法名
        b: 'someMethod',
        // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
        c: {
                handler: function(val, oldVal) { /* ... */ },
                deep: true
        },
        // 该回调将会在侦听开始之后被立即调用
        d: {
                handler: 'someMethod',
                immediate: true
        },
        // 你可以传入回调数组，它们会被逐一调用
        e: [
                'handle1',
                function handle2(val, oldVal) { /* ... */ },
                {
                        handler: function handle3(val, oldVal) { /* ... */ },
                        /* ... */
                }
        ],
        // watch vm.e.f's value: {g: 5}
        'e.f': function(val, oldVal) { /* ... */ }
    }
}
</script>

uniapp中引入组件

通过uniapp 的 easycom 将自动引入组件，只要组件安装在项目的 components 目录下，并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用。

easycom是自动开启的，不需要手动开启，有需求时可以在 pages.json 的 easycom 节点进行个性化设置
不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。

组件传值

单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。如果在子组件内部修改了prop，vue会在浏览器的控制台发出警告。

可以在子组件中定义一个本地的 data 接收父组件传来 prop 作为他的初始值，

// 子组件中接收 父组件的 title，并将其作为data 的初始值
<template>
  <view>
    <!-- 我是子组件componentA -->
    <view>{{myTitle}}</view>
  </view>
</template>
<script>
export default {
  props: ['title'],
  data() {
    return {
      myTitle:this.title
    }
  }
}
</script>

也可以定义一个计算属性来使用 prop值

<template>
  <view>
    <!-- 我是子组件componentA -->
    <view>{{normalizedSize}}</view>
  </view>
</template>

<script>
  export default {
    props: ['size'],
    computed: {
      normalizedSize: function () {
        return this.size.toLowerCase()
      }
    }
  }
</script>

ref

被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。

因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们，它们还不存在！$refs 也不是响应式的，因此你不应该用它在模板中做数据绑定。

<!-- index 父组件页面 -->
<template>
    <view>
        <base-input ref="usernameInput"></base-input>
        <button type="default" @click="getFocus">获取焦点</button> 
    </view>
</template>
<script>
    export default {
        methods:{
            getFocus(){
                //通过组件定义的ref调用focus方法
                this.$refs.usernameInput.focus()
            }
        }
    }
</script>

ref 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；
如果用在子组件上，引用就指向组件实例：

<!-- 非H5端不支持通过this.$refs.content来获取view实例 -->
<view ref="content">hello</view>

<!-- 支持通过this.$refs.child来获取child-component实例 -->
<child-component ref="child"></child-component>

注意非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text）

uniapp 中的触发事件

// 事件映射表，左侧为 WEB 事件，右侧为 ``uni-app`` 对应事件
{
    click: 'tap',
    touchstart: 'touchstart',
    touchmove: 'touchmove',
    touchcancel: 'touchcancel',
    touchend: 'touchend',
    tap: 'tap',
    longtap: 'longtap', //推荐使用longpress代替
    input: 'input',
    change: 'change',
    submit: 'submit',
    blur: 'blur',
    focus: 'focus',
    reset: 'reset',
    confirm: 'confirm',
    columnchange: 'columnchange',
    linechange: 'linechange',
    error: 'error',
    scrolltoupper: 'scrolltoupper',
    scrolltolower: 'scrolltolower',
    scroll: 'scroll'
}

事件修饰符

Vue框架中的事件修饰符

修饰符	含义
.stop	阻止冒泡，相当于调用了event.stopPropagation()方法
.prevent	阻止默认事件
.capture	添加事件监听器时使用事件捕获模式
.self	只当事件在该元素本身触发事件
.once	事件只触发一次
.passive	不拦截默认事件，会执行默认方法。，事件的默认行为立即执行无需等待事件回调执行完毕提供性能

注意： 修饰符可以同时使用多个,但是可能会因为顺序而有所不同。

用 @click.prevent.self 会阻止所有的点击，

而 @click.self.prevent 只会阻止对元素自身的点击。修饰符的顺序从左往右判断。

.prevent

阻止默认事件,等同于JavaScript中的event.preventDefault()。防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播），

提交事件不再重载页面，如果不加.prevent点击提交会重载页面
可阻止a标签默认跳转

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="log('提交')" action="/submit" method="get" accept-charset="utf-8">
    提交
    <input type="submit" name="">
</form>

<!-- 可阻止a标签默认跳转  -->
<a @click.prevent href="https:///www.百度.com">百度一下</a>

.capture

完整的事件机制是：捕获阶段--目标阶段--冒泡阶段，默认事件触发是从目标开始往上冒泡。当使用了 .capture 后则开启捕获阶段从包含这个元素的顶层开始往下触发。

   <div @click.capture="shout(1)">
      obj1
      <div @click.capture="shout(2)">
        obj2
        <div @click="shout(3)">
          obj3
          <div @click="shout(4)">
            obj4
          </div>
        </div>
      </div>
    </div>
    // 1 2 4 3

从上面这个例子我们点击obj4的时候，就可以清楚地看出区别，obj1，obj2在捕获阶段就触发了事件，因此是先1后2，后面的obj3，obj4是默认的冒泡阶段触发，因此是先4然后冒泡到3~

.native

将原生事件绑定到组件触发自定义组件上的原生事件。这时，你可以使用 @事件的 .native 修饰符：自定义组件无法判断该方法是否为子组件自定义的 emit 事件所以在触发原生事件时要通过 .native修饰符

.sync 修饰符

.sync 作为一个编译时的语法糖存在，当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。 .sync 它会被扩展为一个自动更新父组件属性的 v-on 监听器。

<!-- 父组件中 -->
<myComponent :title.sync="title" />

会被扩展为：

``html

data() { return { title:"hello vue.js" } }, methods:{ getTitle(e) { this.title = e } }


子组件中通过  \$emit('update:xxx') 触发 prop 的更新

```html
<!-- 子组件 -->
<template>
    <view>
        <view @click="changeTitle">{{title}}</view>
    </view>
</template>
<script>
export default {
    props: {
        title: {
                default: "hello"
        },
    },
    methods:{
        // 当一个子组件改变 prop 的值时，这个变化也会同步到父组件中所绑定
        changeTitle(){
            //触发一个更新事件
            this.$emit('update:title',"uni-app")
        }
    }
}
</script>

sync 与 v-model 区别

v-model 的原理

<myComponent v-model="num"></myComponent>
// 等价于
<myComponent :value="num" @input="(val)=>this.num=val"></myComponent>

.sync修饰符的原理


// 加上sync 修饰符后父传子： 
<myComponent:a.sync="num" .b.sync="num2"></myComponent> 
 
// 它等价于
<myComponent 
  :a="num" @update:a="val=>num=val"
  :b="num2" @update:b="val=>num2=val"></myComponent> 

// 相当于多了一个名为 update:a 的事件监听，回调函数中，会把接收到的值赋值给属性绑定的数据项中
  
  
//  sync 子组件触发
this.$emit('update:a',"123")

相同点: 都是语法糖, 都是可以实现父子组件中的数据的双向通信
区别点: 格式不同: v-model="num" , :num.sync="num"

v-model : @input value

:num.sync: @update:num

v-model只能用一次; .sync 可以有多个

uniapp 中的生命周期

应用生命周期学新通

页面的生命周期触底加载更多学新通

组件的生命周期学新通

uniapp-api

uni.showToast

mask: 防止穿透

设置导航条

导航条的文字颜色只能是白色、黑色且只能为 6 位的十六进制颜色

如果需要在页面进入时设置标题，可以在onReady内执行，以避免被框架内的修改所覆盖。如果必须在onShow内执行需要延迟一小段时间

tabBar配置

方式一：直接引入 iconPath 路径

字体图标，优先级高于 iconPath

"tabBar": {
    "color": "#333",
    "backgroundColor": "#fff",
    "selectedColor": "#258aff",
    "list": [
        {
            "text": "首页",
            "pagePath": "pages/home/index",
            "iconPath": "static/images/tabBar/home.png",
            "selectedIconPath": "static/images/tabBar/home-h.png"
        },
        {
            "text": "新闻",
            "pagePath": "pages/newList/index",
            "iconPath": "static/images/tabBar/list.png",
            "selectedIconPath": "static/images/tabBar/list-h.png"
        },
        {
            "text": "关于",
            "pagePath": "pages/about/index",
            "iconPath": "static/images/tabBar/user.png",
            "selectedIconPath": "static/images/tabBar/user-h.png"
        }
    ]
}

方式二：引入 iconfont 将iconfont 的 t资源下载至本地学新通将文件包中的 ttf文件放至 static文件目录下，在配置 tabBar 时引入所在的文件位置设置 iconfont即可 iconfont 设置的图标 text 属性来源于图标的 unicode 码，但是在项目中 &#x 前缀需要用 \u 进行转义否则icon 无法生效即 &#xe667 ==>> \ue667 学新通注意: 设置 iconfont 属性时，pages.json iconfontSrc 需要指定字体文件，参考下面的配置

"tabBar": {
	  "iconfontSrc":"static/icon/iconfont.ttf",
		"list": [
			{
				"text": "首页",
				"pagePath": "pages/home/index",
				"iconfont": {
          "text": "\ue667",
          "selectedText": "\ue668",
          "color": "#000000",
          "selectedColor": "#258aff"
        }
			},
			{
				"text": "新闻",
				"pagePath": "pages/newList/index",
				"iconfont": {
          "text": "\ue66f",
          "selectedText": "\ue670",
          "color": "#000000",
          "selectedColor": "#258aff"
        }
			},
			{
				"text": "关于",
				"pagePath": "pages/about/index",
				"iconfont": {
          "text": "\ue681",
          "selectedText": "\ue683",
          "color": "#000000",
          "selectedColor": "#258aff"
        }
			}
		]
	}

遗憾的是小程序不支持 iconfont 引入，所以在小程序中仍使用 iconPath 方式进行配置

或者支持同时配置。在二者共同配置的情况下

iconfont 的优先级 > iconPath

防止出现滚动条

/deep/ ::-webkit-scrollbar {
  width: 4px !important;
  height: 1px !important;
  overflow: auto !important;
  background: transparent !important;
  -webkit-appearance: auto !important;
  display: block;
}

uniapp 内置变量

.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}

富文本解析

<rich-text :nodes="detailObj.content"></rich-text>

学新通

在uniapp 中引入 uview

安装 view 模块

npm install uview-ui

在 main.js 文件全局引入 uView


import uView from 'uview-ui';
Vue.use(uView);

uni.scss 文件引入 uView 的全局 SCSS 主题文件

@import "uview-ui/theme.scss";

在App.vue文件引入uView基础样式

<style lang="scss">
	/*每个页面公共css */
	@import "uview-ui/index.scss";
</style>

在page.json中配置

"easycom": {
  "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},

在 vue-cli 方式配置 uview 时出现打包问题学新通 uniapp中会缺少打包配置是因为用vue-cli3创建项目时,并不会自动创建vue.config.js。node_modules里的依赖默认是不会编译的,会导致 es6 语法在ie中的语法报错。解决方式：

需要手动创建 vue.config.js 文件并配置需要编译的包。
在vue.config.js中使用transpileDependencies属性配置node_modules中指定哪些文件夹或文件需要编译。

//vue.config.js
module.exports = {
  transpileDependencies: ['uview-ui']
}

总结

端午之际今天的文章着实有些粗糙了各位见谅哈，以上是我在学习 uniapp 过程中的实践所得。如果想要继续使用 vscode 开发 uniapp 的同学可以看看我之前的这篇文章# 在vscoed 中运行 uniapp 项目，毕竟 vscode 是宇宙第一编辑器，配置的各种插件用惯了就不舍得换了😉。

在使用 uniapp 之前需要具备一定的 vue 使用基础，这样会更有利于 uniapp 的学习。

当然 uniapp 的功能非常丰富，通过一套代码，即可实现多个平台的兼容，大大降低了开发成本和维护成本。

如果您想要了解更多关于 Uniapp 的信息，可以参考官方文档这也是最好的学习指南。

这篇好文章是转载于：学新通技术网