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

环境配置与目录介绍、基础运用"/>

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

微信小程序：/

Vue:.html#起步

uniapp:

html:.html

css:.html

flex布局：.html

绝对定位和相对定位：.html

HBuildX常用功能使用：

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预编译器，可以嵌套样式；

生命周期：

应用的生命周期：在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。

网络请求：

get请求：

数据缓存：临时的把数据存储到本地，不是数据库；=setstorage

图片上传和预览：

条件注释跨端兼容：

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

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

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

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

平台特有的API实现

// #endif

组件的条件编译：

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

平台特有的组件

<!-- #endif -->

样式的条件编译：

/* #ifdef %PLATFORM% */

平台特有样式

/* #endif */

导航跳转和传参：=navigateto

组件导航跳转：

<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('组件已经销毁')}

组件间的通讯：

父-》子

<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框架。=uniui

单位：

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

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 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有效