> 위챗 애플릿 > 미니 프로그램 개발 > WeChat 미니 프로그램의 기본 지식 보유

WeChat 미니 프로그램의 기본 지식 보유

coldplay.xixi
풀어 주다: 2020-08-19 17:07:14
앞으로
2745명이 탐색했습니다.

【관련 학습 추천: WeChat 미니 프로그램 개발 튜토리얼

리소스 경로 설명

  • 이미지, 비디오 및 기타 태그의 src 속성과 같은 정적 리소스를 템플릿에 도입할 때 다음을 수행할 수 있습니다. 상대 경로 또는 절대 경로 사용 js 파일을 경로
<!-- 绝对路径,/static指根目录下的static目录,在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>
로그인 후 복사
  • js 파일 또는 스크립트 태그(renderjs 등 포함)에 도입할 때 상대 경로와 절대 경로를 사용할 수 있습니다. js 파일은
// 绝对路径,@指向项目根目录,在cli项目中@指向src目录
import add from &#39;@/common/add.js&#39;
// 相对路径
import add from &#39;../../common/add.js&#39;
로그인 후 복사
  • 로 시작하는 / 도입을 지원하지 않습니다. CSS 파일을 CSS 파일이나 스타일 태그에 도입할 때(scss 및 less 파일에도 동일하게 적용됨) 상대 경로와 절대 경로를 사용할 수 있습니다.
/* 绝对路径 */
@import url(&#39;/common/uni.css&#39;);
@import url(&#39;@/common/uni.css&#39;);
/* 相对路径 */
@import url(&#39;../../common/uni.css&#39;);
로그인 후 복사
  • css 파일이나 스타일 태그에서 참조하는 이미지 경로는 상대 경로나 절대 경로를 사용할 수 있습니다. 일부 애플릿 CSS 파일은 로컬 파일을 참조하는 것이 허용되지 않습니다.
/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);
로그인 후 복사

라이프 사이클

애플리케이션 수명 주기


함수 이름Description
onLaunch실행 시 트리거됨(전역적으로 한 번만 트리거됨)
온쇼 Dang uni-app이 시작되거나 백그라운드에서 포그라운드로 들어가서 표시됩니다
onHide유니앱이 포그라운드에서 백그라운드로 들어갈 때
onError유니앱이 오류를 보고할 때 트리거

페이지 수명 주기


onpagescrollVue 라이프 사이클
함수 이름Description
onLoad페이지 로딩 모니터링, 해당 매개변수는 이전 페이지에서 전달된 데이터이며 매개변수 유형은 다음과 같습니다. 객체 (페이지 매개변수에 사용됨)
onShow 모니터 페이지 표시. 페이지의 초기 렌더링 완료를 듣는 현재 페이지
onReady를 표시하기 위해 하위 수준 페이지에서 돌아오는 것을 포함하여 페이지가 화면에 나타날 때마다 트리거됩니다. 렌더링 속도가 빠르면 페이지 항목 애니메이션이 완료되기 전에 트리거됩니다
onHide페이지 숨김 듣기
onUnload페이지 언로드 듣기
onResizeListen 창 크기 변경을 위한
onPullDownRefresh 사용자 풀다운 작업 모니터링, 일반적으로 풀다운 새로 고침에 사용됨
onReachBottom페이지 풀다운 이벤트 처리 기능
onTabItemTap 탭하면 트리거됨 클릭하면, 매개 변수는 Object
OnShareAppMessage입니다. 사용자는 오른쪽 상단 코너를 클릭하여 공유
을 클릭하여 페이지 스크롤을 모니터링하기 위해 모니터링하는 객체 onnavigationBarButtOnap입니다. 제목 표시줄 버튼 클릭 이벤트, 매개변수는 페이지 반환을 모니터링하는 Object
onBackPress입니다. 반환 이벤트 = {from:backbutton, NavigationBack}, backbutton은 소스가 왼쪽 상단 모서리에 있는 반환 버튼이거나 Android NavigateBack은 소스가 uni.navigateBack임을 나타냅니다.
onNavigationBarSearchInputChanged네이티브 제목 표시줄 검색 입력 상자의 입력 콘텐츠 변경 이벤트를 수신합니다.
onNavigationBarSearchInputConfirmeds네이티브 제목 표시줄 검색 입력 상자 수신 사용자가 소프트 키보드에서 "검색" 버튼을 클릭할 때 발생하는 검색 이벤트
onNavigationBarSearchInputClicked기본 제목 표시줄 검색 입력 상자 클릭 이벤트 듣기

함수 이름

Description—
beforeCreate
created
beforeMount
마운트됨
beforeUpdate
updated
beforeDestroy
destroy

路由

uni-app路由统一有框架管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式。如仍希望采用 Vue Router 方式管理路由,可在插件市场搜索 Vue-Router。

路由跳转

uni-app 有两种页面路由跳转方式:使用navigator组件跳转、调用API跳转

页面栈


路由方式页面栈表现触发时机
初始化新页面入栈uni-app 打开的第一个页面
打开新页面新页面入栈调用 API uni.navigateTo 、使用组件
页面重定向当前页面出栈,新页面入栈调用 API uni.redirectTo 、使用组件
页面返回页面不断出栈,直到目标返回页调用 API uni.navigateBack 、使用组件 、用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换页面全部出栈,只留下新的 Tab 页面调用 API uni.switchTab 、使用组件 、用户切换 Tab
重加载页面全部出栈,只留下新的页面调用 API uni.reLaunch 、使用组件

运行环境判断

// uEnvDev
if (process.env.NODE_ENV === &#39;development&#39;) {
    // TODO
}
// uEnvProd
if (process.env.NODE_ENV === &#39;production&#39;) {
    // TODO
}
로그인 후 복사

页面样式与布局

单位

px为屏幕像素,rpx响应式px,它们之间的换算公式为750 * 元素在设计稿中的宽度 / 设计稿基准宽度

样式导入

<style>
    @import "../../common/uni.css";
    .uni-card {
        box-shadow: none;
    }</style>
로그인 후 복사

flex布局

<style>/*主要有两个概念 容器与项目*/
 .container{
    display: flex; 
    flex-direction:row;
    flex-wrap:nowrap;
    flex-flow: row nowrap;/*简写方式*/
    justify-content: center;/*定义项目在主轴上的对齐方式*/
    align-items:center;/*定义项目在交叉轴上如何对齐*/}.item {
  order: 1;
  flex-grow:0;/*定义项目的放大比例*/
  flex-shrink:1;/*定义了项目的缩小比例*/
  align-self:auto;/*单个项目有与其他项目不一样的对齐方式*/}</style>
로그인 후 복사

定义全局变量

  • 共用模块
  • Vue.prototype
  • globalData
  • Vuex

参考文章 uni-app全局变量的几种实现方式

class与style绑定

支持数组合对象的方式

计算属性

计算属性是基于它们的响应式依赖进行缓存的

条件渲染

v-if v-show

列表渲染

v-for 注意携带key

事件处理

// 事件映射表,左侧为 WEB 事件,右侧为 ``uni-app`` 对应事件{
    click: &#39;tap&#39;,
    touchstart: &#39;touchstart&#39;,
    touchmove: &#39;touchmove&#39;,
    touchcancel: &#39;touchcancel&#39;,
    touchend: &#39;touchend&#39;,
    tap: &#39;tap&#39;,
    longtap: &#39;longtap&#39;, //推荐使用longpress代替
    input: &#39;input&#39;,
    change: &#39;change&#39;,
    submit: &#39;submit&#39;,
    blur: &#39;blur&#39;,
    focus: &#39;focus&#39;,
    reset: &#39;reset&#39;,
    confirm: &#39;confirm&#39;,
    columnchange: &#39;columnchange&#39;,
    linechange: &#39;linechange&#39;,
    error: &#39;error&#39;,
    scrolltoupper: &#39;scrolltoupper&#39;,
    scrolltolower: &#39;scrolltolower&#39;,
    scroll: &#39;scroll&#39;}
로그인 후 복사

表单控件绑定

推荐使用uni-app的表单组件

组件分为全局组件和局部组件

都存在类似的操作,即导入,注册,使用

常见问题

1、如何获取上个页面传递的数据
onLoad(args)
2、如何设置全局的数据和全局的方法
vuex(uni-app已经内置了vuex)

uni-app自带统计平台,只要稍作配制就可以使用

uni统计官网地址:tongji.dcloud.net.cn/                                                 

위 내용은 WeChat 미니 프로그램의 기본 지식 보유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:learnku.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿