uni-app x 跨平台开发框架-EW帮帮网

// 声明一个string类型的变量
let str :string = "hello"; 
let str1 = 'world';
str = "hello world";
str = str1 as string; // 在不确定类型的时候可以给他一个类型


// 声明一个传参是数字类型的，返回是boolean类型的函数
const test = (score: number): boolean => {
	return (score>=60)
}


// 也可以自定义数据类型进行类型规范，比如声明一个Page类型

type Page = {
    name : string
    enable ?: boolean
    url ?: string.PageURIString
  }

// 总的来说，会TypeScript的，这个是没问题的，两个很相像

uvue渲染引擎

uvue支持的是vue3语法，支持组合式API和选项式API。详见vue语法

uvue在App端支持的css语法，是web的子集，类似于但优于nvue的css。仅支持flex布局，但也足以布局出需要的界面。详见css语法

使用该css子集，可保证跨端。如果把uvue页面编译到web平台，则web的其他css也都可以使用。

代码例子：

组合式API的写法

<template>
	<view class="container">
		<button @click="add">加</button>
        {{ count }}
        <button @click="reduce">减</button>
	</view>
</template>

<script lang="uts" setup>
	//这里只能写uts
    let count = ref(1);

    // 加一
    const add = () => {
        count.value++;
    }

    // 减一
    const reduce = () => {
        count.value++;
    }

</script>

<style>
	.container{
		margin: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
</style>

选项式API写法

<template>
	<view class="container">
		<button @click="add">加</button>
        {{ count }}
        <button @click="reduce">减</button>
	</view>
</template>

<script lang="uts">
	export default {
		data() {
			return {
				count : 1,
			}
		},
		onLoad() {
			// 页面启动的生命周期，这里编写页面加载时的逻辑
            console.log('onLoad')
		},
		methods: {
			add : function () {
				this.count++;
			},
            reduce : function () {
				this.count--;
			},
		}
	}
</script>

<style>
	.container{
		margin: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
</style>

页面生命周期

<template>
	<scroll-view :bounces="false">
		<view v-for="item in 90">
			{{ item }}
		</view>
	</scroll-view>
</template>

<script setup lang="uts">
	onLoad((options : OnLoadOptions) => {
		console.log('onLoad', options)
	})
	onPageShow(() => {
		console.log('onPageShow');
	})
	onReady(() => {
		console.log('onReady');
	})
	onPullDownRefresh(() => {
		console.log('onPullDownRefresh');
	})
	onPageScroll((e : OnPageScrollOptions) => {
		console.log('onPageScroll');
	})
	onReachBottom(() => {
		console.log('onReachBottom');
	})
	onBackPress((options : OnBackPressOptions) : boolean | null => {
		console.log('onBackPress');
		return null
	})
	onPageHide(() => {
		console.log('onPageHide');
	})
	onUnload(() => {
		console.log('onUnload');
	})
	onResize((options : OnResizeOptions) => {
		console.log('onResize', options)
	})
</script>

<style>
	.container {
		height: 1200px;
	}
</style>

API

uni-app x支持的API包括：

uts的API 详见
全局API，前面不需要加uni.。如getApp、getCurrentPages
uni.xxx的内置API。数量较多，详见
uniCloud.xxx的内置API。详见
dom的API 详见
原生API

由于 uts 可以直接调用 Android 和 iOS 的 api，所以 OS 和三方sdk的能力都可以在uts中调用。如下：

<script>
	import Build from 'android.os.Build';
	export default {
		onLoad() {
			console.log(Build.MODEL); //调用原生对象，返回手机型号
			console.log(uni.getSystemInfoSync().deviceModel); //调用uni API，返回手机型号。与上一行返回值相同
		}
	}
</script>

pages.json全局配置文件

pages.json 文件是 uni-app x 的页面管理配置文件，决定应用的首页、页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

所有页面，均需在pages.json中注册，否则不会被打包到应用中。

在HBuilderX中新建页面，默认会在pages.json中自动注册。在HBuilderX中删除页面文件，也会在状态栏提示从pages.json中移除注册。

除了管理页面，pages.json支持对页面进行特殊配置，比如应用首页的tabbar、每个页面的顶部导航栏设置。

但这些uni-app中设计的功能，主要是为了解决页面由webview渲染带来的性能问题，由原生提供一些配置来优化。

uni-app x的app平台，页面不再由webview渲染，其实不需要原生提供特殊配置来优化。但为了开发的便利和多端的统一，也支持了tabbar和导航栏设置。
但不再支持uni-app的app-plus专用配置以及tabbar的midbutton。

如pages.json中配置的导航栏和tabbar功能无法满足你的需求，可以不在pages.json中配置，自己用view做导航栏和tabbar。

例子如下

{
  "pages": [
    //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/tabBar/component",
      "style": {
        "navigationBarTitleText": "内置组件",
        "backgroundColor": "#F8F8F8"
      }
    },
  ],
  "globalStyle": {
    "pageOrientation": "portrait",
    "navigationBarTitleText": "Hello uniapp x",
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#007AFF",
    "backgroundColorContent": "#efeff4",
    "backgroundColor": "#efeff4",
    "backgroundColorTop": "#F4F5F6",
    "backgroundColorBottom": "#F4F5F6"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#007AFF",
    "borderStyle": "black",
    "backgroundColor": "#F8F8F8",
    "list": [{
        "pagePath": "pages/tabBar/component",
        "iconPath": "static/component.png",
        "selectedIconPath": "static/componentHL.png",
        "text": "内置组件"
      },
      {
        "pagePath": "pages/tabBar/API",
        "iconPath": "static/api.png",
        "selectedIconPath": "static/apiHL.png",
        "text": "接口"
      },
    ]
  },
  "condition": {
    //模式配置，仅开发期间生效
    "current": 0, //当前激活的模式(list 的索引项)
    "list": [{
      "name": "", //模式名称
      "path": "", //启动页面，必选
      "query": "" //启动参数，在页面的onLoad函数里面得到
    }]
  }
}

总结

个人看一遍下来感觉只要会uniapp、vue、TypeScript，可以直接上手直接做，如果有什么不同可以去看官方文档，包看懂的~~

uni-app x 跨平台开发框架

uni-app x 是什么

和Flutter对比

uts语言

uvue渲染引擎

组合式API的写法

选项式API写法

页面生命周期

API

pages.json全局配置文件

总结

网站公告

今日签到

热门文章

最新发布