uni-app学习笔记

最新推荐文章于 2025-01-12 23:44:42 发布

No丶slovenly

最新推荐文章于 2025-01-12 23:44:42 发布

阅读量874

点赞数

文章标签： uni-app 学习 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44164945/article/details/126602870

版权

1. 创建项目

通过 Hbuilder 创建uniapp项目

vue create -p dcloudio/uni-preset-vue [name]

2. 初始化

每个vue组件的根组件都要是 view 标签，有且仅有一个

3. 项目目录

pages
- index
  - index.vue
- home
  - index.vue
static
App.vue
main.js
pages.json

4. pages.json 配置文件

list中的路径 pagePath 必须和pages中 path 完全一致，否则不显示

{
	"pages": [
		{
			"path": "pages/index/index",	// 页面路径
			"style": {
				"navigationBarTitleText": "首页"	// 导航栏标题内容
			}
		},
		{
			"path": "pages/my/index",
			"style": {
				"navigationBarTitleText": "我的"	// 导航栏标题
			}
		}
	],
    "tabBar": {
		"color": "#ff9700",		// 文本颜色
		"selectedColor": "#ffffff",		// 文本选中时的颜色
		"backgroundColor": "#eeeeee",	// 背景色
		"position": "bottom",	// 导航栏定位
		"fontSize": "16px",		// 字体大小
		"spacing": "5px",		// 图标和文本的间距
		"height": "80px",		// 导航栏高度
		"list": [	// 导航栏列表
			{
				"pagePath": "pages/index/index",	// *路径必须和pages中的完全一致，否则不显示
				"text": "首页",
				"iconPath": "/static/c2.png",		// 图标
                "selectedIconPath": "/static/c2.png"// 选中时的图标
			},
			{
				"pagePath": "pages/my/index",
				"text": "我的",
				"iconPath": "/static/c3.png",
                "selectedIconPath": "/static/c2.png"
			}
		]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",		// 导航栏标题文本颜色 （black/white）
		"navigationBarTitleText": "uni-app",	// 导航栏标题内容
		"navigationBarBackgroundColor": "#F8F8F8",	// 导航栏背景颜色
		"backgroundColor": "#F8F8F8",		// 窗口的背景色
		"app-plus": {	// 编译到app平台的样式
			"background": "#efeff4"
		}
	}
}

5. 标签

修改标签

div -> view
span、font -> text
a -> navigator
img -> image
<input type> -> <inut confirmtype>
select -> picker
iframe -> web-view
ul、li -> view

新增标签

scroll-view 可滚动区域
swiper 可滑动区域（轮播图）
icon 图标
rich-text 富文本
progress 进度条
slider 滑块
switch 开关
camra 相机
live-player 直播
map 地图

6. swiper 轮播图

<swiper class="swiper"
    :indicator-dots="true"
    :autoplay="true"
    indicator-color="#ffffff"
    indicator-active-color="#000000"
    :circular="true"
    :vertical="true"
    previous-margin="4px"
    next-margin="4px"
    :interval="3000" 
    :duration="500">
    <swiper-item class="swiper_list">
        <view>A</view>
    </swiper-item>
    <swiper-item class="swiper_list">
        <view>B</view>
    </swiper-item>
    <swiper-item class="swiper_list">
        <view>C</view>
    </swiper-item>
</swiper>

indicator-dots 是否显示面板指示点（true / false）
autoplay 是否自动切换（true / false）
indicator-color 指示点的颜色（#ffffff）
indicator-active-color 当前指示点的颜色（#000000）
circular 是否首尾衔接（true / false）
vertical 滑动方向改为纵向（true / false）
previous-margin 当前页露出上一页的一部分（4px）
next-margin 当前页露出下一页的一部分（4px）
interval 自动切换的时间（5000）
duration 动画时长（500）

7. icon 图标

<icon type="success" size="26" color="" />

type 类型
- [“success”, “success_no_circle”, “info”, “warn”, “waiting”, “cancel”, “download”, “search”, “clear”]
size 尺寸
color 颜色

8. progress 进度条

<progress 
    percent="10" 
    backgroundColor="#eeeeee" 
    activeColor="#ff9700"
    stroke-width="6" 
    :active="true"
    :show-info="true" 
/>

percent 进度条的值
backgroundColor 进度条的背景色
activeColor 当前进度的颜色
stroke-width 进度条线宽（高度）
active 进度条的动画
show-info 显示百分比

9. navigator 跳转

<navigator url="/pages/demo/index" open-type="navigate" hover-class="className">
    <button type="default">页面跳转</button>
</navigator>

url 跳转路径
1. 必须在pages.json 的 pages 中注册，否则无法跳转
2. 路径前必须是以 “/” 开始的，否则跳转无效
open-type 跳转方式
- navigate 类似于 router.push()
- navigateBack 类似于 router.goback()
- switchTab 如果跳转的是导航栏的，必须使用这个
- exit 退出小程序

uni.switchTab({
     url: '/pages/my/index?id=1'
});

// 获取路由参数
export default {
    onLoad(option){
        console.log(option);
    },
};

uni.navigateTo({ }) router.push()
uni.redirectTo({ }) router.replace()
uni.switchTab({ }) 跳转到导航菜单时使用
uni.navigateBack({ }) 返回上一级

10. request 数据请求

const get = (url:string, data:object)=>{
	return new Promise((resove, rej)=>{
		uni.request({
			url,
			method: "GET",
			data,
			header:{
				"content-type": "application/json"
			},
			timeout: 60000,
			success:(res)=>{
				resove(res.data)
			},
			fail:(err)=>{
				rej(err)
			}
		})
	})
}

export {
	get,
	post
};

使用请求

let params = {
    token: "123"
};
this.$post(this.$api.login, params)
    .then(res => {
        console.log(res);
    })
    .catch(err => {
        console.log(err);
    })

11. 全局变量

App.vue

<script lang="ts">
	import Vue from 'vue';
	export default Vue.extend({
		// 全局变量
		globalData: {
			msg: "hello uni-app"
		},
	});
</script>

<template>
	<view class="container">
		<p>{{ msg }}</p>
	</view>
</template>

<script>
export default {
	computed: {
        // 使用app.vue中的全局变量
		msg(){
			return getApp().globalData.msg
		}
	},
}
</script>

12. 本地存储

增加

uni.setStorageSync('index', 1)

删除

uni.removeStorageSync('index')

清除

uni.clearStorageSync()

查询

uni.getStorageSync('index')

13. 获取地理位置

uni.getLocation({
    type: 'wgs84',
    success: function (res) {
        console.log('当前位置的经度：' + res.longitude);
        console.log('当前位置的纬度：' + res.latitude);
        console.log(res.address);
    },
});

res.longitude 经度
res.latitude 纬度
res.address 地址
- country 国家
- province 省
- city 市
- district 县
- street 街道
- streetNum 街道门牌号
- postalCode 邮政编码
- cityCode 城市代码

14. 打开地图获取位置

uni.chooseLocation({
    success: function (res) {
        console.log('位置名称：' + res.name);
        console.log('详细地址：' + res.address);
        console.log('纬度：' + res.latitude);
        console.log('经度：' + res.longitude);
    }
});

15. 打开相册选择图片

uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album'],
    success: function (res){
        console.log(res);
    }
});

count 可以选择的图片数量
sizeType 图片品质
- original 原图
- compressed 压缩图
sourceType 图片选取位置
- album 从相册选取
- camrea 打开相机
res.tempFilePaths 图片本地路径
res.tempFiles 图片文件

16. 保存图片到相册

uni.saveImageToPhotosAlbum({
    filePath: "/image/1.png",
    success: function () {
        console.log('save success');
    }
});

17. 获取文件

uni.chooseFile({
    count: 1,
    type: "all",
    extension: ['.jpg'],
    success: function (res){
        console.log(res);
    }
});

type 文件类型
- all 所有类型
- video 视频文件
- image 图片文件
extension 文件扩展名 [.png .jpg]

微信对话框选择文件

wx.chooseMessageFile({
    ...
    success: function (){}
})

18. 获取系统信息

uni.getSystemInfo({
    success: (res) => {
        console.log(res);
    }
});

res.brand 手机品牌
res.model 手机型号
res.pixelRatio 手机像素比
res.screenWidth 屏幕宽度
res.screenHeight 屏幕高度
res.language 应用语言
res.version 引擎版本

19. 获取网路状态

uni.getNetworkType({
    success: function (res) {
        console.log(res.networkType);
    }
});

res.networkType 网络类型
- wifi
- 2g 3g 4g 5g
- ethernet 有线网络
- unknown Android下不想见的网络类型
- none 无网络

监听网络状态变化

uni.onNetworkStatusChange(function (res) {
    console.log(res.isConnected);
    console.log(res.networkType);
});

res.isConnected 当前是否有网络连接
res.networkType 网络类型

取消网络状态监听

uni.offNetworkStatusChange(() => {
    console.log("取消网络监听");
})

20. 拨打电话

uni.makePhoneCall({
    phoneNumber: "156xxxxxxxx",
    success: function (){}
})

21. 扫码

uni.scanCode({
    onlyFromCamera: true,
    scanType: "qrCode",
    success: function (res){
        console.log(res.result);
        console.log(res.scanType);
        console.log(res.charSet);
    }
});

onlyFromCamera 是否从相机扫码，不允许从相册扫码
scanType 扫码类型
- qrCode 二维码
- barCode 一维码
res.result 扫码内容
res.scanType 扫码类型
res.charSet 扫码字符集

22. 剪贴板

api H5无效

设置剪贴板

uni.setClipboardData({
    data: "hello uni-app",
    success: function (){
        console.log("success");
    },
});

获取剪贴板内容

uni.getClipboardData({
    success: function (res){
        console.log(res.data);
    }
});

23. 用户截屏

api H5无效

uni.onUserCaptureScreen(function (){
    console.log("用户截屏了");
})