uni-app 开发一次多端覆盖的前端框架

最新推荐文章于 2024-09-23 10:19:09 发布

星马豪I

最新推荐文章于 2024-09-23 10:19:09 发布

阅读量460

点赞数

分类专栏：前端文章标签： vue app js

本文链接：https://blog.csdn.net/weixin_47253477/article/details/119564166

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. uni-app

基于Vue的前端框架，一套代码使用Web、ios、Android、小程序等多个平台

使用HBduilderX作为开发工具，HBduilderX针对uni-app做了很多优化

2. 基本概念

2.1 Vue单文件组件规范

.vue文件中包含三个一级节点模板<template> 脚本<script> 样式<style>

<template>  
    <view>  
    注意必须有一个view，且只能有一个根view。所有模板内容写在这个view下面。  
    </view>  
</template>  

<script>  
    // 导入js组件
    var util = require('../../common/util.js')
    import util2 = from "../../common/util.js"
    export default {  

    }  
</script>  

<style>  
    // 导入央视组件
    @import "./common/uni.css"

</style>

如果想所有页面都共享样式，可以在app.vue页面写入

2.2 导入自定义组件

1.导入组件 2.注册组件 3.使用（单词之间用 - 分隔）

<template>  
    <view>  
        <uni-badge text="abc" :inverted="true"></uni-badge><!--3.使用组件-->  
    </view>  
</template>  
<script>  
    import uniBadge from "../../../components/uni-badge.vue";//1.导入组件（传统vue规范，在uni-app的easycom下可以省略这步）  
    export default {  
        data() {  
            return {  

            }  
        },  
        components: {  
            uniBadge //2.注册组件（传统vue规范，在uni-app的easycom下可以省略这步）  
        }  
    }  
</script>

如果想所有页面共享某个vue组件，可以在main.js中导入

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

easycom

上面的导入自定义组件需要三步，但在HBuilderX 2.5.5后支持easycom模式，只要组件在components目录下，符合components/组件名/组件名.vue目录结构，就可以直接在template引用

2.3 对比以前html页面变化

【标签变化】

div变成view

span、font变成text

a变成mavigator

img变成image

select变成picker

iframe变成web-view

【js变化】

支持给标签设置ref（类似于html里面的给元素设置id），然后在js中用this.$refs.xxx获取

<template>  
  <view>  
    <view ref="testview">11111</view>  
    <button @click="getTest">获取test节点</button>  
  </view>  
</template>  

<script>  
export default {  
  methods: {  
    getTest() {  
      console.log(this.$refs.testview)  
    }  
  }  
};  
</script>

【css变化】

没有选择器了变成了page

page {
        background-color: #efeff4;
        height: 100%;
        font-size: 28rpx;
        line-height: 1.8;
    }

3. 引入资源

【模板内引入静态资源】

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>

【js引入】

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'

注意：js不支持用 / 开头引入

【css引入】

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

4. 生命周期

4.1 应用生命周期(仅App.vue)

生命周期函数	功能
onLaunch	uni-app初始化完成时触发（仅以此）
onShow	uni-app展示在前台
onHide	uni-app不再展示在前台
onError	uni-app报错时触发
onUniNViewMessage	对nvue页面发送的数据进行监听
onUnhandledRejection	对未处理的Promise拒绝事件监听函数
onPageNotFound	页面不存在监听函数
onThemeChange	监听系统主题变化时触发

4.2 页面生命周期

生命周期函数	功能	平台差异
onInit	页面初始化触发	仅百度小程序
onLoad	页面加载触发
onShow	页面每次出现在屏幕上都触发
onReady	页面渲染完成触发
onHide	页面隐藏时触发
onUnload	页面卸载时触发
onResize	页面窗口尺寸变化时触发	仅app、微信小程序
onPullDownRefresh	用户下拉时触发
onReachBottom	页面滚动到底部时触发
onTabItemTap	点tab时触发
onShareAppMessage	用户点分享时触发
onPageScroll	页面滚动时触发	nvue不支持
onNavigationBarButtonTap	原生标题栏按钮点击时触发	仅App、H5
onBackPress	页面返回时触发	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	原生标题栏搜索框输入时触发	仅App、H5
onNavigationBarSearchInputConfirmed	原生标题栏搜索框搜索时触发	仅App、H5
onNavigationBarSearchInputClicked	原生标题栏搜索框点击时触发	仅App、H5
onShareTimeline	用户点击转发到朋友圈触发	仅微信小程序
onAddToFavorites	用户点收藏时触发	仅微信小程序

5. 路由

在pages.json中的pages节点下配置页面跳转，属性为路径path和样式style

【页面栈】

6. 条件渲染和循环渲染

在一级template节点嵌套<template>做条件和循环渲染

条件渲染

<template>    <view>        <template v-if="test">            <view>test 为 true 时显示</view>        </template>        <template v-else>            <view>test 为 false 时显示</view>        </template>    </view></template>

循环渲染

<template>    <view>        <template v-for="(item,index) in list" :key="index">            <view>{{item}} - {{index}}</view>        </template>    </view></template>