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
}
})

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

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

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

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

{
"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": "其他"
 }
 ]
}
}

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

모듈화 지원

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

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

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

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