WeChat 미니 프로그램 개발을 함께 살펴보세요

이 기사는 WeChat 미니 프로그램의 개발에 대해 설명하며 도움이 필요한 친구들이 참고할 수 있는 매우 실용적인 가치가 있습니다.

위챗 애플릿은 예전부터 꽤 인기가 있었지만 소위 내부 테스트 코드도 없었고 특별히 관심을 기울이지도 않았습니다. 그룹에서 공유할 수 있는 기회를 활용하여 WeChat 미니 프로그램을 자세히 살펴볼 수 있는 좋은 시간입니다. 새로운 것을 이해한다는 것은 그것이 무엇인지(본질), 어떻게 사용하는지(구체적인 용도), 왜 사용하는지(장점과 단점)를 배우는 것에 지나지 않습니다. 먼저 위챗 미니 프로그램이 무엇인지 분석해 보겠습니다. 솔직히 말해서 이게 무슨 개발 메커니즘인지 헷갈리네요. 잡종? 순수한 h5? 인터넷에서 다양한 튜토리얼을 읽은 후, 그들은 API와 구문에 대해서만 이야기하며, 문제가 무엇인지 먼저 명확히 하지 않고 API를 여기로 옮기는 것은 순전히 사기라고 생각합니다.

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 kernel)에서 실행됩니다.

페이지의 스크립트 로직은 윈도우 객체 환경이 없는 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
 }
 })

app.json(Annotated 파일에는 허용되지 않음) 예시는 다음과 같습니다:

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

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

• .js 페이지 로직은 js

• .wxml 페이지 구조는 html에 해당하지만 적용됨 많은 custom 태그

• .wxss 페이지 스타일 시트는 CSS 파일에 해당하며 상위 버전 appapp.wxss보다 우선순위가 높습니다. CSS 작성 방법이 완전히 지원되지 않습니다.

• .json 페이지 구성은 특정 페이지의 제목 및 기타 요소를 지정합니다

개발자의 구성 항목 감소를 용이하게 하기 위해 페이지를 설명하는 4개의 파일은 동일한 경로와 파일 이름을 가져야 한다고 규정되어 있습니다.

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

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

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

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

2): 이벤트 시스템

이벤트 시스템은 React와 유사합니다. 자체 이벤트 시스템을 정의합니다. 일련의 일반적인 이벤트 유형을 포함합니다.

• touchstart 손가락 터치 동작이 시작됩니다

• touchmove 터치 후 손가락이 움직입니다

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

• touchend 手指触摸动作结束

• tap 手指触摸后马上离开

• longtap 手指触摸后，超过350ms再离开

绑定方式：事件绑定的写法同组件的属性，以 key+value 的形式:

以bind或catch开头，然后跟上事件的类型，如bindtap catchtouchstart，

value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡 。例如：

/**
*bind/catch +事件类型，两种事件绑定方式
*/
<view id="outter" bindtap="handleTap1">
 outer view
 <view id="middle" catchtap="handleTap2">
 middle view
 <view id="inner" bindtap="handleTap3">
  inner view
 </view>
 </view>
</view>

3):事件对象：包括BaseEvent 基础事件对象，CustomEvent 自定义事件对象，TouchEvent 触摸事件对象等。

五、优缺点：

1):优点

1、提供相应的类似jsbridge的支持，使得某些功能更为方便

2、本质是mvvm的前端框架，简化操作。

3、提供了比较成型的组件库，构建比较方便

4、基于微信appapp，使得开发成本下降

5、支持模块化

2):缺点 

1、由于框架并非运行在浏览器中，js相关bom的方法无法使用。如 document，window等。不过可以获取当前事件对应的dom对象。相比react还是一样不建议操作dom，jq，zepto等工具库也不好使了 

2、又是一套自己的语法，需要学习时间，不过学习曲线不陡峭

3、目前不支持直接引入 node_modules ,开发者需要使用到node_modules时候建议拷贝出相关的代码到小程序的目录中这样局限性就比较大了，需要自己手动的东西好多

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