Bootstrap

uniapp环境配置与目录介绍、基础运用

微信小程序：https://developers.weixin.qq.com/miniprogram/dev/framework/

Vue:https://v3.cn.vuejs.org/guide/introduction.html#起步

uniapp:https://uniapp.dcloud.io

html:https://www.runoob.com/html/html-tutorial.html

css:https://www.runoob.com/css/css-intro.html

flex布局：https://www.runoob.com/w3cnote/flex-grammar.html

绝对定位和相对定位：https://www.runoob.com/w3cnote/css-position-static-relative-absolute-fixed.html

HBuildX常用功能使用：https://www.jianshu.com/p/f51b31c978c4

HBuilderX里的uni-app，根目录是相当于src，dist放到unpackage目录下。

src目录下是不能直接 npm install 引入第三方库的。可以在别处新建一个文件夹然后install下载第三方库，然后把相关库文件copy到src下（也就是uniapp根目录下）。

下载流程如下：

  • 创建一个空的文件夹如：A，电脑上随便建一个。
  • 进入 文件夹A 打开命令行工具，执行 npm init 一路回车即可。
  • 下载第三方库：npm install XX --save。
  • 进入 node_modules 目录，就是我们需要的第三方库。
  • 在 HBuilderX 里面新建 uni-app，将将刚才下载的三个文件夹拷贝到项目根目录。

注意事项：function函数会改变this的指向，可以用res=>{}函数来代替。

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

manifest.json是应用的配置文件，用于指定应用的名称、图标、权限。

APP.vue是应用的根组件，所用页面都是在App.vue中进行切换。是应用的入口文件，可以调用应用的生命周期函数。

mian.js是项目的入口文件，主要作用是初始化vue实例，并且使用需要的插件。

uni.scss控制整体风格样式。

unpackage是打包目录，这里有各个平台的打包文件。

pages所用的页面存放目录。

static静态资源目录，如图片。

components组件的存放目录。

规范：页面文件遵循vue单文件组件（SFC）规范。

接口能力接近微信小程序，把wx换成uni。

组件标签靠近小程序规范。

数据绑定及事件处理同vue规范，同时绑定了app及页面生命周期。

为适应多端运行，建议使用flex布局。

样式的几种使用方式：

行内样式：直接在标签中写stytle，

<view style="color:{{color}};" />

引用样式：在stytle中使用@import url("./XX/xx.cs")引用外部.css

App.vue中的stytle是全局样式，每一个文件中都能用；

pages下面的vue文件的样式是局部样式；局部样式会覆盖全局样式。

字体文件的引用路径推荐使用~@开头的绝对路径；

uni.scss使用预处理样式，使用的时候直接使用，不需要引用样式文件。

pages.json中的   globalStyle：用于设置应用的状态栏、导航条、标题、窗口背景色等。Pages下面的stytle可以设置具体页面的样式，会覆盖掉globalStytle样式。

注意：要用到样式嵌套，需要设置<style lang="scss"> </style>    除了使用scss，也可以使用less，这两个都是需要下载插件的。

less、sass、stylus这三个都是css预编译器，可以嵌套样式；

生命周期：https://uniapp.dcloud.io/collocation/frame/lifecycle

应用的生命周期：在App.vue中

onLaunch：uniapp初始化完成时触发，全局只触发一次；

onShow:uniapp启动，或从后台进入前台显示。

onHide:uniapp从前台进入后台。

onError：uniapp报错时触发。

页面的生命周期：

onLoad：监听页面加载，其参数为上个页面传递的参数，参数类型为Object（用于页面参数），只会触发一次。

onShow：监听页面显示，页面每次出现在屏幕上触发，包括下级页面点返回露出当前页面，会触发多次。

onReady:监听页面初次渲染完成，只会触发一次。

onHide：监听页面隐藏。

onUnload：页面卸载。

onResize:监听窗口尺寸的变化。

onPullDownRefresh:监听用户下拉动作，一般用于下拉刷新。可以在pages.json中globalStytle下设置全局的（所有页面都可以使用下拉刷新，不推荐）"enablePullDownRefresh":true。也可以在Pages下面设置每一个页面的下拉刷新，"enablePullDownRefresh":true。

onReachBottom:页面滚动到底部的事件，一般用来做上拉加载，可以在pages.json中设置。

onTapItemTap:点击tab时触发。

tabbar的页面展现过一次后就保留在内存中，再次切换tabbar页面只触发每个页面的onshow，不会再触发onload。

网络请求：https://uniapp.dcloud.io/api/request/request

get请求：

数据缓存：临时的把数据存储到本地，不是数据库；https://uniapp.dcloud.io/api/storage/storage?id=setstorage

图片上传和预览：https://uniapp.dcloud.io/api/media/image

条件注释跨端兼容：https://uniapp.dcloud.io/platform

#ifdef APP-PLUS
需条件编译的代码
#endif

#ifndef H5
需条件编译的代码
#endif

#ifdef H5 || MP-WEIXIN
需条件编译的代码
#endif

API 的条件编译：
// #ifdef %PLATFORM%

平台特有的API实现

// #endif

组件的条件编译：

<!-- #ifdef %PLATFORM% -->

平台特有的组件

<!-- #endif -->

样式的条件编译：

/* #ifdef %PLATFORM% */

平台特有样式

/* #endif */

导航跳转和传参：https://uniapp.dcloud.io/api/router?id=navigateto

组件导航跳转：https://uniapp.dcloud.io/component/navigator

<navigator url="./homedetail">组件跳转</navigator>

如果要跳转到tabbar页面，需要设置open-type="switchTab"属性，

open-type 的值redirect：销毁当前页面，然后跳转到响应的页面。

open-type的值navigateBack：和delta配合使用，delta表示返回的层数。

open-type的值navigate：普通的跳转，下一个页面有返回箭头。

open-type的值reLaunch：销毁全部页面，应用重新加载一个页面。

API跳转：

uni.switchTab 跳转到tabbar页面，关闭其他所有非tabBar页面。

uni.switchTab({
                    url:"../community/communityindex"
                })

uni.navigateTo 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

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

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

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

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

传递参数：

组件导航传参：<navigator url="./homedetail?id=80&age=20">组件跳转</navigator>

 下一个页面接收参数：

<script>
	export default{
		onLoad(options) {
			console.log(options)
		}
	}
</script>

api跳转传递参数（编程式导航）：

uni.navigateTo({
                url:"./homedetail?id=60&age=22"
            })

下一个页面接收参数：

<script>
	export default{
		onLoad(options) {
			console.log(options)
		}
	}
</script>

组件的创建和生命周期、组件通讯方式：

 创建一个后缀名为.vue的文件，其他组件可以通过import的方式导入，再通过components进行注册即可。

<template>
	<view>我的
	<testone>使用组件</testone>
		
	</view>
</template>

<script>
	import testone from "../../components/testone.vue" //引入组件
	export default{
		data(){
			return {
				
			}
			}
			methods:{
				
			},
			components:{  //注册组件
				testone:testone
			}
		
	}	
</script>

组件生命周期：

beforeCreate() {
			console.log('组件开始实例化，但是数据还没初始化完成，页面还没有开始渲染')
		},
		created() {
			console.log('实例已经创建完成，但是还没有挂载，一般在里面初始化数据')
		},
		beforeMount() {
			console.log('组件还没渲染到页面')
		},
		mounted() {
			console.log('组件已经渲染到页面上')
		},
		beforeUpdate() {
			console.log('数据更新之前，只有H5能用')
		},
		updated() {
			console.log('数据已经更新到组件上，只有H5能用')
		},
		beforeDestroy() {
			console.log('组件销毁前')
		},
		destroyed() {
			console.log('组件已经销毁')
		}

组件间的通讯：https://uniapp.dcloud.io/api/window/communication

父-》子

<template>
	<view>我的
	<testone v-bind:title="title">父向子传值</testone>
		
	</view>
</template>

<script>
	import testone from "../../components/testone.vue"
	export default{
		data(){
			return {
			title:"hello"
			}
			},
			methods:{
				
			},
			components:{//注册组件
				testone:testone
			}
		
	}	
</script>

<style>
</style>
<template>
	<view>
		父组件传递过来的值{{title}}
	</view>
</template>

<script>
	export default {
		name:"testone",
		data() {
			return {
				
			};
		},
		props:['title']//这个title要和上一个组件中的子组件属性一置<testone v-bind:title="title">父向子传值</testone>,
		
	}
</script>

<style>

</style>

子->父

<template>
	<view>
		<button @click="passtoparent">给父组件传值</button>
	</view>
</template>

<script>
	export default {
		name:"testone",
		data() {
			return {
				num:3
			};
		},
		
		methods:{
			passtoparent(){
				console.log('给父亲组件传值')
				this.$emit('myevent',this.num)//发送myevent这个事件，在父组件中监听这个事件
			}
		}
	}
</script>

<style>

</style>
<template>
	<view>我的
	<testone  @myevent="getnum"> myevent是子组件发送的事件</testone>
	这是子组件传递过来的数据{{num}}
	</view>
</template>

<script>
	import testone from "../../components/testone.vue"
	export default{
		data(){
			return {
			title:"hello",
			num:0
			}
			},
			methods:{
				getnum(num){
					console.log(num);
					this.num=num;
				}
			},
			components:{//注册组件
				testone:testone
			}
		
	}	
</script>

<style>
</style>

用全局的api方法实现组件通信：

1.uni.$emit('update',{msg:'数据'})   update是触发的事件。

2.监听update事件

uni.$on('update',function(data){

console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);

})

3.监听全局的自定义事件，事件由 uni.$emit 触发，但仅触发一次，在第一次触发之后移除该监听器。

uni.$once('update',function(data){ console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);

})

4.移除全局自定义事件监听器。

uni.$off("事件",回调])

uni-ui库：一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。https://uniapp.dcloud.io/component/README?id=uniui

单位：

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)
iPhone51rpx = 0.42px1px = 2.34rpx
iPhone61rpx = 0.5px1px = 2rpx
iPhone6 Plus1rpx = 0.552px1px = 1.81rpx

轮播图：

<swiper indicator-dots="true" autoplay="true"  interval="5000" 
        duration="1500" circular="true">
			<swiper-item>
				<image src="../../static/jkxd.png"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/logo.png"></image>
			</swiper-item>
		</swiper>

注意：要无限轮播，需要必须设置circular="true"

隐藏导航栏：在pages.json中设置样式（页面样式或者全局样式中）："navigationStyle":"custom",//隐藏导航栏，APP和H5有效

隐藏滚动条：在pages.json中设置样式（页面样式或者全局样式中）："scrollIndicator":"none" // 不显示滚动条 ，只有APP有效

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
Linux: debug: strace: attach: ptrace(PTRACE_SEIZE, 25): Operation not permitted
web前端快速入门（一） html+注册页面
win10硬盘分区怎么分
制作ubuntu 18.04 U盘启动盘
用Ultra Edit批量转换UNIX格式到DOS格式
51单片机 - SPI通信
保姆式安装ChatTTS
Vue中对虚拟dom的理解
java基础练习0723：会员系统（含代码、改进点、关键点、出错点
OpenGL 之 EGL 源码分析
;