mpvue에서 작은 프로그램을 개발하는 단계에 대한 자세한 설명

이번에는 mpvue로 작은 프로그램을 개발하는 단계에 대해 자세히 설명하겠습니다. mpvue로 작은 프로그램을 개발할 때 주의 사항은 무엇인가요?

1. 예시 라이프 사이클

Vue 자체의 라이프 사이클 외에도 mpvue는 미니 프로그램의 라이프 사이클과도 호환됩니다. 라이프 사이클의 이 부분은 WeChat 페이지에서 나옵니다. 미니 프로그램입니다. 특별한 경우를 제외하고는 미니 프로그램의 라이프 사이클 후크를 사용하는 것이 좋습니다.

앱 부분: aOnLAUNCH, 초기화

• onshow, 애플릿이 시작될 때, 또는 백그라운드에서 프런트 데스크에 들어가서 표시

• onhide, 애플릿이 프런트 데스크에서 배경으로 들어갈 때 부분 :

• onLoad, 모니터 페이지 로딩

onShow, 모니터 페이지 표시

• onReady, 모니터 페이지 초기 렌더링 완료

• onHide, 모니터 페이지 숨기기

• onUnload, 페이지 언로드

• onPullDownRefresh, 사용자의 풀다운 작업 모니터링

• onReachBottom, 페이지 풀다운 이벤트에 대한 처리기 기능

• onShareAppMessage, 사용자가 공유하기 위해 오른쪽 상단 모서리 클릭

• 롤, 페이지 스크롤

• onTabItemTap, 현재 탭 페이지를 클릭하면 탭을 클릭할 때 트리거됩니다. (mpvue 0.0.16에서 지원)

• 사용 예:

  new Vue({
    data: {
      a: 1
    },
    created () {
      // `this` 指向 vm 实例
      console.log('a is: ' + this.a)
    },
    onShow () {
      // `this` 指向 vm 实例
      console.log('a is: ' + this.a, '小程序触发的 onshow')
    }
  })
  // => "a is: 1"

참고:

Created: () => console.log(this.a) 또는 vm.$watch('a', newValue => this.myMethod())와 같은 옵션 속성이나 콜백에 화살표 함수를 사용하지 마십시오. 화살표 함수는 상위 컨텍스트에 바인딩되어 있으므로 예상한 대로 Vue 인스턴스가 아니며 this.a 또는 this.myMethod가 정의되지 않습니다.

WeChat 애플릿 페이지의 쿼리 매개변수는 onLoad를 통해 얻습니다. mpvue는 이를 최적화하고 this.$root.$mp.query

를 통해 해당 매개변수 데이터를 직접 얻습니다. onShow 등의 주기적 트리거 이후에 ​​사용됩니다.

1. 2. 템플릿 구문

2. 은 순수 HTML을 지원하지 않습니다.

   애플릿의 모든 BOM/DOM을 사용할 수 없습니다. 즉, v-html 명령이 사용할 수 없습니다.

일부 복잡한 JavaScript 렌더링 표현식을 지원하지 않습니다.

WeChat 애플릿의 용량 제한으로 인해 템플릿의 {{}} 이중 중괄호 부분을 직접 wxml 파일로 인코딩합니다(데이터 바인딩

). 이므로 복잡한 JavaScript 표현식은 지원되지 않습니다.

현재 사용 가능한 항목은 + - * % ?: ! == === > 나머지 부분은 개선이 필요합니다.

필터를 지원하지 않습니다

렌더링 부분이 wxml로 변환됩니다. wxml은 필터를 지원하지 않으므로 이 부분은 지원되지 않습니다.

은 기능을 지원하지 않습니다.

은 템플릿에서 메서드 사용을 지원하지 않습니다.

목록 렌더링

전체 지원 공식 문서: 목록 렌더링

한 가지 주의할 점은

중첩 목록 렌더링의 경우 다른 인덱스를 지정해야 한다는 것입니다!

<!-- 在这种嵌套循环的时候， index 和 itemIndex 这种索引是必须指定，且别名不能相同，正确的写法如下 -->
<template>
    <ul>
        <li>
            {{item.value}}
        </li>
    </ul>
</template>

이벤트 핸들러

입력 및 텍스트 영역의 변경 이벤트가 블러 이벤트로 변환됩니다.

참고:

목록에 없는 기본 이벤트도 사용할 수 있습니다. 예를 들어, Bindregionchange 이벤트는 DOM에서 바인딩을 @

@regionchange로 직접 변경합니다. 이벤트 유형도 매우 특별합니다.

   <map><map></map></map>

小程序能力所致，bind 和 catch 事件同时绑定时候，只会触发 bind ,catch 不会被触发，要避免踩坑。

事件修饰符

- .stop 的使用会阻止冒泡，但是同时绑定了一个非冒泡事件，会导致该元素上的 catchEventName 失效！

• .prevent 可以直接干掉，因为小程序里没有什么默认事件，比如submit并不会跳转页面

• .capture 支持 1.0.9

• .self 没有可以判断的标识

• .once 也不能做，因为小程序没有 removeEventListener, 虽然可以直接在 handleProxy 中处理，但非常的不优雅，违背了原意，暂不考虑

其他 键值修饰符 等在小程序中压根没键盘，所以。。。

三、组件

有且只能使用单文件组件（.vue 组件）的形式进行支持。其他的诸如：动态组件，自定义 render，和

详细的不支持列表：

• 暂不支持在组件引用时，在组件上定义 click 等原生事件、v-show（可用 v-if 代替）和 class style 等样式属性(例： 样式是不会生效的)，因为编译到wxml，小程序不会生成节点，建议写在内部顶级元素上。

• Slot（scoped 暂时还没做支持）

• 动态组件

• 异步组件

• inline-template

• X-Templates

• keep-alive

• transition

• class

• style

小程序组件

mpvue 可以支持小程序的原生组件，比如： picker,map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"

示例代码：

<picker>
    <view>
      当前选择: {{date}}
    </view>
</picker>

四、常见问题

1. 如何获取小程序在 page onLoad 时候传递的 options

在所有 页面 的组件内可以通过 this.$root.$mp.query 进行获取。

2. 如何获取小程序在 app onLaunch/onShow 时候传递的 options

在所有的组件内可以通过 this.$root.$mp.appOptions 进行获取。

3. 如何捕获 app 的 onError

由于 onError 并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在 app 的根组件上添加名为 onError 的回调函数即可。如下：

export default {
   // 只有 app 才会有 onLaunch 的生命周期
   onLaunch () {
       // ...
   },
   // 捕获 app error
   onError (err) {
       console.log(err)
   }
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

前端中排序算法实例详解

JS中使用接口步骤详解

위 내용은 mpvue에서 작은 프로그램을 개발하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!