WeChat 미니 프로그램 개발 등록 및 미리보기에 대한 자세한 설명

이 튜토리얼은 미니 프로그램을 배우고 싶은 학생들에게 빠른 튜토리얼을 제공하기 위해 제작되었습니다. 이전에 React.js나 vue.js와 같은 프론트엔드 프레임워크를 접해본 적이 있다면, 프로그램 개발을 빠르게 배울 수 있습니다. 한번도 접해본 적이 없으시다면 두려워하지 마세요. 이 튜토리얼은 주로 초보자를 위한 것이므로 최대한 자세히 설명하도록 노력하겠습니다. 나는 나와 함께 튜토리얼을 따라한 후에는 작은 프로그램을 개발하는 방법을 확실히 배우게 될 것이라고 믿습니다.

이 튜토리얼은 세 부분으로 구성되어 있습니다:

제1부: 이론

이 부분에서는 WeChat 미니 프로그램 개발관련 기본 지식을 통해 미니 프로그램 개발에 대한 전반적인 개념을 익힐 수 있습니다.

제2부: 실전 전투

는 독자와 친구들이 나와 함께 진짜 작은 프로그램을 개발하고 즐겁게 프로그래밍을 즐길 수 있도록 이끌어 줄 것입니다.

3부: 부록

부록에는 몇 가지 추가 내용이 설명되어 있습니다.

학습 과정에서 궁금한 점이 있으면 제 WeChat 공식 계정을 팔로우하고 직접 질문하세요.

개발 환경 구축

• 최신 버전의 WeChat 애플릿 개발 도구 다운로드: 다운로드 페이지
• 설치하려는 시스템에 적합한 버전을 선택하세요. 현재 windows32, windows64 및 mac 시스템이 지원됩니다
• 설치가 완료된 후 위챗 웹 개발자 도구를 연 뒤, 휴대폰 위챗을 사용해 QR 코드를 스캔해 로그인하세요.
• 프로젝트 추가를 선택하면 새로운 미니 프로그램 프로젝트를 추가하려면 AppID, 프로젝트 이름, 세 부분을 입력해야 하는 것을 볼 수 있습니다. 프로젝트 디렉토리.

여기서 빠른 개발을 위해 먼저 AppID 없음 옵션을 선택해 드리고 있으며, AppID에 대한 자세한 내용은 부록에서 확인하실 수 있습니다. 여기서는 자세히 다루지 않겠습니다.

프로젝트 이름은 프로젝트에 부여하는 이름입니다.

프로젝트 디렉토리는 애플릿의 코드가 위치할 디렉토리를 의미하며, 로컬에 폴더를 생성하거나 github에서 새 프로젝트를 생성할 수 있습니다. 여기서는 단순화를 위해 바탕 화면에 직접 새 폴더를 만들었습니다.

정보를 입력한 후 도구는 기본적으로 현재 디렉토리에 빠른 시작 프로젝트를 생성하는 옵션을 선택합니다. . 기본값을 사용합니다. 괜찮습니다. 변경할 필요가 없습니다.

정상적으로 진행되면 Add Item을 클릭한 후 아래 그림과 같은 화면이 표시됩니다.

이제 미니 프로그램 개발 환경이 설정되었습니다. 다음 섹션에서는 미니 프로그램 구성 방법을 소개하겠습니다.

애플릿 구성

이 섹션에서는 애플릿 구성을 소개합니다. 먼저 프로젝트에서 자동으로 생성된 app.json 파일이 어떤 모습인지 살펴보겠습니다.

실제로 여기서 구성할 수 있는 부분은 페이지, 창, tarBar, networkTimeout 및 디버그의 다섯 가지 부분입니다

페이지: 이 애플릿이 구성되는 페이지를 정의합니다.

나중에 페이지를 추가하거나 줄여야 할 경우 여기에서 설정해야 합니다. 페이지 배열에는 여러 페이지가 있습니다.

페이지가 배열임을 알 수 있으며 배열의 첫 번째 항목은 미니 프로그램의 초기 페이지로 이동하여 볼 수 있습니다. 이것은 개발하는 동안 가지고 있으면 좋은 작은 팁입니다.

또 하나 공유하고 싶은 비결은 새 페이지를 추가해야 할 때 수동으로 폴더를 만든 다음 새 xxx.josn을 만들 필요가 없다는 것입니다. 이 네 가지 파일은 xxx.js, xxx.wxml 및 xxx.wxss입니다. 생성하려는 페이지를 페이지 배열에 추가한 다음 Ctrl + s를 눌러 저장하면 됩니다! 멋지지 않나요?

{
  "pages":[
          "pages/logs/logs",
    "pages/index/index"
  ],
  ...
}

window: 창의 구성 정보를 정의합니다. [td]

아아앙

networkTimeout: 다양한 네트워크 요청에 대한 시간 초과를 설정하는 데 사용됩니다.

이 networkTimeout 구성의 기능에 대해 명확하지 않은 경우 무시하세요. 이는 실제 개발에는 아무런 영향을 미치지 않습니다.

[td]

다음 코드는 예시일 뿐입니다

{
  "tabBar": {
          "backgroundColor": "#fbfbfb",
          "borderStyle": "white",
          "selectedColor":"#50e3c2",
          "color": "#aaa",
          "list": [{
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "images/home.png",
            "selectedIconPath": "images/homeHL.png"
          },{
            "pagePath": "pages/me/me",
            "text": "我",
            "iconPath": "images/me.png",
            "selectedIconPath": "images/meHL.png"
          }]
        }
}

디버그

개발자 도구와 콘솔 패널에서 디버그 모드를 켤 수 있습니다. 개발자 도구, 디버그 정보 info 형태로 제공되며, 해당 정보에는 페이지 등록, 페이지 라우팅, 데이터 업데이트, 이벤트 트리거링 등이 포함됩니다. 이는 개발자가 몇 가지 일반적인 문제를 신속하게 찾는 데 도움이 될 수 있습니다.

如果开启 debug 模式见上面代码

好了，五个部分介绍完了，希望各位在学习完这一节后可以尽情探索，修改各种配置看看效果，毕竟这样印象会更加深刻。

下一节我们将讲到小程序的项目结构。

项目结构

pages

这个文件夹用来存放小程序的页面，可以看到，其中的每个文件夹就表示一个页面，比如，要定义index的页面如何表现，就在index文件夹中的四个文件中定义。

一个页面由四个文件组成，分别是 xxx.js, xxx.json, xxx.wxml, xxx.wxss

• xxx.js 将在下小节讲到，因为这里涉及到的内容比较多，需要单独列出一节来讲。
• xxx.json 和 app.json 类似，app.json是整个微信小程序的配置文件，而xxx.json是xxx这单个页面的配置文件。

比如，logs.json 文件就配置了logs这个页面的 导航栏的标题～

{
    "navigationBarTitleText": "查看启动日志"
}

注意：json 文件中不能有任何注释，不然会报错。

• xxx.wxml은 html의 변형으로 간주할 수 있으며 xml의 구문도 가지고 있습니다.
• xxx.wxss는 CSS로 간주할 수 있습니다.

여기서 이해해야 할 점은 작은 프로그램의 개발은 실제로 웹페이지 개발 기술을 이용해 개발되기 때문에 우리의 학습 비용을 크게 절약할 수 있다는 것이다. 프론트엔드 직원. 그러나 동시에 이 제품은 매우 유사하지만 HTML5가 아니며 개발 과정에서 많은 함정에 직면하게 된다는 점도 염두에 두어야 합니다.

utils

이 폴더에 있는 Utils.js는 주로 일부 공용 기능을 정의하는 데 사용됩니다.

서버 주소를 추상화하기 위해 새 api.js 파일을 생성할 수도 있습니다.

app.js

이 부분은 다음 섹션에서도 다루겠습니다!

app.json

이 파일의 기능에 대해서는 이전 섹션에서 이미 이야기했습니다. 전체 작은 프로그램의 구성 파일.

app.wxss

여기서 정의하는 것은 전체 미니 프로그램의 스타일시트입니다

页面生命周期

终于到了小程序最核心，最关键的部分了，这也是我们理论篇的最后一节，那么我们开始吧！

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

App({
  onLaunch: function() { 
    // Do something initial when launch.
  },
  onShow: function() {
      // Do something when show.
  },
  onHide: function() {
      // Do something when hide.
  },
  globalData: 'I am global data'
})

Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  },
  customData: {
    hi: 'MINA'
  }
})

此时，相信你对小程序开发的理论知识已经有一定了解了。

如果觉得比较模糊，第二部分的实战篇就是为了让我们能够结合理论来进行实践。

如果你比较自信，你也可以直接看这个实战项目的源代码。

위 내용은 WeChat 미니 프로그램 개발 등록 및 미리보기에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!