uniApp笔记

uniApp

学习路线：>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
文中下方出现的http链接均为官网纤详细教程地址，官网讲的很全没必要再重新记录一编

组件

响应式宽度单位

rpx 整个屏幕占满的宽是750rpx，它会根据你的屏幕大小进行自适应

.box{
    width:750rpx; // 全屏 
    height:300rpx;
    background: green;
}

icon

https://uniapp.dcloud.net.cn/component/icon.html# icon官网

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

text

文本组件：https://uniapp.dcloud.net.cn/component/text.html

scroll-view

可滚动视图区域：https://uniapp.dcloud.net.cn/component/scroll-view.html

swiper

滑块视图容器（轮播图）：https://uniapp.dcloud.net.cn/component/swiper.html

<swiper class="swiper" circular="true" autoplay="true" duration="400" interval="3000" indicator-dots>
    <swiper-item class="item">
        <image src="https://img.alicdn.com/imgextra/i2/6000000008101/O1CN01pgKEuY29iJJRNkCfJ_!!6000000008101-2-octopus.png" mode="">image>
    swiper-item>
    <swiper-item class="item">
        <image src="https://img.alicdn.com/imgextra/i3/6000000004754/O1CN01G2onsB1kzNg9NfdBH_!!6000000004754-2-octopus.png" mode="">image>
    swiper-item>
    <swiper-item class="item">
        <image src="https://img.alicdn.com/imgextra/i4/6000000004885/O1CN0101FvmP1lxNZ8vWgR6_!!6000000004885-0-octopus.jpg" mode="">image>
    swiper-item>
swiper>

image

图片组件：https://uniapp.dcloud.net.cn/component/image.htmlf

表单

按钮

https://uniapp.dcloud.net.cn/component/button.html

输入框

https://uniapp.dcloud.net.cn/component/input.html

navigator

跳转组件：https://uniapp.dcloud.net.cn/component/navigator.html#

类似于h5的a标签 ,只能跳转到非tabBar页面，如果你就要跳到tabBar的页面，那就可以用第二种用法设置open-type

<navigator url="/page/list/list">新闻列表navigator>
<navigator rul="/page/list/list" open-type='reLaunch'>新闻列表navigator>

tabBer

https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar

tabBar里面有 color：默认颜色；selectedColor选中颜色；list下方按钮（列表中也有名字，颜色，图标，选中图标）

{
	"pages": [ 
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
		    "path" : "pages/list/list",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "",
		        "enablePullDownRefresh": false
		    }
		    
		},
		{
            "path" : "pages/about/about",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "测试app",
		"navigationBarBackgroundColor": "#F7F7F7",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#333",
		"selectedColor": "#00AEEC",
		"list": [
			{
				"text": "首页",
				"pagePath": "pages/index/index",
				"iconPath": "static/tabbar/index.png",
				"selectedIconPath": "static/tabbar/index-h.png"
			},
			{
				"text": "列表",
				"pagePath": "pages/list/list",
				"iconPath": "static/tabbar/list.png",
				"selectedIconPath": "static/tabbar/list-h.png"	
			},
			{
				"text": "我的",
				"pagePath": "pages/about/about",
				"iconPath": "static/tabbar/about.png",
				"selectedIconPath": "static/tabbar/about-h.png"
			}
		]
	},
	"uniIdRouter": {}
}

和vue比较

计算属性和监听器

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

https://uniapp.dcloud.net.cn/tutorial/vue-basics.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7computed

组件

不用导入，按照约定创建直接用即可

https://uniapp.dcloud.net.cn/tutorial/vue-components.html

父组件给子组件传参props

使用的时候需要在子组件中定义props去接收定义的属性

https://uniapp.dcloud.net.cn/tutorial/vue-components.html#props

简单使用

父组件


子组件

也可以这样写设置默认值

		props:{
			title:{
				type: String,
				default: "默认标题"
			},
			time:{
				type:Number,
				default: Date.now()
			},
			list:{
				type: Array,
				default(){
					return [1,2,3]
				}
			},
			user:{
				type: Object,
				default(){
					return {name:"匿名",gender:"保密"}
				}
			}

子组件给父组件传值emit

https://uniapp.dcloud.net.cn/tutorial/vue-components.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6下滑找到自定义事件

子组件，传的值不只是字符串，还可以时对象，数组

父组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c3x1jtpH-1667539006951)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20221020114541858.png)]

事件修饰符

native

比如在自定义组件上，执行比如@click事件，如果不加事件修饰符的话，就会以为这个事件是在组件中定义的，这里如果还想让他出发@click的话，那几就 加上事件修饰符@click.native

sync

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

子组件中
methods:{
	onClose(){
		this.$emit("update:stte",false)
	}
}

表示组组件的这个state属性是个响应式的，子组件是可以控制这个属性的

生命周期函数·

created(){} 实例创建完成后立即调用 一般做网络请求

mounted(){} 挂载到实例上去之后调用 一般做数据渲染 f

路由和页面跳转

https://uniapp.dcloud.net.cn/api/router.html#navigatetof

跳转到demo4页面
或者
跳转

methods:{
	goDemo4(){
		uni.navigateTo({
			url:"/pages/demo4/demo4",
			success: res=>{
				
			}
		})
	}
}

onload页面传参和vue route路由的差异

路由取

# 传递一个参数，传递多个用 & 拼接
# 页面 传参
跳转到demo4

# 在H5中  取参
   	mounted(){
		console.log( this.$route.query.wd )
	}

# 在小程序中 取参
	onLoad(e){
		console.log(e)
		console.log( getCurrentPages() )
	}

常用小功能

消息提示框

https://uniapp.dcloud.net.cn/api/ui/prompt.html

uni.showToast() ·

... @click="clickImg"

methods: {
	clickImg(){
		uni.showToast({
			title:"发布失败",
            // icon:"error",
            image:"/static/logo.png",
            mask:true,
            duration:1500,
            success(){
                setTimeout(()={
                    uni.navigateTo({
                    	url:"/pages/demo/demo"
                	})
                },1500)
            }
		})
	}
}

showLoding和showModal模态弹窗

showLoding

onLoad(){
    uni.showLoading({  // 开启加载窗
        title:"数据加载中...",
        mask:true
    })
    
    setTimeout(()={  // 模拟请求，关闭加载框
        uni.hideLoading()
    },2000)
}

showModal

methods: {
    clickBox(){
        uni.showModal({
            title:"提示",
            content:"是否继续进入下一个页面？",
            editable:true,  // 展示输入框
            success:res=>{
                console.log(res)
                if(res.confirm){
                    uni.navigateTo({
                        url:"page/demo/demo"
                    })
                }else{
                    uni.showToast({
                        title:"您已取消",
                        icon:"none"
                    })
                }
            }
        })
    }
}

showActionSheet从底部向上弹出操作菜单

data(){
    return {
        arr: ["三国演义","红楼梦","水浒传"]
    }
}

uni.showActionSheet({
	itemList: this.arr,
	success: (res) => {
		console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
        console.log(this.arr[res.tapIndex])
	},
	fail: function (res) {
		console.log(res.errMsg);
	}
});

设置导航条

可以在page.json中进行设置，配合官方文档https://uniapp.dcloud.net.cn/collocation/pages.html#style

也可以在页面中进行设置，不过要在页面初始化的时候设置https://uniapp.dcloud.net.cn/api/ui/navigationbar.html

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

onLoad(){
    uni.setNavigationBarTitle({
        title:"js操作的导航标签，优先级大于page.json"
    })
}

tabbar配置iconfont字体图标

https://uniapp.dcloud.net.cn/api/ui/tabbar.html 这个在小程序不支持

先去官网，https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3729232&keyword=&project_type=&page=把自己想用的图标给都添加到一个项目中去，然后直接下载到本地，把下载的文件解压后，里面有一个 iconfont.ttf 文件，把这个文件复制到static下面去，之后去page.json用即可，在list里面配置iconfont

	"tabBar": {
		"iconfontSrc": "static/font/iconfont.ttf", //导入
		"color": "#333",
		"selectedColor": "#00AEEC",
		"list": [
			{
				"text": "首页",
				"pagePath": "pages/index/index",
				"iconPath": "static/tabbar/index.png",
				"selectedIconPath": "static/tabbar/index-h.png",
				"iconfont": {
					"text": "\ue751",  //直接去icon官网复制代码   然后把前三个字符使用 \u 进行转译
					"selectedText": "\ue751",
					"color": "#333",
					"selectedColor": "#007AFF",
				}
			},
			{
				"text": "列表",
				"pagePath": "pages/list/list",
				"iconPath": "static/tabbar/list.png",
				"selectedIconPath": "static/tabbar/list-h.png"	
			},
			{
				"text": "我的",
				"pagePath": "pages/about/about",
				"iconPath": "static/tabbar/about.png",
				"selectedIconPath": "static/tabbar/about-h.png"
			}
		]
	},

uni.request网络请求API接口

https://uniapp.dcloud.net.cn/api/request/request.html

​

一个简单案例 不带参数

带有参数，可以写在data里面，也可以？拼接

小案例

list.vue是一个新闻列表，点击查看详情，和这个详情下面的评论内容

list.vue

detail.vue

数据缓存Storage的用法

https://uniapp.dcloud.net.cn/api/storage/storage.html#setstorage

每个方法都有一个同步和异步，一般用异步即可

设置缓存

onLoad() {
    uni.setStorageSync("mykey",{name:"wangmenghu",age:20})
    // 或者用
    uni.setStorage({
        key: "demo",
        data: "123"
    })
},

读取缓存

let value = uni.getStorageSync('mykey');
if (value) {
    console.log(value);
}

// 或者
uni.getStorage({
	key: 'storage_key',
	success: function (res) {
		console.log(res.data);
	}
});

清空缓存

try {
    uni.removeStorageSync('mykey');
} catch (e) {
    // error
}

//或者
uni.removeStorage({
    key: 'mykey',
    success: function (res) {
        console.log('success');
    }
});


// 清除所有
try {
	uni.clearStorageSync();
} catch (e) {
	// error
}

打包不同平台

H5

打开manifest.json ，左侧菜单找到Web配置 ，在这里可以设置 标题，路由模式…等等，配置完过后，去上方菜单找到发行，点击网站Pc-Web或手机H5... 然后点击发行，就会进行打包，打包后的文件会在 unpackage这个文件夹下面的dist/build/h5

微信小程序

AppId ：打开自己注册的小程序，进入开发者的主页，左侧菜单找到开发管理，在这里找到开发设置 ，在这里面就能找到AppID

appid填好后其他的基本上不需要配置，点击发行，发行到微信小程序，它会打包到unpackage/dist/build/mp-weixin，然后就可以去微信开发者工具中进行配置: 点击右上角详情 下的 项目配置 找到合法域名 ,把项目中的接口地址拿过去比如https://menghu.cloud,这里不知道怎么配可以去小程序的后台，开发管理中找到服务器域名进行添加 ，也可以到本地设置中，不校验合法域名

之后，在微信开发者工具中点击右上角的上传，这时候你再去小程序的后台管理系统，版本管理中就能看到

App

在manifest.json中选择App图标配置，启动界面配置，模块配置，等等。发行的时候选择 APP云打包。打包后在unpackage/release/apk/...

青年帮项目

1.左右滑动的导航

使用组件scroll-view

ew class=“item”>国内
国内
国内
国内
国内
国内

		
			
				每一行的新闻