유니앱 개인 경험

유니앱이 뭐야?

Uniapp은 공식적으로 vue 구문을 기반으로 한 일련의 코드로 다중 터미널 h5 앱 애플릿을 컴파일할 수 있다는 의미입니다. 글쎄요, 보기에는 매우 좋지만 제품을 만들 경우 해당 기술을 선택하는 것이 좋습니다. 공식에서 코드를 통과하면 #end 등이 강제 분리되고 h5를 작성하는 경우 자체 스캐폴딩 애플릿을 사용하세요. 공식 데모도 있습니다.

다음 설치 환경을 이해하기 위해 개인적으로 유니앱이라고 알고 있는 내용을 소개하고자 합니다. 실제로는 아마도 스몰 프로그램의 퍼블릭 버전(그래픽 카드의 퍼블릭 버전)일 것입니다.

WeChat 미니 프로그램, Alipay 미니 프로그램 등은 공개 버전을 기반으로 하며 고유한 기능을 일부 포함하므로 구문이 매우 유사합니다. 앱 관점에서 보면 미니 프로그램 기능을 지원하지만 기능이 없는 빈 앱입니다. 모든 페이지 표시(공식적으로 표준 베이스라고 함) WeChat에는 미니 프로그램 기능만 있는 것으로 이해하실 수 있습니다. 우리가 만드는 모든 페이지 기능은 이 미니 프로그램을 더욱 풍부하고 강력하게 만들기 위한 것입니다. 즉, 잘됐네요, 위챗도 흉내낼 수 있지만, 사용자 입장에서는 느낄 수 없더라도 앱인 것 같아요.

앞서 언급한 것처럼 표준 베이스는 공식에서 제공하는데, 공식에서는 체험용 테스트 인증서도 제공하지만 공식에서는 앱마다 다른 베이스를 구성할 정도로 좋지 않아 모든 신규 개발자에게 동일한 앱 아이콘이 표시됩니다. 시작 인터페이스의 내부 페이지는 개발자가 수정할 수 있습니다. 또한 푸시 버전 업그레이드, 위치 확인 및 결제와 같은 일부 앱 코어는 공식 버전에서 경험하기 어렵습니다. 맞춤형 기반인 공식 솔루션도 제공됩니다. 자체적으로 고급 기능 사용자 정의를 수행할 수 있으며 그에 따라 iOS, Android 인증서, xcode 시뮬레이터, Android x86 시뮬레이터 등과 같은 더 많은 개발 조건이 있어야 합니다.

너무 많이 말하면 uniapp의 성능만 보고 싶다면 데모를 만들어 효과를 확인하거나 순수 페이지 개발을 위해 공식 앱을 사용할 수 있다는 의미일 것입니다. 특별한 것을 개발하려면 커스텀 베이스를 사용해야 합니다. 프론트엔드 개발에 적합하고 네이티브에 대해 잘 알지 못합니다. 공식에서는 다음과 같이 직접 사용할 수 있는 실용적인 플러그인을 제공하는 플러그인 마켓도 제공합니다. vue 플러그인이 있지만 일부는 비용이 듭니다.

개발 환경

기초적인

Hbuiler: 패키징 도구. 패키징 매개변수 구성(저는 클라우드 패키징을 위해 apicloud를 좋아하는데, 이는 너무 번들로 구성되어 있습니다... 해당 제품을 사용하려면 해당 소프트웨어를 설치하고 계정을 등록해야 합니다)
실제 머신→최고의 Android: 연결하고 실행하면 바로 사용할 수 있습니다.
Android 인증서: 온라인에서 무료로 신청할 수 있습니다.
Chrome: 페이지 레이아웃을 작성할 때 실제 기계가 필요하지 않습니다

기술 스택(프론트엔드 편향)

Vue 제품군 버킷 경로 Vuex 경로 점프 이벤트 저장 배포 소품 슬롯 방출 상위-하위 구성 요소 전달
EventBus 이벤트 수신 배포 수신 취소
Es6은 이 범위 프로토타입 약속 가져오기 내보내기를 알고 재귀적 중복 제거 기능을 작성할 수 있으며 시간 암호화 및 암호 해독과 같은 자체 유틸리티를 캡슐화할 수 있습니다.
버전 번호 개념 wgt 업그레이드(핫 업데이트) 및 전체 패키지 업그레이드
미니 프로그램에는 전역 변수와 지역 변수의 개념이 있다는 것을 이해하는 것이 가장 좋습니다.
중형 프로젝트의 경우 scss 유지 관리 파일을 적게 작성할 수 있는 기능 아직 대부분의 UI가 직접 그려져 있기 때문에 타사 vue ui를 직접 사용할 수 없으며 공식 ui를 기반으로 수정할 수도 있습니다.
아이콘폰트 아이콘 세트는 꼭 필요하지 않거나 벡터라면 정말 낭비입니다.
Webview(네이티브와 h5가 서로 상호 작용하는 방식을 알아보세요)
기업이 h5의 일부를 사용하여 구현하는 경우 다양한 모바일 UI와 적응을 마스터해야 합니다.
onLaunch onShow onHide 트랜잭션과 같은 몇 가지 기본 앱 수명 주기를 이해하고 페이지의 푸시 팝 스택도 이해합니다.

C측 아키텍처

C-side는 사용자가 보게 되는 인터페이스 요소인 다양한 페이지(기본 단위)로 대략 구성되어 있습니다. 페이지 페이지를 작성할 때 세 가지 옵션이 있습니다.

.vue는 기본적으로 h5 vue와 크게 다르지 않습니다. div는 보기로 대체되고, 범위는 텍스트로 대체됩니다. 좀 더 특별한 후크가 있습니다. 작은 프로그램 작성 방법은 대부분의 CSS3 내장 plus+ 개체를 지원합니다.
.nvue는 .vue와 유사하지만 렌더링 엔진이 weex이므로 더 엄격합니다. 예를 들어 배경색은 사용할 수 없고 배경색은 사용할 수 없습니다. css3 의사 클래스는 정적, 절대 또는 탄력적 레이아웃만 사용할 수 있습니다. 물론 , 경험은 기본 내장 plus+ 개체에 더 가깝습니다.
webview의 h5는 문자 그대로 일반 HTML과 동일하며 수동 plus+ 개체가 필요합니다.

plus.runtime.version plus+ 개체란 무엇입니까? wx-jsk처럼 간단히 말하면 현재 버전 번호 가져오기, plus.storage 로컬 저장소, plus.nativeUI기본 인터페이스 등과 같은 고유한 API를 호출하기 전에 페이지에 개체를 삽입해야 합니다.

Uniapp에는 plus 객체가 내장되어 있지만 이를 기반으로 encapsulation 레이어가 존재하며, uni로 시작하는 API 인터페이스는 작은 프로그램 및 앱과의 호환성을 위한 것입니다. 따라서 맨 아래 레이어는 여전히 동일합니다.

Webview
페이지에는 로컬 페이지의 URL이나 콘텐츠가 직접 표시되며, 플러스 객체를 통해 앱의 사용자 정보를 얻어 네이티브 기능을 시작하는 등 쉘과 통신할 수 있습니다.

유니앱에는 웹뷰의 몇 가지 기능이 있습니다.

앱은 주로 webview 객체를 얻은 후 객체 evalJS 메소드를 사용하여 h5에 데이터를 전달합니다. 이벤트 중심이 되려면 EventBus를 사용해야 합니다.
h5는 주로 webview 태그를 가져와서 앱에 데이터를 전달합니다 . @message

기본적으로 공식 제목 표시줄(웹 제목 기준)이 사용됩니다. + 웹 페이지는 Pages.json에 titleNView 개체를 설정합니다.

제목 표시줄을 사용자 정의해야 하는 경우 "navigationStyle": "custom"을 설정한 다음 webview 개체를 가져와 수동으로 설정하세요.
```
wv.setStyle({titleNView:{"titleText": "自定义标题,})
```
앱 스토리지와 h5 plus 스토리지는 상호 운용 가능합니다.

그래서 기본 단위와 기능에 대한 전반적인 이해를 마친 후에는 앱을 개발하려면 네이티브 Vue로 몇 페이지를 작성할 것인지, WebView로 몇 페이지를 작성할 것인지를 생각하기 시작합니다. 또한 100% 네이티브 Vue를 사용하여 작성합니다. 그러나 유지 관리 및 반복이 매우 번거로운 경우(향후 일부 기업에서 새 페이지를 추가해야 하는 경우 버전을 업데이트해야 함) 또는 100% webview 페이지(wap2App 경험은 좋지 않음) 이는 사용자 경험에 어느 정도 영향을 미칠 것입니다.

좋은 APP 경험을 달성하려면 첫 번째 수준 페이지 Tabbar, 콜드 데이터 페이지 등과 같은 초기 단계에서 합리적으로 할당하고 네이티브 vue.h5를 사용하여 핫 데이터 활동이나 특정 비즈니스를 수행해야 합니다. 단, 서버 h5 페이지에 접속할 수 없는 경우에도 해당 App에 접속할 수 있도록 보장합니다. 다른 App 버전 업그레이드 및 푸시 로그인에 대한 친숙한 접근. 기본적으로 처리하는 것이 가장 좋습니다. 해당 App이 속한 산업의 비즈니스 요구에 따라 다릅니다. 에게.

프로젝트를 2부분으로 나누는 것이 가장 좋습니다.

1 uniapp 1 h5는 scss 클래스 및 request.js 와 같은 기술적 수단을 사용하여 개발 경험의 일관성을 유지할 수 있습니다. 스캔 시작과 같은 플러스 객체를 통해 네이티브와 상호 작용하려면 Native.js 도구 클래스를 캡슐화하는 것이 가장 좋습니다. h5에서 직접 코드 메소드를 호출하기만 하면 되고, 초보자라면 그냥 함수 개발에만 집중하면 되고, 베테랑이라면 uniapp 기능과 일부 플러그인을 사용하여 고품질 메소드 클래스를 작성하여 사용자 경험을 향상시킬 수 있습니다. app.scan(callback)

경험

onLaunch App.vue에서 다른 페이지만 선언하고 onShow onLoad 이를 사용하여 onLoad한 번만 트리거할 수 onShow 있으며 무제한일 수 있습니다.
플러그인 마켓의 네이티브 플러그인은 커스텀 베이스 전용이므로, 오피스 파일을 열어 패키지명에 플러그인을 바인딩할 경우 반드시 인증서가 유효한지 확인하시기 바랍니다.
예를 들어 페이지 레이아웃 인터페이스 도킹을 크롬 모드에서 수행하여 SDK 기능을 테스트할 수 있으며, 시뮬레이터를 사용하여 디버깅 및 개발한 후 실제 머신에서 실행하면 효율성을 높일 수 있습니다.
레이아웃하기 전에 uni-ui uni-ui를 고려하세요.
Mescroll 은 아주 좋은 풀업, 스크롤, 풀다운 새로 고침 플러그인이므로 수동으로 작성하지 않는 것이 좋습니다.
webviewiw setStyle시 잠시 setTimeout을 해주고, h5에서 설정해 주어야 합니다.document.addEventListener('plusready',plusReady,false);

일부 Android 기기에서는 초기화 중에 플러스 개체를 찾을 수 없기 때문에 오류가 보고됩니다.
아니면 onLaunch에서 숨겨진 webview를 열어서 h5를 열어서 초기화 문제가 발생하는데, preloading 효과는 이미 달성된 상태인데, 그래도 느리다면 로딩을 해줘야 합니다.
웹 보기 페이지에서 webviews = this.$scope.$getAppWebview() 웹 보기 컬렉션을 가져온 다음 현재 웹 보기를 가져옵니다. wv = currentWebview.children()[0]
예를 들어 웹 보기 사용자 정의 헤더 버튼을 구현하려면 오른쪽 상단의 버튼을 클릭하여 페이지로 이동하고 wv.setStyle({titleNView: {buttons:[btn1,btn2,...}) 버튼 구성을 사용하십시오.

그러나 Android의 버튼 onclick은 string 유형만 허용하는 것으로 보이므로 유사한 호환성 프로세스가 수행되어야 합니다.

                                          //$h5 首先你需要定一个挂在对象 把EventBus挂在进去

	                                 if (plus.os.name=="Android"){
	                  			return "javascript:window.$h5.EventBus.dispatch('"+cbName+"','haha');"
					}else{
						return function(){
							var jsString='window.$h5.EventBus.dispatch("'+cbName+'","haha");'
							wv.evalJS(jsString);
						}
					}

Uniapp은 스파 단일 페이지 애플리케이션을 지원하지만 푸시 및 팝 애니메이션을 직접 처리해야 합니다.
기본 vue+h5 모드를 사용하여 프로젝트를 빌드하고 쉽게 업그레이드할 수 있도록 비율을 약 3-4 7-6으로 열어보세요.
포장시 가장자리가 검은색으로 문제가 발생할 수 있으니 해당 사이즈의 시작 이미지를 준비해주세요.
버전 감지는 수동형과 활성형으로 구분되어야 하며, 일부 시나리오에서는 사용자가 강제로 업데이트해야 합니다.
통합 아이콘에는 벡터 아이콘을 사용하는 것이 좋습니다 . 품질이 좋고 편리하며 h5 uniapp에서 사용할 수 있지만 결국 각 아이콘의 경로는 매우 번거롭습니다.
효과적인 활용 plus.storage 과 plus.sqlite로컬 스토리지는 상세한 콜드 데이터, 이력 데이터 등 어떤 스토리지가 더 나은지 명확하게 구분합니다. 물론 잘 수행되면 키를 사용할 때마다 서버 사본을 제출하여 앱을 더욱 친숙하게 만들고 사용자를 향상시킬 수 있습니다. 경험.
유니앱은 엄청난 기술스택입니다 절대 공식 올인원을 흉내내면 안됩니다 최소한 앱을 만들고 싶다면 그냥 앱을 사용하세요 미니프로그램을 바꾸거나 미니프로그램용으로 사용하세요 처음에는 아주 조잡한 버전이지만 반복하면 시장수준의 앱으로 만들어지는데 전혀 문제가 없습니다. 전제조건은 각각을 잘하는 것입니다. class api sdk
공식에서도 wap2app을 추천하는데, 실제 효과는 괜찮은 편이지만, 웹뷰를 이용해 직접 구현하는 것만큼 좋지는 않습니다.

유니앱이 뭐야?

개발 환경

기초적인

C측 아키텍처

경험

추천