유니 응용 프로그램은 vue.js에게 크로스 플랫폼 응용 프로그램을 사용하여 프런트 엔드 개발 프레임 워크입니다.
코드를 작성하여 개발자 Vue.js, 유니 응용 프로그램은 적절한을 보장하고 우수한 경험을 달성하기 위해 여러 플랫폼이 있는데, 안드로이드, 작은 마이크로 채널 프로그램을 컴파일합니다.
유니 응용 프로그램 vue.js에서 상속은 완전한 vue.js 개발 환경을 제공합니다.
유니 앱 컴포넌트 API 사양 및 마이크로 채널은 실질적으로 동일한 애플릿을 연장한다.
작은 마이크로 채널 응용 프로그램 개발 경험 개발자가 빠르게 유니 응용 프로그램을 시작할 수 있습니다 특정 vue.js는 앱이 많은 배와 호환 개발이 있습니다.
유니 응용 프로그램은 조건부 컴파일 최적화 제공
pages.json을 : 구성 페이지, 탐색 모음, 탭 페이지와 다른 유형의 정보를 라우팅.
manifest.json을 : 응용 프로그램 이름, APPID, 로고, 버전 구성
app.vue 응용 프로그램 구성을뿐만 아니라 글로벌 스타일 앱 수명주기 리스너 응용 프로그램을 구성 할 수 있습니다.
main.js : VUE 초기화 파일 항목
정적 디렉토리 : 스토리지 애플리케이션은 정적 리소스 참조하는
페이지 디렉토리 : 비즈니스 페이지 파일 저장 디렉토리
구성 요소 디렉토리 : 구성 요소 파일 저장 디렉토리
유니 앱 페이지 스타일과 레이아웃은
중요
; {플렉스 디스플레이}보기, 글로벌 스타일 app.vue을 삭제하시기 바랍니다
때 필요 플렉스 수 플렉스 사용합니다.
치수
원리가 유사한 REM이며, 유니 앱 프레임 길이 단위는 현재의 PX %를 지원하며, 종래 웹 페이지와 다른, PX는 기준 폭 단위 기준으로, 선별하도록 구성된 이동 단말기를 갖는다.
750px에 대한 폭 유니 응용 프로그램을 참조하는
개발자하기 만 초안 디자인 스타일에 픽셀 값에 따라 다음과 같이 프레임 디자인 초안의 1 x 1 픽셀의 변환 공식의 스타일은 :
750px에 대한 폭 유니 응용 프로그램을 참조
개발자가 디자인 스타일 초안에 따라 픽셀 프레임의 값을 결정하기 만하면됩니다.
도입 스타일
@import 문은 외부 스타일 시트를 가져올 필요가 다음에 외부 스타일 시트, @ 가져 오기 상대 경로를 수입하고, 문장의 끝을 나타냅니다.
<style>
@import "../../common/uni.css";
.uni-card {
box-shadow: none;
}
</style>
인라인 스타일
상부 프레임 어셈블리 스타일을 지원 클래스는 구성 요소의 스타일을 제어하는 속성
style:静态的样式统一写到class中，style接收动态的样式，在运行解析，请尽量避免将静态样式写进style中，以免影响渲染速度。
<view style="color:{{color}};"/>
class:用于指定样式规则，其属性值是样式规则中类选择器名的集合，样式类名不需要带上，样式类名之间用空格分隔。
<view class="normal_view"/>선택기
현재 지원되는 선택기은 다음과 같습니다 :
.class .intro 选择所有拥有 class="intro" 的组件
#id #firstname 选择拥有 id="firstname" 的组件
element view 选择所有view 组件
element, element view, checkbox 选择所有文档的view 组件和所有的checkbox 组件
::after view::after在view组件后边插入内容，仅微信小程序和5+app生效
::before view::before在view组件前边插入内容，仅微信小程序和5+app生效글로벌 스타일과 부분적인 스타일의
app.vue 전역 스타일의 스타일 정의는 각 페이지에 적용. 파일 디렉토리 페이지에 정의 된 뷰 스타일은 일부 스타일은 해당 페이지에서 역할을, 같은 app.vue 선택을 다룰 것입니다.
참고 :
app.vue는 @import 문, 모든 페이지에서 동일한 효과에 의해 봉사 활동 스타일을 가져올 수 있습니다.
플렉스 레이아웃
크로스 플랫폼 프레임 워크를 지원하기는 플렉스 레이아웃을 사용하는 것이 좋습니다
중요
전역 스타일 app.vue을 삭제하십시오
view{display:flex;}
在需要flex的时候使用flex即可치수
유니 앱은 종래 weeb 다른 페이지와 PX 상기 기준 폭에 대하여 단위 길이 및 PX %의 프레임 유닛을 지원하는 화면으로 구성된 이동 단말기를 가지고 상기 원리는 유사 REM이다.
참고 폭 유니 응용 프로그램은 750px입니다.
.content {
flex: 1;
justify-content: center;
align-items: center;
}
.title {
font-size: 36px;
color: #8f8f94;
}pages.json의
pages.json 파일이 세계적으로 구성된 유니 응용 프로그램에 사용되는, 그래서 멀티 탭을 설정하고 페이지 파일 경로, 쇼 윈도우의 결정.
pages.json 구성 항목 목록
어떤 설정을 윈도우 성능의 기본 페이지 오브젝트 없습니다 globalStyle
배열이 페이지 경로 및 윈도우 성능 설정 객체 페이지를
한 tabBar가 하단에 어떤 성능 설정 탭을 반대하지
조건 개체 없음 시작 모드 구성
"globalStyle": {
"navigationBarTextStyle":"white",globalStyle
응용 프로그램의 상태 표시 줄 설정, 탐색 모음, 제목, 윈도우 배경 색상 등이있다.
navigationBarBackgroundColor
导航栏背景颜色
navigationBarTextStyle
导航栏标题颜色
navigationBarTitleText
导航栏标题文字内容
navigationStyle
导航栏样式
backgroundColor
窗口的背景色navigationStyle 만 pages.json-> globalStyle에의 적용, 모든 창에는 탐색 모음 없었다, 사용자 정의를 돌렸다.
페이지는
응용 프로그램 페이지로 지정된 배열을받을 수 있습니다.
해당 페이지의 각 대신 정보, 새로운 응용 프로그램 / 페이지를 줄이고, 페이지 배열을 수정해야합니다.
weui 프레임 워크
weui의 UI 프레임 워크는 작은 프로그램들의 집합이라고 UI 프레임 워크는 우리가 함께 콘텐츠가 풍부한 작은 프로그램으로 조각하는 데 사용할 수 있습니다, 구성 요소, 인터페이스 디자인의 집합이며, 프레임 워크 UI로, 당신은 할 수 있습니다 우리의 작은 프로그램이 더 아름다운된다.
경험 weui 애플릿
weui 공식 마이크로 채널 디자인 팀이, 당신이 휴대 전화에서 체험 할 수있는 weui 애플릿을 검색하거나 모바일 마이크로 편지에서 스캔 일관되게 스타일 라이브러리에 대한 기본 시각 경험을 가진 마이크로 채널을 설계합니다.
우리는 또한 특히 수행하는 방법입니다 개발자 도구의 소스 코드를 weui 애플릿보기 다운로드 할 수 있습니다.
당신이 weui-wxss 마스터 폴더를 볼 수 있습니다 추출 압축 파일을 다운로드 한 후, 다음 개발자 도구에 weui하는 소스 코드를 볼 수 있습니다, 개발자 도구 모음을 클릭하고 프로젝트 가져 오기 메뉴 항목을 선택합니다.
프로젝트 이름, 당신은 당신의 자신의 이름을 지정할 수 있습니다.
드롭 다운 선택 APPID을.
작은 작업 : 왜 DIST weui-wxss 마스터 폴더에있는 파일이 아니라 weui-wxss 마스터보다입니까?
Weui는 개발자 도구의 실제 경험과 weui 시뮬레이터 소스 코드와 함께, 기사에서 weui 기본 구성 요소를 찾을 플렉스, 그리드, 패널, 버튼의 형태로 구성 요소, 해당 페이지 폴더 페이지 파일과 목록, wxml는, 페이지 파일을 볼은 작성하는 방법을 확인하기 위해 코드를 wxss합니다.
작은 작업은 공식 살펴보고, 휴대 전화 마이크로 채널을 2 차원 코드 스캔 경험을 이용하고, 개발자 도구 미리보기 열을 클릭 어떤 다른 작은 프로그램을 weui.
weui 인터페이스, 매우 간단하지만,하지만 우리가 읽을 수있는 디자인 컨셉, 많이 포함 뒤에.
weui 사용
pages
image
style
weui.wxss
app.js
app.json
app.wxss두 번째 줄은 템플릿 파일에 다음 코드를 추가 열 app.wxss 개발자 도구 애플릿을 사용합니다 :
@import 'style/weui.wxss';플렉스 레이아웃
파일을 wxml 텍스트, 링크, 이미지 및 기타 요소와 구성 요소를 추가하는 방법, 우리는 그들에게 더 이상 상하 관계가 간단하고,이 관계에 대해, 그리고, 레이아웃 요소 및 구성 요소보다 구조를 부여 할 상하 중첩 사이의 관계에 대한 .
레이아웃도 스타일, 지식 CSS 오의 측면에 있습니다.
레이아웃 애플릿은 박스 모델에 대한 최대의 유연성을 제공하기 위해, 레이아웃 플렉스, 플렉스 탄성 레이아웃을 사용합니다.
<view class="flex-box">
<view class="list-item">Python</view>
<view class="list-item">小程序</view>
<view class="list-item">网站建设</view>
</view>.list-item {
background-color: #82c2f7;
height: 100px;
text-align: center;
border: 1px solid #bdd2f8;
}구성 요소의 관계에 대해됩니다 보자
.flex-box {
display: flex;
}한 tabBar
이상의 애플리케이션 탭 애플리케이션은 지정된 열의 한 tabBar 탭의 성능, 표시를 전환 할 수있는 해당 페이지의 탭에 의해 구성 될 수있는 경우.
설정 위치가 상단 인 경우,이 아이콘을 표시하지 않습니다
속성 설명 :
이름 문자열 응용 프로그램 이름
APPID 문자열
응용 프로그램 식별자
설명
응용 프로그램 설명
versionName을 버전 이름
versionCode를 버전 번호
앱 플러스
고유의 프로필
quickapp
빠른 응용 프로그램 별 구성
MP-weixion
마이크로 편지 애플릿 별 구성
MP-바이
바이 고유 한 구성
MP-Alipay의
Alipay의 작은 프로그램 별 구성
구성 파일의 manifest.json
MP-weixin는
속성 유형 설명
----
이 번호의 내용이 비트 장소를하지 않는 경우 (예 : 저작권 또는 기타 문제), 적시에 할 수있다 정류 문의하시기 바랍니다 처음으로 처리됩니다.
엄지 손가락주세요! 동의하기 때문에 / 격려 내 글의 가장 큰 힘이다!
에 오신 것을 환영합니다 관심 틈새 T-의 제인 책!
이것은 품질, 태도의 블로그
