uni-app总结

一、一些问题及解决

1、appId

在uni-app中，运用微信开发者工具时，要注意appid的设置否则会出现错误

在manifest.json中---->微信小程序设置---->微信小程序配置AppID

2、写法

uni-app结合了小程序与vue的一些写法，页面主要有template 、 style 、 script所组成
但使用的不是 div 而是 view

<template>
	<view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

二、uni-app

1、开发软件

使用HbulidX软件进行编译与开发

2、创建

文件 —> 新建 —> 项目

3、运行

菜单栏 ——>运行 ——> 选择运行的区域

Tips：运行到微信开发者工具如果失败，在开发者工具中进行一些设置更改

4、打包不同平台的代码

1.需要使用编辑器HBuilder X，和掌握uniapp语法来编写
2.写完以后如何打包上线
先要点击util文件夹下的manifest.json文件完成项目配置
然后点击发行就可以打包成各种类型的版本了

5、打包apk

6、云打包，如何运行在不同的端

1. uni-app 云打包流程:

发行 -> 原生app云打包 -> 使用DCloud公用证书 -> 输入包名 -> 去除广告选项 -> 打包
如果显示已经成功上传到云平台，只需要等待打包的结果即可） - 打包的结果会显示在控制台内，打 包成功就会返回一个网址，从网址中可以下载打包的apk文件 如果失败
很多时候是manifeast.json文件没有配置成功

2. uni-app mainfeast.json文件配置方法

基础配置中： uni-app标识符(可以云端自动获取)，应用名称(最后显示在- 手机上的应用名称), 版本号 什么的自己填即可
app图标配置，在手机上显示的你的app的图标,导入后点击自动生成，即可将所有端的app图标都自动生成
启动sdk的配置，例如地图，进入高德地图的开发者官方自己申请一个即可

三、路由跳转

官方跳转页面：https://uniapp.dcloud.io/api/router?id=navigateto

主要方法：

1、uni.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
有层级，无法跳转tab页面

2、uni.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

3、uni.reLaunch(OBJECT)

关闭所有页面，打开到应用内的某个页面。

H5端调用uni.reLaunch之后之前页面栈会销毁，但是无法清空浏览器之前的历史记录，此时navigateBack不能返回，如果存在历史记录的话点击浏览器的返回按钮或者调用history.back()仍然可以导航到浏览器的其他历史记录

4、uni.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

5、uni.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

// 此处是A页面
uni.navigateTo({
    url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
    url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
    delta: 2
});

6、uni.preloadPage(OBJECT)

预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。

四、配置tabBar

1、官网tabBar配置

{
"pages": [{
			"path": "pages/index/index",
			"style": {
				"enablePullDownRefresh": true
			}
		},
		{
			"path": "pages/details/details",
			"style": {}
		},
		{
			"path": "pages/trends/trends",
			"style": {}
		},
		{
			"path": "pages/information/information",
			"style": {}
		},
		{
			"path": "pages/mine/mine",
			"style": {}
		}
	    ,{
            "path" : "pages/Login/Login",
            "style" : {}
        }
        ,{
            "path" : "pages/search/search",
            "style" : {}
        }
        ,{
            "path" : "pages/resister/resister",
            "style" : {}
        }
        ,{
            "path" : "pages/yanzhengma/yanzhengma",
            "style" : {}
        }
        ,{
            "path" : "pages/three/three",
            "style" : {}
        }
    ],	
	"tabBar": {
	    "color": "#000000",
	    "selectedColor": "#d81e06",
	    "borderStyle": "black",
	    "backgroundColor": "#ffffff",
	    "list": [{
	        "pagePath": "pages/index/index",
	        "iconPath": "./static/icon-image/shouyezonglan.png",
	        "selectedIconPath": "./static/icon-image/shouyezonglan1.png",
	        "text": "组件"
	    }, {
	        "pagePath": "pages/trends/trends",
	        "iconPath": "./static/icon-image/fangdajing1.png",
	        "selectedIconPath": "./static/icon-image/fangdajing.png",
	        "text": "动态"
	    },{
	        "pagePath": "pages/information/information",
	        "iconPath": "./static/icon-image/lingdang1.png",
	        "selectedIconPath": "./static/icon-image/lingdang.png",
	        "text": "消息"
	    },{
	        "pagePath": "pages/mine/mine",
	        "iconPath": "./static/icon-image/wodexuanzhong.png",
	        "selectedIconPath": "./static/icon-image/wodexuanzhong1.png",
	        "text": "我的"
	    }]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

2、自定义配置tabBar

新建tabBar.vue，并在main.js中引入全局组件

<block v-for="(item,index) in tabList" :key="index">
    <view class="navigator" :class="currentTabIndex == index ? 'on' : ''" @tap="switchTab(index)">
        <view class="icon">
            <text class="iconfont" :class="item.icon" :style="[currentTabIndex == index ? {'color': tintColor} : {'color': color}]"></text>
            <text v-if="item.badge" class="uni_badge">{{item.badge}}</text>
            <text v-if="item.badgeDot" class="uni_badge uni_badge_dot"></text>
            </view>
        <view class="text" :style="[currentTabIndex == index ? {'color': tintColor} : {'color': color}]">{{item.text}}</view>
    </view>
</block>

<script>
    export default {
        data() {
            return {
                tabList: [
                    {
                        icon: 'icon-emotion',
                        text: 'tab01',
                        badge: 1
                    },
                    {
                        icon: 'icon-qianbao',
                        text: 'tab02',
                    },
                    {
                        icon: 'icon-choose01',
                        text: 'tab03',
                        badgeDot: true
                    }
                ],
                currentTabIndex: this.current
            }
        },
        props: {
            current: { type: [Number, String], default: 0 },
            backgroundColor: { type: String, default: '#fbfbfb' },
            color: { type: String, default: '#999' },
            tintColor: { type: String, default: '#42b983' }
        },
        methods: {
            switchTab(index){
                this.currentTabIndex = index
                this.$emit('click', index)
            }
        },
    }
</script>

import tabBar from './components/tabbar.vue'
Vue.component('tab-bar', tabBar)

在页面中引入tabbar，并自定义tabbar属性参数

<tab-bar :current="currentTabIndex" backgroundColor="#fbfbfb" color="#999" tintColor="#42b983" @click="tabClick"></tab-bar>

五、如何请求接口

1、封装api接口

在根目录创建Until.js

let apiReq={
	req(obj){
		var method = obj.method || "GET"; // 请求方式,默认为GET
		var url = obj.url || ""; // 请求路径 
		var data = obj.data || {}; // 请求数据
		var header = obj.header || {}; // 请求头
		var success = obj.success; // 成功回调函数
		var fail = obj.fail; //表示失败后，要执行的回调函数
		uni.request({
			url: url,
			data: data,
			method: method,
			header: header,
			success: ((res) => {
				if(res.statusCode === 403 || res.statusCode === 401) {
					// 错误处理
				} else if (res.statusCode === 200) {
					success(res)
				} 
			})
		})
	}
}
export default apiReq

2、组件使用请求接口

	let obj2 = { // 创建对象
					url: `xx/xx/xx`, // 示例请求路径
					method: "POST",
					data:{
						phone:this.username,
						code:this.resister,
					},
					success: (res) => {
						console.log(res)
						uni.setStorageSync('token', res.data.data.token);
						uni.setStorageSync('userInfo', res.data.data);
						
						uni.navigateTo({
							url:"../mine/mine"
						})
					},
				}
				this.$apiReq.req(obj2)

六、如何使用组件

uniapp中：每个页面可以理解为一个单页面组件，这些单页面组件注册在pages.json里，在组件关系中可以看作父组件。

自定义可复用的组件，其结构与单页面组件类似，通常在需要的页面引入或者注册到全局main.js中使用，这是子组件。

1、props (props用于父组件给子组件传递参数，参数可以限制类型，可以设置默认值)
2、$emit(事件名，参数1，参数n)：用于向父组件传递事件，可携带子组件的参数3、ref用于获取某个dom节点或子组件的注册引用信息，在父组件的$refs对象里，分别指向dom元素或子组件的实例
4、如需在基本组件的内置事件传递新的参数，可使用$event占位默认参数，如@change($event,新的参数)
5、插槽< slot >< /slot >，里面可填充任何模板

七、基础语法

变量赋值

<script>
export default {
	data() {
		return {
			title: 'hello',
			name: 'uni-app'
		}
	}
}
</script>

在视图中使用{{}}调用变量

<template>
	<view class="demo">
		{{title}}--{{name}}
	</view>
</template>

数组形式的数据绑定

<script>
export default {
	data() {
		return {
			students:[
				{name:'张三',age:18},
				{name:'李四',age:20}
			]
		}
	}
}
</script>

在视图中通过数组索引调用

<template>
	<view class="demo">
		{{students[0].name}}
		{{students[1].age}}
	</view>
</template>

列表渲染 v-for,index为索引

<template>
	<view class="container">
		{{students[0].name}}   <!--不循环只想要索引第一个里边的name值-->
		
		<view v-for="(item,index) in students" :key="index">
			{{index}} - {{item.name}} : {{item.age}}
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			students:[
				{name:'张三',age:18},
				{name:'李四',age:20}
			]
		}
	}
}
</script>

条件渲染 v-if v-hidden

<template>
	<view>
		<view v-if="show">
			这里是条件展示的内容
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: true   //true显示，false隐藏
		}
	}
}
</script>

<template>
	<view>
		<view :hidden="show">
			这里是条件展示的内容
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: true   //true隐藏，false显示
		}
	}
}
</script>

if 与 hidden 区别
if会根据条件决定是否渲染，hidden会渲染但根据条件决定是否展示。

八、生命周期都有哪些

应用生命周期

页面生命周期

九、nvue

原理

特点

十、数据的存储与调用

存储

uni.setStorage({
key:“属性名”，
data:“值”
})

uni.setStorageSync("key",data)

调用

uni.getStorage({
key:“属性名”,
success(e){
e.data//这就是你想要取的token
}
}) 

uni.getStorageSync("key")

十一、css像素单位使用什么最合适

uni-app 使用 upx 作为默认尺寸单位， upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。