목차
애플릿의 라이프 사이클 기능은 uni-app과 동시에 호환됩니다.
uni-app WeChat 애플릿의 라우팅은 접두사를 제외하고 동일합니다.
양방향 데이터 바인딩
1 일반 데이터 바인딩이 응답하지 않음
<input value="{
{value}}" />
데이터를 반응형으로 만들기
// 使用setData赋值，使其拥有响应式，达到双向数据绑定的效果
this.setData({
dataAll: this.data.dataAll,
})2 model: 접두사를 사용하여 데이터 바인딩을 반응성으로 만듭니다.
<input model:value="{
{value}}" />
부모-자식 구성 요소 전달 값
하위 구성요소 정의
구성 요소 폴더를 만들고 해당 하위 구성 요소를 새로 만듭니다.
하위 구성요소 가져오기
JSON 파일
"usingComponents": {
"header":"../../components/header"
},아버지가 아들에게
하위 구성 요소의 속성은 부모-자식 데이터를 수락하는 데 사용되는 소품입니다.
하나의 텍스트 서식 지정 : 문자열
형식 2 텍스트: { 유형: 문자열 , 값: '' ,} // 값은 기본값입니다.
아이 삼촌
상위 구성 요소의 맞춤 이벤트
바인드: 맞춤 이벤트 이름 = " "
자식 구성 요소 호출
//作用与emit相似，建议用对象传值
this.triggerEvent('aaa', {k:v}) 로컬 스토리지
비동기
저장 wx.setStorage({ 키: "이름", 데이터: JSON.stringify(데이터) })
wx.getStorage({ key: "name", success:(res)=>{ 성공하면 res는 해당 데이터} })
동기화
저장 wx.setStorageSync('이름', JSON.stringify(데이터))
wx.getStorageSync('name') 가져오기
구성 요소 수명 주기 기능
-
created() : 구성 요소 인스턴스가 방금 생성되었을 때 트리거됩니다.
-
Attached() : 페이지 노드 트리 진입 후 트리거
-
detached() 구성 요소가 페이지 노드 트리를 떠난 후 트리거됨
사용자 정보 얻기
버튼 구성 요소 활성화
<button type="primary" open-type="getUserInfo"
bindgetuserinfo="handleGetUserInfo">
登陆
</button>open-type="getUserInfo" 사용자 정보를 가져오는 버튼의 기능 설정
bindgetuserinfo 는 클릭 후 호출이며 함께 제공되는 형식 매개 변수 중 사용자 정보가 있습니다.
handleGetUserInfo(e) {
console.log(e)
const { userInfo } = e.detail;
}페이지의 기본 구성
| 배경색 |
풀다운 새로 고침의 배경색, 풀다운 새로 고침의 일부는 배경입니다. |
| backgroundTextStyle |
애플릿의 배경 텍스트 스타일은 밝은 색상 과 어두운 색상 의 두 가지 값만 있습니다. |
| navigation바배경색 |
내비게이션 바의 배경색 |
| navigationBarTitleText |
탐색 모음의 제목 텍스트 |
| navigationBarTextStyle |
내비게이션 바의 텍스트 색상은 검정 검정 과 흰색 흰색 두 가지 값만 있습니다 . |
| enablePullDownRefresh |
당겨서 새로 고침 기능을 활성화합니다. 기본값은 false입니다. |
| onReachBottomDistance |
바닥 방법을 트리거하는 거리, 단위는 px입니다. |
탭바 설정
uni-app의 pages.json 에서 구성
"tabBar": {
"color": "#000000",
"selectedColor": "#d00",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"position": "bottom"，
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/icon/shouye.png",
"selectedIconPath": "static/icon/pitch-icon/shouye.png"
}
// 此处进行配置第二个tabBar页面
]
}지침
1 tabBar 최소 2개, 최대 5개
2 아래 폰트 아이콘은 미선택과 선택 2가지 색상이 필요하며 다운로드 후 그림으로 사용하시길 권장합니다.
3 tabBar가 상단으로 설정되면 아이콘이 없고 텍스트만 표시됩니다.
uni-app은 vantUi를 소개합니다
1 내장 터미널 npm은 vant 애플릿 버전을 설치합니다.
2 새 wxcomponents 폴더를 만들고 dist 폴더를 @vant에 복사합니다 . 붙여넣기하고 이름을 vant 로 바꿉니다.
3 vant를 도입하여 생성된 폴더를 삭제할 수 있습니다.
4 vant를 정상적으로 import 하기 위해 필요한데 파일 경로가 "/wxcomponents/vant/...." 입니다.
5 pages.json 에서 구성을 수정합니다 . vant 및 npm 구성을 사용하도록 하십시오. 구체적인 코드는 다음과 같습니다.
동적 상단 텍스트 설정
pages.json에서 새 파일을 만들 때 해당 데이터가 자동으로 추가됩니다. 여기에서 헤더 텍스트를 설정하거나 vant 스타일 을 도입할 수 있습니다.
"path": "pages/list/list",
"style": {
"navigationBarTitleText": "列表",
"enablePullDownRefresh": false,
"usingComponents": {
"van-icon": "/wxcomponents/vant/icon/index",
}
}축 요청 캡슐화
utils 폴더를 만들고 폴더에 http.js 파일을 추가합니다.
function axios({
url,
method = "get",
data = {}
}) {
uni.showLoading({
title: '拼命加载中...',
mask: true
})
return new Promise((resolve, reject) => {
uni.request({
url: "https://www.uinav.com/api/public/v1" + url,
method,
data,
success(res) {
resolve(res.data)
uni.hideLoading()
},
fail(err) {
reject(err)
uni.hideLoading()
uni.showToast({
title: "请求失败"
})
}
})
})
}
export default axios
페이지 이용 시
소개하다
import axios from '../../utils/http.js'사용
axios({ url: '/home/swiperdata'}).then(res => {
console.log(res)
})애플릿의 라이프 사이클 기능은 uni-app과 동시에 호환됩니다.
| 길 위에 |
페이지가 로드되면 vue에 해당하는 생성된 수명 주기를 트리거합니다. |
| 온레디 |
페이지가 처음으로 렌더링되면 Vue에 해당하는 마운트된 수명 주기가 트리거됩니다. |
| 온쇼 |
페이지가 전경으로 표시/잘라지면 Vue와 동일한 활성화를 트리거합니다. |
| onHide |
페이지가 배경으로 숨거나 잘릴 때 Vue의 비활성화에 해당하는 트리거 |
| onUnload |
페이지가 언로드되면 vue와 동일한 소멸된 수명 주기가 트리거됩니다. |
| onPullDown새로 고침 |
풀다운 새로 고침을 위한 후크 기능 |
| onReach바닥 |
풀업 풀업 훅 기능 |
새로고침하려면 켜고 끕니다.
uni.startPullDownRefresh() // 풀다운 새로 고침 기능 활성화
uni.stopPullDownRefresh() // 풀다운 새로 고침을 중지하는 메서드
WeChat 애플릿에서는 wx.startPullDownRefresh ()
애플릿 내비게이션 바 사용자 정의
1 사용할 페이지의 페이지에서 "navigationStyle": "custom" 정의
2 하위 구성 요소를 정의합니다. 이 하위 구성 요소는 사용자 정의 헤더 탐색 표시줄입니다. 이 구성 요소에는 onLode가 없습니다 . 마운트된 것을 사용할 수 있습니다.
uni.getSystemInfo ({})는 휴대폰의 기본 정보를 가져올 수 있습니다.
statusBarHeight 는 모바일 내비게이션 바의 높이입니다.
3 사용된 페이지는 이 구성 요소를 소개하며, 부모-자식 구성 요소를 사용하여 정상적으로 값을 전달할 수 있습니다.
참고: 이 구성 요소에서 클릭 이벤트가 적용되지 않으면 자식에서 부모로 들어오는 이벤트를 트리거할 수 있습니다.
유니앱 하도급
1 페이지는 애플릿을 사용하여 페이지를 배치하는 위치이며, 이와 동일한 수준에서 하위 패키지 폴더를 생성하고 해당 파일을 생성합니다. 형식은 다음과 같습니다.
2 pages.json 에서 하도급을 구성합니다.
"subPackages": [{
"root": "packageOne",
"pages": [
{
"path": "search/search",
"style": {
"navigationBarTitleText": "商品搜索",
"enablePullDownRefresh": true,
"backgroundColor": "#d00",
"onReachBottomDistance": 260
}
}
//在此处添加另一个页面，{path:....,style....}
] }]루트 속성 은 하위 패키지의 폴더 이름이며 하위 패키지 페이지는 페이지 배열 에 배치되며 나머지는 페이지 폴더의 페이지 구성과 일치합니다.
uni-app WeChat 애플릿의 라우팅은 접두사를 제외하고 동일합니다.
레이블 점프
태그 이름
<navigator url="/pages/home/home" open-type="navigate"></navigator>개방형 매개변수
| 탐색하다 |
현재 페이지를 숨기고 새 페이지로 들어갑니다. 페이지 스택에는 최대 10개의 레이어가 있을 수 있습니다. |
| 리디렉트 _ |
현재 페이지를 파괴(닫고)하고 새 페이지로 들어감 |
| switchTab |
특히 탭바 페이지로 이동하는 데 사용되며 탭바가 아닌 모든 페이지를 파괴합니다. |
| 탐색뒤로 |
현재 페이지를 닫고 이전 수준으로 돌아갑니다. |
| 다시 실행 |
모든 페이지를 닫고 새 페이지로 들어가는 탭바 페이지로 이동할 수 있습니다. |
논리적 점프
| 현재 페이지를 유지하고 앱의 페이지로 이동 | |
| 현재 페이지를 닫고 앱의 페이지로 이동 | |
| 모든 페이지를 닫고 앱 내의 페이지를 엽니다. | |
| tabBar 페이지로 이동하고 tabBar가 아닌 다른 모든 페이지를 닫습니다. | |
| 현재 페이지를 닫고 이전 페이지 또는 다단계 페이지로 돌아가기
|
|
| 페이지 미리 로드는 성능 최적화 기술입니다. |
라우팅 매개변수 및 수신 매개변수
참고: switchTab은 매개변수를 전달할 수 없습니다.
예: wx.redirectTo({ url: ' /pages/home/home?id= ' +id })
수신: 페이지 로딩을 모니터링하는 onLoad 함수 의 옵션 개체 에서 구조 분해
이미지 미리보기
// 图片预览
preview(img) { //点击的图片的网址
//接受一个数组或字符串，里面的内容是要预览的图片的网址的集合
let image = this.dataAll.pics.map(item => item.pics_mid_url)
uni.previewImage({ //开启预览的api
current: img, //当前点击的图片
urls: image //图片的集合
})
},uni-app의 내장 팝업 상자
팝업 상자
uni.showToast({
title: '添加成功',
icon: 'checkbox',
mask: true
})로딩
uni.showLoading({
title: '拼命加载中...',
mask: true
})배송 주소 추가
addSite() { //事件
//uni-app获取用户收货地址的api
uni.chooseAddress({
success(res) { //成功时的回调
console.log(res)
}
})
}확인란 구성 요소 사용
v-model 은 패키징된 컴포넌트이기 때문에 동작하지 않음 check 여부 값을 checked 로 설정 @click 을 통해 click 이벤트를 설정하고 이벤트에서 checked 값을 수정할 수 있음 순환형인 경우 data , 이벤트에 첨자를 해당 데이터를 변경합니다.
공유하다
공유 버튼
<button open-type="share">分享</button>해당 로직
onShareAppMessage는 여러 데이터를 반환할 수 있는 매개 변수 옵션이 있는 공유 함수입니다.
onShareAppMessage(
return {
title: " ", //标题
path: '/pages/index/index', //分享的页面
imageUrl: '/images/chiken.webp' //分享的主题图片
}
)스캔 코드
wx.scanCode({ //扫码事件函数
onlyFromCamera: false, //是否只能摄像头扫码，要关闭
scanType: ['barCode', 'qrCode'], //扫描的类型，条形码，二维码
success: (result) => {}, //成功的回调
fail: (res) => {}, //失败的回调
complete: (res) => {}
})개인 정보에 대한 액세스
1 버튼 컴포넌트 작성
<button type="primary" open-type="getUserInfo"
@click="add" v-if="!isWarrant">
登录</button>2 uni.getUserProfile을 사용하여 사용자 권한을 가져오고 확인 버튼을 클릭하면 성공이 트리거되며 res 매개 변수는 획득 성공 시 반환되는 개인 정보입니다.
add() {
uni.getUserProfile({
desc: '用于获取个人资料', // 这里的desc在微信开发文档中要求必须填写的
success: (res) => {
this.isWarrant = true
this.userInfo = res.userInfo
console.log(res.userInfo)
}
})
}