WeChat Mini 프로그램 개발 소개

1. 위챗 미니 프로그램이란:

본론으로 돌아가서 위챗 미니 프로그램의 본질은 무엇인가요? 개인적으로 저는 WeChat 미니 프로그램의 본질이 여전히 프런트 엔드 프레임워크 세트라는 것을 알고 있습니다. 원래의 타사 h5 페이지를 기반으로 WeChat 팀은 h5를 사용하여 WeChat에서 기본적으로 구현할 수 있는 기능만 구현할 수 있습니다. 사진 업로드 등 그런 다음 개발자의 편의를 위해 jsbridge API의 개방형 부분을 채택합니다. 그러나 주요 제조업체로서 jsbridge API의 일부만 공개하지는 않을 것입니다. 그런데 WeChat은 현재 WeChat 애플릿인 vue 및 React와 같은 자체 mvvm 프레임워크를 구현했습니다. 공식 문서에서는 다음과 같이 설명합니다. 프레임워크는 자체 뷰 레이어 설명 언어인 WXML 및 WXSS와 JavaScript 기반 로직 레이어 프레임워크를 제공하고, 뷰 레이어와 로직 간의 데이터 전송 및 이벤트 시스템을 제공합니다. 레이어를 통해 개발자는 데이터와 로직에 쉽게 집중할 수 있습니다.

본질적으로 코드는 결국 JavaScript로 패키징되어 미니 프로그램이 시작될 때 미니 프로그램이 삭제될 때까지 실행됩니다. 템플릿 구문은 Vue와 유사하며 기본 사용자 정의 태그에 가깝습니다. 데이터 바인딩렌더링 및 렌더링 구문은 vue와 유사하지만 wx:로 시작합니다(vue는 v:를 식별자로 사용함). 이벤트 시스템은 반응과 같이 자체 이벤트 시스템을 정의합니다.

2. WeChat 운영 환경:

WeChat 애플릿은 iOS, Android 및 디버깅용 개발자 도구의 세 가지 터미널에서 실행됩니다.

iOS에서는 미니 프로그램은 JavaScriptCore에서 실행됩니다

Android에서는 미니 프로그램의 자바스크립트 코드가 X5 커널을 통해 파싱됩니다

개발 도구에서는 미니 프로그램의 자바스크립트 코드 nwjs(chrome 커널)에서 실행됩니다.

페이지의 스크립트 로직은 JsCore에서 실행됩니다. JsCore는 윈도우 객체가 없는 환경이므로 윈도우와 같은 BOM 객체를 스크립트에서 사용할 수 없습니다. 따라서 윈도우나 문서를 통해 DOM 객체를 얻는 jquery, zepto 등의 라이브러리는 사용할 수 없습니다.

3. 디렉토리 구조:

애플릿에는 전체 프로그램을 설명하는 앱과 해당 페이지를 설명하는 여러 페이지가 포함되어 있습니다.

작은 프로그램의 주요 부분은 다음과 같이 프로젝트의 루트 디렉터리에 배치되어야 하는 세 개의 파일로 구성됩니다.

app.js 논리 부분 , 즉 전역 변수 또는 메소드

app.json 공개 구성, 페이지 구성 등, 상단 및 하단 탭 설정, 배경색 등

app.wxss 공개 스타일 시트는 특정 페이지 스타일

app.js 코드(WeChat 공식 데모에서 가져온 코드)로 재정의될 수 있으며 설명은 다음과 같습니다.

//app.js
// 微信小程序就是调用微信开放jsbridge，来完成微信h开发中某些原本比较难的功能的特定的微信前端框架
/**
* app 即小程序的生命周期管理。
* */
App({
// 初始化
onLaunch: function () {
 //调用API从本地缓存中获取数据
 var logs = wx.getStorageSync('logs') || []
 logs.unshift(Date.now())
 wx.setStorageSync('logs', logs)
},
// 全局方法或者变量，可在不同page中使用
getUserInfo:function(cb){
 var that = this
 if(this.globalData.userInfo){
 typeof cb == "function" && cb(this.globalData.userInfo)
 }else{
 //调用登录接口
 wx.login({
  success: function () {
  wx.getUserInfo({
   success: function (res) {
   that.globalData.userInfo = res.userInfo
   typeof cb == "function" && cb(that.globalData.userInfo)
   }
  })
  }
 })
 }
},
globalData:{
 userInfo:null
}
})

rrree

특정 페이지에는 일반적으로 다음이 포함됩니다. 다음 파일(전역 파일과 유사하지만 이 페이지에만 영향을 줌):

.js 페이지 로직은 js와 다르지 않습니다.

.wxml 페이지 구조는 html에 해당하지만, 커스텀 태그가 많이 적용됨

.wxss 페이지 스타일 시트 CSS 파일에 해당하는 은 appapp.wxss보다 우선 순위가 높습니다. CSS 작성 방법은 <🎜을 완전히 지원하지 않습니다. >

.json 특정 페이지의 제목과 기타 요소를 지정하는 페이지 구성

편의상 개발자는 구성 항목을 줄이고 페이지를 설명하는 4개의 파일이 동일한 경로와 파일 이름을 가져야 한다고 규정했습니다. .

즉, 특정 페이지에 해당하는 js나 wxss 파일을 지정할 필요가 없고 경로와 파일명만 동일하게 유지하면 됩니다.

4. 템플릿 언어 및 이벤트 시스템

1): 템플릿 구문은 vue와 유사하며 기본 사용자 정의 태그에 가깝습니다. 데이터 바인딩 및 렌더링은 vue의 구문과 유사하지만 wx로 시작합니다: (vue는 v:를 식별자로 사용합니다) ​​

{
"pages":[
 "pages/index/index",
 "pages/logs/logs",
 "pages/swiper/swiper",
 "pages/input/input",
 "pages/form/form"
],
"window":{
 "navigationBarBackgroundColor": "#ffffff",
 "navigationBarTextStyle": "black",
 "navigationBarTitleText": "微信小程序",
 "backgroundColor": "#eeeeee",
 "backgroundTextStyle": "light"
},
"tabBar":{
 "borderStyle": "white",
 "list": [{
 "pagePath": "pages/index/index",
 "iconPath":"image/icon_API.png",
 "selectedIconPath":"image/icon_API_HL.png",
 "text": "首页"
  },{
 "pagePath": "pages/form/form",
 "iconPath":"image/plus.png",
 "selectedIconPath":"image/green_tri.png",
 "text": "更多"
 }, {
 "pagePath": "pages/swiper/swiper",
 "iconPath":"image/icon_COM.png",
 "selectedIconPath":"image/icon_COM_HL.png",
 "text": "其他"
 }
 ]
}
}

2): 이벤트 시스템

이벤트 시스템은 반응과 유사합니다. 자체 이벤트 시스템 세트를 정의했습니다. 일련의 일반적인 이벤트 유형을 포함합니다:

touchstart 손가락 터치 동작 시작

touchmove 터치 후 손가락 이동

touchcancel 손가락 터치 동작이 중단됩니다. 전화 알림, 팝업창

touchend 손가락 터치 동작 종료

tap 손가락 터치 후 즉시 나가기

longtap 손가락 터치 후 350ms 이상 경과 후 나가기

바인딩 방식 : 이벤트 바인딩 작성 방식은 컴포넌트의 속성과 동일하며 키+값 형식입니다.

는 바인딩 또는 캐치로 시작하여 이벤트의 종류를 따릅니다. , 예를 들어 바인딩탭 catchtouchstart

값은 문자열이며 해당 페이지에서 동일한 이름의 함수를 정의해야 합니다. 그렇지 않으면 이벤트가 트리거될 때 오류가 보고됩니다.

바인드 이벤트 바인딩은 버블링 이벤트가 위쪽으로 버블링되는 것을 방지하지 않으며, 캐치 이벤트 바인딩은 버블링 이벤트가 위쪽으로 버블링되는 것을 방지합니다. 예:

/**
* 类似vue的条件渲染语法，熟悉vue的话应该不会陌生
**/
<view wx:if="{{condition}}">
</view>

3): 이벤트 객체: BaseEvent 기본 이벤트 객체, CustomEvent 사용자 정의 이벤트 객체, TouchEvent 터치 이벤트 객체 등을 포함합니다.

5. 장점과 단점:

1): 장점

1. jsbridge와 유사한 지원을 제공하여 특정 기능을 더욱 편리하게 만듭니다.

2. 본질적으로 mvvm의 프런트엔드 프레임워크로 작업을 단순화합니다.

3. 구축이 더 편리한 비교적 성숙한 구성요소 라이브러리를 제공합니다

4. WeChat 앱을 기반으로 개발 비용이 절감됩니다

5.

모듈화 지원

2): 단점

1. 프레임워크가 브라우저에서 실행되지 않기 때문에 js 관련 BOM 메소드를 사용할 수 없습니다. 문서, 창 등 그러나 현재 이벤트에 해당하는 DOM 개체를 가져올 수 있습니다. React에 비하면 여전히 사용하기 어려운 dom, jq, zepto 및 기타 도구 라이브러리를 작동하는 것은 권장하지 않습니다

2. 자체 구문이 있어 학습 시간이 필요하지만. 학습 곡선이 가파르지 않습니다

3. 개발자가 node_modules를 사용해야 하는 경우 해당 코드를 미니 프로그램의 디렉터리에 복사하는 것이 좋습니다. 더 제한적이고 많은 수동 작업이 필요합니다.

위 내용은 WeChat Mini 프로그램 개발 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!