유니앱 기본 사용법
과정 소개:
기본 부품:
- 환경 빌드
- 페이지 모양 구성
- 데이터 바인딩
- 유니앱 라이프 사이클
- 구성 요소 사용
- 유니앱 스타일 학습
- uni-app에서 글꼴 아이콘 사용 및 scss 활성화
- 조건부 주석은 종단 간 호환 가능
- 유니의 이벤트
- 내비게이션 점프
- 구성 요소 생성 및 통신, 구성 요소 수명 주기
- uni-app에서 uni-ui 라이브러리 사용
프로젝트: 다크호스 몰 프로젝트
uni-app 소개 공식 홈페이지
uni-appVue.js를 사용하여 모든 프런트 엔드 애플리케이션을 개발하기 위한 프레임워크입니다. 개발자는 iOS, Android, H5 및 다양한 소규모 프로그램(WeChat/Alipay/Baidu/Toutiao/QQ/DingTalk)에 게시할 수 있는 코드 세트를 작성합니다. 등 플랫폼.
크로스 터미널이 아니더라도 uni-app소규모 프로그램 개발을 위한 더 나은 프레임워크이기도 합니다.
vue 및 WeChat 애플릿 개발 경험이 있으면 uni-app을 빠르게 시작할 수 있습니다.
왜 유니앱을 공부해야 할까요?
개발자에 비해 uni-app만 학습하면 iOS, Android, H5 및 다양한 소규모 프로그램용 애플리케이션을 개발할 수 있고 다른 애플리케이션 개발을 위한 프레임워크를 배울 필요가 없기 때문에 학습 비용이 절감됩니다. 결과적으로 개발 비용도 크게 절감됩니다.
환경 빌드
에디터 HbuilderX 다운로드 주소 설치
HBuilderX는 범용 프런트 엔드 개발 도구이지만 uni-app특별히 향상되었습니다.
바로 사용할 수 있는 앱 개발 버전 다운로드
WeChat 개발자 도구 다운로드
HbuilderX로 프로젝트 초기화
-
HbuilderX 메뉴 모음 파일 > 프로젝트 > 새로 만들기를 클릭합니다.
-
uni-app을 선택하고 프로젝트 이름, 프로젝트에서 생성한 디렉토리를 입력합니다.
[외부 링크 사진 전송 실패, 소스 사이트에 거머리 방지 메커니즘이 있을 수 있으므로 사진을 저장하고 직접 업로드하는 것이 좋습니다(img-6ncfsp9f-1644290214508)(./images/create.jpg)]
프로젝트 실행
메뉴 표시줄에서 실행을 클릭하고 브라우저로 실행한 다음 실행할 브라우저를 선택합니다.
WeChat 개발자 도구에서 실행: hello-uniapp 프로젝트에 들어가 Run -> Run to Mini Program Simulator -> WeChat 개발자 도구를 클릭하면 WeChat 개발자 도구에서 uni-app을 경험할 수 있습니다.
WeChat 개발자 도구에서 실행: hello-uniapp 프로젝트를 입력하고 도구 모음에서 실행 클릭 -> 휴대폰 또는 에뮬레이터로 실행 -> 모드의 휴대폰 선택
알아채다:
- 처음 사용하는 경우 성공적으로 실행하기 전에 애플릿 ide의 해당 경로를 구성해야 합니다.
- WeChat 개발자 도구는 설정에서 안전하게 설정되며 서비스 포트가 열립니다.
프로젝트 디렉토리 및 파일의 역할 소개
pages.json이 파일은 uni-app을 전체적으로 구성하고 페이지 파일의 경로, 창 스타일, 기본 탐색 모음, 하단의 기본 탭 모음 등을 결정하는 데 사용됩니다.
manifest.json파일은 애플리케이션의 구성 파일로 애플리케이션의 이름, 아이콘, 권한 등을 지정하는 데 사용됩니다.
App.vue그것은 우리의 루트 구성 요소이며 모든 페이지가 App.vue그 아래에서 응용 프로그램의 수명 주기 기능을 호출할 수 있는 페이지 항목 파일입니다.
main.js프로젝트 항목 파일이며 주요 기능은 vue인스턴스를 초기화하고 필요한 플러그인을 사용하는 것입니다.
uni.scss파일의 목적은 응용 프로그램의 스타일에 대한 전반적인 제어를 용이하게 하는 것입니다. 예를 들어 버튼 색상, 테두리 스타일 및 uni.scssscss 변수 사전 설정 배치가 파일에 사전 설정되어 있습니다.
unpackage플랫폼별 패키징 파일이 있는 패키징 디렉토리입니다.
pages모든 페이지 저장 디렉토리
static그림 등과 같은 정적 자원 디렉토리
components구성 요소 저장소 디렉터리
컴파일 속도 및 실행 성능과 같은 요소를 고려하여 다중 터미널 호환성을 달성하기 위해 uni-app다음과 같은 개발 사양이 합의되었습니다.
- 페이지 파일은 Vue 단일 파일 구성 요소(SFC) 사양을 따릅니다.
- 구성 요소 레이블은 애플릿 사양에 가깝습니다. 자세한 내용은 uni-app 구성 요소 사양을 참조하십시오.
- 인터페이스 기능(JS API)은 WeChat 애플릿 사양에 가깝지만 접두사를 로
wx교체uni. 자세한 내용은 uni-app 인터페이스 사양을 참조하세요. - 데이터 바인딩 및 이벤트 처리는
Vue.js사양 App 및 페이지의 수명주기를 보완합니다. - 멀티 터미널 동작과 호환되도록 개발 시 플렉스 레이아웃을 사용하는 것이 좋습니다.
전역 구성 및 페이지 구성
globalStyle을 통한 글로벌 구성
애플리케이션의 상태 표시줄, 내비게이션 바, 제목, 창 배경 색상 등을 설정하기 위해 사용합니다. 자세한 문서
| 속성 | 유형 | 기본값 | 설명하다 |
|---|---|---|---|
| navigation바배경색 | HexColor | #F7F7F7 | 탐색 표시줄 배경색(상태 표시줄 배경색과 동일) |
| navigationBarTextStyle | 끈 | 하얀색 | 탐색 표시줄 제목 색상 및 상태 표시줄 전경 색상, 흑백만 지원 |
| navigationBarTitleText | 끈 | 탐색 모음 제목 텍스트 콘텐츠 | |
| 배경색 | HexColor | #ffffff | 창의 배경색 |
| backgroundTextStyle | 끈 | 어두운 | 로딩 스타일을 풀다운, 다크/라이트만 지원 |
| enablePullDownRefresh | 부울 | 거짓 | 풀다운 새로고침 사용 여부에 대한 자세한 내용은 페이지 수명 주기를 참조하세요 . |
| onReachBottomDistance | 숫자 | 50 | 페이지 풀 하단 이벤트가 트리거될 때 페이지 하단으로부터의 거리, 단위는 px만 지원합니다. 자세한 내용은 페이지 수명 주기를 참조하십시오. |
새 메시지 페이지 만들기
새 메시지 디렉토리를 생성하려면 페이지를 마우스 오른쪽 버튼으로 클릭하고 메시지 디렉토리 아래에 새 .vue 파일을 생성하려면 마우스 오른쪽 버튼을 클릭한 다음 기본 템플릿을 선택합니다.
<template>
<view>
这是信息页面
</view>
</template>
<script>
</script>
<style>
</style>
페이지를 통해 페이지 구성
| 속성 | 유형 | 기본값 | 설명하다 |
|---|---|---|---|
| 길 | 끈 | 페이지 경로 구성 | |
| 스타일 | 물체 | 페이지 창 성능 구성, 구성 항목은 pageStyle 참조 |
페이지 배열 배열의 첫 번째 항목은 애플리케이션 시작 페이지를 나타냅니다.
"pages": [ 、
{
"path":"pages/message/message"
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
]
스타일을 통해 페이지의 제목 및 내비게이션 바 배경색을 수정하고 h5 풀다운 새로 고침의 고유 스타일을 설정합니다.
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path":"pages/message/message",
"style": {
"navigationBarBackgroundColor": "#007AFF",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": true,
"disableScroll": true,
"h5": {
"pullToRefresh": {
"color": "#007AFF"
}
}
}
}
]
탭바 구성
해당 어플리케이션이 멀티탭 어플리케이션인 경우 tabBar 구성 항목을 통해 탭 전환 시 표시되는 탭바 및 해당 페이지의 성능을 지정할 수 있습니다.
팁
- 위치가 상단으로 설정되면 아이콘이 표시되지 않습니다.
- tabBar에 있는 목록은 배열이며 최소 2개에서 최대 5개까지만 탭을 구성할 수 있으며 탭은 배열 순서대로 정렬된다.
속성 설명:
| 속성 | 유형 | 필수의 | 기본값 | 설명하다 | 플랫폼 차이점 설명 |
|---|---|---|---|---|---|
| 색상 | HexColor | 예 | 탭의 텍스트 기본 색상 | ||
| 선택된 색상 | HexColor | 예 | 선택 시 탭의 텍스트 색상 | ||
| 배경색 | HexColor | 예 | 탭의 배경색 | ||
| borderStyle | 끈 | 아니요 | 검은색 | 탭바의 상단 테두리 색상으로 검정색/흰색만 지원 | 앱 2.3.4+는 다른 색상 값을 지원합니다. |
| 목록 | 정렬 | 예 | 탭 목록, 자세한 내용은 목록 속성 설명 참조, 최소 2개 및 최대 5개 탭 | ||
| 위치 | 끈 | 아니요 | 맨 아래 | 선택적 값 하단, 상단 | 최상위 값은 WeChat 애플릿에서만 지원됩니다. |
그중 list는 배열을 받고 배열의 각 항목은 객체이며 속성 값은 다음과 같습니다.
| 속성 | 유형 | 필수의 | 설명하다 |
|---|---|---|---|
| 페이지경로 | 끈 | 예 | 페이지 경로, 페이지에서 먼저 정의해야 합니다. |
| 텍스트 | 끈 | 예 | 탭의 버튼 텍스트, 5+APP 및 H5 플랫폼에서는 선택 사항입니다. 예를 들어 텍스트가 없는 + 아이콘을 중간에 배치할 수 있습니다. |
| 아이콘경로 | 끈 | 아니요 | 이미지 경로, 아이콘 크기는 40kb로 제한, 권장 크기는 81px * 81px, 위치가 상단인 경우 이 매개변수가 유효하지 않음, 네트워크 이미지를 지원하지 않음, 글꼴 아이콘을 지원하지 않음 |
| selectedIconPath | 끈 | 아니요 | 선택 시 이미지 경로, 아이콘 크기는 40kb로 제한, 권장 크기는 81px * 81px, 위치가 상단인 경우 이 매개변수는 유효하지 않음 |
케이스 코드:
"tabBar": {
"list": [
{
"text": "首页",
"pagePath":"pages/index/index",
"iconPath":"static/tabs/home.png",
"selectedIconPath":"static/tabs/home-active.png"
},
{
"text": "信息",
"pagePath":"pages/message/message",
"iconPath":"static/tabs/message.png",
"selectedIconPath":"static/tabs/message-active.png"
},
{
"text": "我们",
"pagePath":"pages/contact/contact",
"iconPath":"static/tabs/contact.png",
"selectedIconPath":"static/tabs/contact-active.png"
}
]
}
조건 시작 모드 구성
시작 모드 구성은 개발 기간 동안에만 적용되며 다음과 같은 페이지에 대한 직접 액세스 시나리오를 시뮬레이션하는 데 사용됩니다. 애플릿이 전달된 후 사용자가 열린 페이지를 클릭합니다.
속성 설명:
| 속성 | 유형 | 필수인가요? | 설명하다 |
|---|---|---|---|
| 현재의 | 숫자 | 예 | 현재 활성 모드, 목록 노드의 인덱스 값 |
| 목록 | 정렬 | 예 | 부팅 모드 목록 |
목록 설명:
| 속성 | 유형 | 필수인가요? | 설명하다 |
|---|---|---|---|
| 이름 | 끈 | 예 | 부팅 모드 이름 |
| 길 | 끈 | 예 | 시작 페이지 경로 |
| 질문 | 끈 | 아니요 | 페이지의 onLoad 함수 에서 얻을 수 있는 시작 매개변수 |
구성 요소의 기본 사용
uni-app은 개발자를 위한 풍부한 기본 구성 요소를 제공하며, 개발자는 다양한 구성 요소를 결합하여 빌딩 블록과 같은 자체 애플리케이션을 구축할 수 있습니다.
uni-app의 구성 요소는 , 및 기타 태그의 기능 HTML과 마찬가지로 페이지의 인프라를 구축하는 데 사용됩니다 .divpspan
텍스트 텍스트 구성 요소의 사용
001 - 텍스트 구성 요소의 속성
| 속성 | 유형 | 기본값 | 필수의 | 설명하다 |
|---|---|---|---|---|
| 선택 가능 | 부울 | 거짓 | 아니요 | 텍스트가 선택 사항인지 여부 |
| 공간 | 끈 | . | 아니요 | 연속 공백 표시, 선택적 매개변수: ensp, emsp,nbsp |
| 풀다 | 부울 | 거짓 | 아니요 | 디코딩 여부 |
text구성 요소는 같은 줄에 표시되는 인라인 레이블과 동일합니다.- 텍스트 노드 이외의 노드는 길게 눌러 선택할 수 없습니다.
002 - 코드 예제
<view>
<!-- 长按文本是否可选 -->
<text selectable='true'>来了老弟</text>
</view>
<view>
<!-- 显示连续空格的方式 -->
<view>
<text space='ensp'>来了 老弟</text>
</view>
<view>
<text space='emsp'>来了 老弟</text>
</view>
<view>
<text space='nbsp'>来了 老弟</text>
</view>
</view>
<view>
<text>skyblue</text>
</view>
<view>
<!-- 是否解码 -->
<text decode='true'> < > & '    </text>
</view>
보기 보기 컨테이너 구성 요소 사용
HTML의 div와 유사한 보기 컨테이너 보기
001 - 구성 요소의 속성
[외부 링크 사진 전송 실패, 소스 사이트에 거머리 방지 메커니즘이 있을 수 있으므로 사진을 저장하고 직접 업로드하는 것이 좋습니다(img-UZcbySfw-1644290214509)(./images/2view.png)]
002 - 코드 예제
<view class="box2" hover-class="box2_active">
<view class='box1' hover-class='active' hover-stop-propagation :hover-start-time="2000" :hover-stay-time='2000'>
</view>
</view>
버튼 버튼 컴포넌트 사용
001 - 구성 요소의 속성
| 속성 이름 | 유형 | 기본값 | 설명하다 |
|---|---|---|---|
| 크기 | 끈 | 기본 | 버튼 크기 |
| 유형 | 끈 | 기본 | 버튼의 스타일 유형 |
| 솔직한 | 부울 | 거짓 | 버튼이 비어 있고 배경색이 투명한지 여부 |
| 장애가 있는 | 부울 | 거짓 | 단추 |
| 로딩 | 부울 | 거짓 | 이름에 로딩 t 아이콘이 있는지 여부 |
button구성 요소는 기본적으로 한 줄을 차지하며 로 설정size하면mini여러 구성 요소를 한 줄에 표시할 수 있습니다.
002 - 케이스 코드
<button size='mini' type='primary'>前端</button>
<button size='mini' type='default' disabled='true'>前端</button>
<button size='mini' type='warn' loading='true'>前端</button>
이미지 구성 요소 사용
영상
그림.
| 속성 이름 | 유형 | 기본값 | 설명하다 | 플랫폼 차이점 설명 |
|---|---|---|---|---|
| 소스 | 끈 | 이미지 리소스 주소 | ||
| 방법 | 끈 | 'scaleToFill' | 이미지 자르기 및 확대/축소 모드 |
팁
<image>구성 요소의 기본 너비는 300px이고 높이는 225px입니다.src상대 경로, 절대 경로만 지원하고 base64 코드를 지원합니다.- 페이지 구조가 복잡하고 css 스타일이 너무 많은 경우 이미지를 사용하면 스타일이 느리게 적용되어 "플리커" 현상이 발생할 수 있는데 이때 설정하면 최적화할 수 있습니다
image{will-change: transform}.
유니앱의 스타일
-
rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。
-
使用
@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束 -
支持基本常用的选择器class、id、element等
-
在
uni-app中不能使用*选择器。 -
page相当于body节点 -
定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
-
uni-app支持使用字体图标，使用方式与普通web项目相同，需要注意以下几点：-
字体文件小于 40kb，
uni-app会自动将其转化为 base64 格式； -
字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；
-
字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
@font-face { font-family: test1-icon; src: url('~@/static/iconfont.ttf'); }
-
-
如何使用scss或者less
uni-app中的数据绑定
在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可
export default {
data () {
return {
msg: 'hello-uni'
}
}
}
插值表达式的使用
-
利用插值表达式渲染基本数据
<view>{ {msg}}</view> -
在插值表达式中使用三元运算
<view>{ { flag ? '我是真的':'我是假的' }}</view> -
基本运算
<view>{ {1+1}}</view>
v-bind动态绑定属性
在data中定义了一张图片，我们希望把这张图片渲染到页面上
export default {
data () {
return {
img: 'http://destiny001.gitee.io/image/monkey_02.jpg'
}
}
}
利用v-bind进行渲染
<image v-bind:src="img"></image>
还可以缩写成:
<image :src="img"></image>
v-for的使用
data中定以一个数组，最终将数组渲染到页面上
data () {
return {
arr: [
{
name: '刘能', age: 29 },
{
name: '赵四', age: 39 },
{
name: '宋小宝', age: 49 },
{
name: '小沈阳', age: 59 }
]
}
}
利用v-for进行循环
<view v-for="(item,i) in arr" :key="i">名字：{
{
item.name}}---年龄：{
{
item.age}}</view>
uni中的事件
事件绑定
在uni中事件绑定和vue中是一样的，通过v-on进行事件的绑定，也可以简写为@
<button @click="tapHandle">点我啊</button>
事件函数定义在methods中
methods: {
tapHandle () {
console.log('真的点我了')
}
}
事件传参
-
默认如果没有传递参数，事件函数第一个形参为事件对象
// template <button @click="tapHandle">点我啊</button> // script methods: { tapHandle (e) { console.log(e) } } -
如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据
// template <button @click="tapHandle(1)">点我啊</button> // script methods: { tapHandle (num) { console.log(num) } } -
如果获取事件对象也想传递参数
// template <button @click="tapHandle(1,$event)">点我啊</button> // script methods: { tapHandle (num,e) { console.log(num,e) } }
uni的生命周期
应用的生命周期
生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。
生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数
uni-app 支持如下应用生命周期函数：
| 函数名 | 说明 |
|---|---|
| onLaunch | 当uni-app 初始化完成时触发（全局只触发一次） |
| onShow | 当 uni-app 启动，或从后台进入前台显示 |
| onHide | 当 uni-app 从前台进入后台 |
| onError | 当 uni-app 报错时触发 |
页面的生命周期
uni-app 支持如下页面生命周期函数：
| 函数名 | 说明 | 平台差异说明 | 最低版本 |
|---|---|---|---|
| onLoad | 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例 | ||
| onShow | 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 | ||
| onReady | 监听页面初次渲染完成。 | ||
| onHide | 监听页面隐藏 | ||
| onUnload | 监听页面卸载 |
下拉刷新
开启下拉刷新
在uni-app中有两种方式开启下拉刷新
- 需要在
pages.json里，找到的当前页面的pages节点，并在style选项中开启enablePullDownRefresh - 通过调用uni.startPullDownRefresh方法来开启下拉刷新
通过配置文件开启
创建list页面进行演示
<template>
<view>
杭州学科
<view v-for="(item,index) in arr" :key="index">
{
{item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
arr: ['前端','java','ui','大数据']
}
}
}
</script>
<style>
</style>
通过pages.json文件中找到当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
{
"path":"pages/list/list",
"style":{
"enablePullDownRefresh": true
}
}
通过API开启
uni.startPullDownRefresh()
监听下拉刷新
通过onPullDownRefresh可以监听到下拉刷新的动作
export default {
data () {
return {
arr: ['前端','java','ui','大数据']
}
},
methods: {
startPull () {
uni.startPullDownRefresh()
}
},
onPullDownRefresh () {
console.log('触发下拉刷新了')
}
}
关闭下拉刷新
uni.stopPullDownRefresh()
停止当前页面下拉刷新。
案例演示
<template>
<view>
<button type="primary" @click="startPull">开启下拉刷新</button>
杭州学科
<view v-for="(item,index) in arr" :key="index">
{
{item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
arr: ['前端','java','ui','大数据']
}
},
methods: {
startPull () {
uni.startPullDownRefresh()
}
},
onPullDownRefresh () {
this.arr = []
setTimeout(()=> {
this.arr = ['前端','java','ui','大数据']
uni.stopPullDownRefresh()
}, 1000);
}
}
</script>
上拉加载
通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px
通过onReachBottom监听到触底的行为
<template>
<view>
<button type="primary" @click="startPull">开启下拉刷新</button>
杭州学科
<view v-for="(item,index) in arr" :key="index">
{
{
item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
arr: ['前端','java','ui','大数据','前端','java','ui','大数据']
}
},
onReachBottom () {
console.log('触底了')
}
}
</script>
<style>
view{
height: 100px;
line-height: 100px;
}
</style>
网络请求
在uni中可以调用uni.request方法进行请求网络请求
需要注意的是：在小程序中网络相关的 API 在使用前需要配置域名白名单。
发送get请求
<template>
<view>
<button @click="sendGet">发送请求</button>
</view>
</template>
<script>
export default {
methods: {
sendGet () {
uni.request({
url: 'http://localhost:8082/api/getlunbo',
success(res) {
console.log(res)
}
})
}
}
}
</script>
发送post请求
数据缓存
uni.setStorage
将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
代码演示
<template>
<view>
<button type="primary" @click="setStor">存储数据</button>
</view>
</template>
<script>
export default {
methods: {
setStor () {
uni.setStorage({
key: 'id',
data: 100,
success () {
console.log('存储成功')
}
})
}
}
}
</script>
<style>
</style>
uni.setStorageSync
将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
代码演示
<template>
<view>
<button type="primary" @click="setStor">存储数据</button>
</view>
</template>
<script>
export default {
methods: {
setStor () {
uni.setStorageSync('id',100)
}
}
}
</script>
<style>
</style>
uni.getStorage
从本地缓存中异步获取指定 key 对应的内容。
代码演示
<template>
<view>
<button type="primary" @click="getStorage">获取数据</button>
</view>
</template>
<script>
export default {
data () {
return {
id: ''
}
},
methods: {
getStorage () {
uni.getStorage({
key: 'id',
success: res=>{
this.id = res.data
}
})
}
}
}
</script>
uni.getStorageSync
从本地缓存中同步获取指定 key 对应的内容。
代码演示
<template>
<view>
<button type="primary" @click="getStorage">获取数据</button>
</view>
</template>
<script>
export default {
methods: {
getStorage () {
const id = uni.getStorageSync('id')
console.log(id)
}
}
}
</script>
uni.removeStorage
从本地缓存中异步移除指定 key。
代码演示
<template>
<view>
<button type="primary" @click="removeStorage">删除数据</button>
</view>
</template>
<script>
export default {
methods: {
removeStorage () {
uni.removeStorage({
key: 'id',
success: function () {
console.log('删除成功')
}
})
}
}
}
</script>
uni.removeStorageSync
从本地缓存中同步移除指定 key。
代码演示
<template>
<view>
<button type="primary" @click="removeStorage">删除数据</button>
</view>
</template>
<script>
export default {
methods: {
removeStorage () {
uni.removeStorageSync('id')
}
}
}
</script>
上传图片、预览图片
上传图片
uni.chooseImage方法从本地相册选择图片或使用相机拍照。
案例代码
<template>
<view>
<button @click="chooseImg" type="primary">上传图片</button>
<view>
<image v-for="item in imgArr" :src="item" :key="index"></image>
</view>
</view>
</template>
<script>
export default {
data () {
return {
imgArr: []
}
},
methods: {
chooseImg () {
uni.chooseImage({
count: 9,
success: res=>{
this.imgArr = res.tempFilePaths
}
})
}
}
}
</script>
预览图片
结构
<view>
<image v-for="item in imgArr" :src="item" @click="previewImg(item)" :key="item"></image>
</view>
预览图片的方法
previewImg (current) {
uni.previewImage({
urls: this.imgArr,
current
})
}
条件注释实现跨段兼容
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
**写法：**以 #ifdef 加平台标识 开头，以 #endif 结尾。
平台标识
| 值 | 平台 | 参考文档 |
|---|---|---|
| APP-PLUS | 5+App | HTML5+ 规范 |
| H5 | H5 | |
| MP-WEIXIN | 微信小程序 | 微信小程序 |
| MP-ALIPAY | 支付宝小程序 | 支付宝小程序 |
| MP-BAIDU | 百度小程序 | 百度小程序 |
| MP-TOUTIAO | 头条小程序 | 头条小程序 |
| MP-QQ | QQ小程序 | （目前仅cli版支持） |
| MP | 微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序 |
组件的条件注释
代码演示
<!-- #ifdef H5 -->
<view>
h5页面会显示
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>
微信小程序会显示
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view>
app会显示
</view>
<!-- #endif -->
api的条件注释
代码演示
onLoad () {
//#ifdef MP-WEIXIN
console.log('微信小程序')
//#endif
//#ifdef H5
console.log('h5页面')
//#endif
}
样式的条件注释
代码演示
/* #ifdef H5 */
view{
height: 100px;
line-height: 100px;
background: red;
}
/* #endif */
/* #ifdef MP-WEIXIN */
view{
height: 100px;
line-height: 100px;
background: green;
}
/* #endif */
uni中的导航跳转
利用navigator进行跳转
navigator详细文档：文档地址
跳转到普通页面
<navigator url="/pages/about/about" hover-class="navigator-hover">
<button type="default">跳转到关于页面</button>
</navigator>
跳转到tabbar页面
<navigator url="/pages/message/message" open-type="switchTab">
<button type="default">跳转到message页面</button>
</navigator>
利用编程式导航进行跳转
导航跳转文档
利用navigateTo进行导航跳转
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
<button type="primary" @click="goAbout">跳转到关于页面</button>
通过navigateTo方法进行跳转到普通页面
goAbout () {
uni.navigateTo({
url: '/pages/about/about',
})
}
通过switchTab跳转到tabbar页面
跳转到tabbar页面
<button type="primary" @click="goMessage">跳转到message页面</button>
通过switchTab方法进行跳转
goMessage () {
uni.switchTab({
url: '/pages/message/message'
})
}
redirectTo进行跳转
关闭当前页面，跳转到应用内的某个页面。
<!-- template -->
<button type="primary" @click="goMessage">跳转到message页面</button>
<!-- js -->
goMessage () {
uni.switchTab({
url: '/pages/message/message'
})
}
通过onUnload测试当前组件确实卸载
onUnload () {
console.log('组件卸载了')
}
导航跳转传递参数
在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收
传递参数的页面
goAbout () {
uni.navigateTo({
url: '/pages/about/about?id=80',
});
}
接收参数的页面
<script>
export default {
onLoad (options) {
console.log(options)
}
}
</script>
uni-app中组件的创建
在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可
-
创建login组件，在component中创建login目录，然后新建login.vue文件
<template> <view> 这是一个自定义组件 </view> </template> <script> </script> <style> </style> -
在其他组件中导入该组件并注册
import login from "@/components/test/test.vue" -
注册组件
components: { test} -
使用组件
<test></test>
组件的生命周期函数
| beforeCreate | 在实例初始化之后被调用。详见 | ||
|---|---|---|---|
| created | 在实例创建完成后被立即调用。详见 | ||
| beforeMount | 在挂载开始之前被调用。详见 | ||
| mounted | 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档 |
||
| beforeUpdate | 数据更新时调用，发生在虚拟 DOM 打补丁之前。详见 | 仅H5平台支持 | |
| updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见 | 仅H5平台支持 | |
| beforeDestroy | 实例销毁之前调用。在这一步，实例仍然完全可用。详见 | ||
| destroyed | Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见 |
组件的通讯
父组件给子组件传值
通过props来接受外界传递到组件内部的值
<template>
<view>
这是一个自定义组件 {
{msg}}
</view>
</template>
<script>
export default {
props: ['msg']
}
</script>
<style>
</style>
其他组件在使用login组件的时候传递值
<template>
<view>
<test :msg="msg"></test>
</view>
</template>
<script>
import test from "@/components/test/test.vue"
export default {
data () {
return {
msg: 'hello'
}
},
components: {test}
}
</script>
子组件给父组件传值
通过$emit触发事件进行传递参数
<template>
<view>
这是一个自定义组件 {
{msg}}
<button type="primary" @click="sendMsg">给父组件传值</button>
</view>
</template>
<script>
export default {
data () {
return {
status: '打篮球'
}
},
props: {
msg: {
type: String,
value: ''
}
},
methods: {
sendMsg () {
this.$emit('myEvent',this.status)
}
}
}
</script>
父组件定义自定义事件并接收参数
<template>
<view>
<test :msg="msg" @myEvent="getMsg"></test>
</view>
</template>
<script>
import test from "@/components/test/test.vue"
export default {
data () {
return {
msg: 'hello'
}
},
methods: {
getMsg (res) {
console.log(res)
}
},
components: {
test}
}
</script>
兄弟组件通讯
uni-ui的使用
1、进入Grid宫格组件
2、使用HBuilderX导入该组件
3、导入该组件
import uniGrid from "@/components/uni-grid/uni-grid.vue"
import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
4、注册组件
components: {uniGrid,uniGridItem}
5、使用组件
<uni-grid :column="3">
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
</uni-grid>