WeChat 미니 프로그램 개발을 시작하는 방법은 무엇입니까? (사진과 글로 자세한 설명)

WeChat 미니 프로그램 개발을 시작하는 방법은 무엇인가요? 이 기사에서는 WeChat 애플릿 개발에 대한 입문 튜토리얼을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다. ㅋㅋ                           

프로그램을 개발할 때 먼저 공식 문서를 찾아야 합니다. 먼저 어떤 공식 문서가 있는지 살펴보겠습니다.

WeChat 애플릿 개발 문서에 대한 링크는 다음과 같습니다: https://mp.weixin.qq.com/debug/wxadoc/dev/index.html,

아래와 같이:

여기가 WeChat 애플릿입니다. 개발이 완료되었습니다. 모든 공식 문서.

이제 문서의 위치를 ​​알았으니 WeChat 애플릿 개발 방법을 소개하겠습니다:

1단계: WeChat 애플릿 개발자 도구를 다운로드하고

설치합니다. 다운로드 경로:

https://mp. qq.com/debug/wxadoc/dev/devtools/download.html

다운로드 인터페이스에 들어간 후, 운영 체제에 따라 다운로드할 해당 링크를 선택하고, 다운로드가 완료된 후 설치하세요.

두 번째 단계: 로그인 도구

개발자 도구를 설치한 후 열 수 있습니다. 처음 열 때 아래와 같이 QR 코드를 스캔하여 WeChat에 로그인해야 합니다. 휴대폰에서 WeChat을 사용하여 로그인을 확인하세요.

3단계: 프로젝트 만들기

1단계: 로그인에 성공하면 인터페이스가 다음과 같이 표시됩니다. 아래 그림에서 "+" 기호를 클릭하여 2단계로 들어갑니다

2단계: 작성 프로젝트 정보는 아래 그림을 참조하여 작성 방법을 확인하신 후 "새로 만들기"를 클릭하여 프로젝트 생성 과정을 완료하세요. (기존 프로젝트인 경우, 즉 해당 프로젝트에 대한 코드 파일이 이미 있는 경우 "프로젝트 가져오기"를 클릭하여 기존 프로젝트를 가져오세요.)

기본적으로 새로 생성된 프로젝트가 생성됩니다. 데모 코드는 코드 구조를 표시하는 데 사용됩니다. 인터페이스는 다음과 같습니다.

4단계: 프로젝트 코드 구조 설명

이 프로젝트가 초기화되었으며 몇 가지 간단한 코드가 포함되어 있음을 볼 수 있습니다. 파일. 가장 중요하고 필수적인 것은 app.js, app.json 및 app.wxss입니다. 그 중

접미사가 스타일시트 파일입니다. WeChat 애플릿은 이러한 파일을 읽고 애플릿 인스턴스를 생성합니다.

수정을 용이하게 하고 자신만의 WeChat 애플릿을 처음부터 개발할 수 있도록 이 세 파일의 기능을 간략하게 이해해 보겠습니다.

1. app.js는 미니 프로그램의 스크립트 코드입니다. 이 파일에서는 애플릿의 라이프사이클 기능을 모니터링 및 처리하고 전역 변수를 선언할 수 있습니다. 이 예에서는 로컬 데이터의 동기 저장 및 동기 읽기와 같이 프레임워크에서 제공하는 풍부한 API를 호출합니다.

2. app.json은 전체 애플릿의 전역 구성입니다. 이 파일에서는 미니 프로그램이 어떤 페이지로 구성되어 있는지 구성하고, 미니 프로그램의 창 배경색을 구성하고, 탐색 표시줄 스타일을 구성하고, 기본 제목을 구성할 수 있습니다. 이 파일에는 설명을 추가할 수 없습니다.

3. app.wxss는 전체 애플릿의 공개 스타일 시트입니다. 페이지 구성 요소의 클래스 속성에 대해 app.wxss에 선언된 스타일 규칙을 직접 사용할 수 있습니다. .js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss

예제 프로그램의 코드에는 두 개의 폴더가 있음을 확인했습니다. 하나는 페이지이고 다른 하나는 utils입니다. 여기서 utils는 일반적인 도구 클래스 메소드를 위한 폴더이고 페이지는 모든 페이지가 저장되는 폴더입니다. 이 페이지에 집중해 보겠습니다.

5단계: 미니 프로그램 페이지 파일 구성

이 예에는 인덱스 페이지와 로그 페이지, 즉 환영 페이지와 미니 프로그램 시작 표시 페이지의 두 페이지가 있습니다. log , 그것들은 모두 페이지 디렉토리에 있습니다. 위챗 미니 프로그램의 각 페이지의 [경로 + 페이지 이름]은 app.json의 페이지에 작성해야 하며, 페이지의 첫 번째 페이지는 미니 프로그램의 홈페이지입니다.

각 미니 프로그램 페이지는 index.js, index.wxml, index.wxss, index.json과 같이 동일한 경로에 동일한 이름을 가진 4개의 서로 다른 접미사 파일로 구성됩니다. 접미사가 .js인 파일은 스크립트 파일이고, 접미사가 .json인 파일은 구성 파일이며, 접미사가 .wxss인 파일은 스타일 시트입니다. 파일 및 .wxml은 페이지 구조 파일입니다. .js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。

index.wxml 是页面的结构文件：

<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>

本例中使用了<view>、<image>、<text>、等组件来搭建页面结构，绑定数据和交互处理函数。

index.js 是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。

//index.js
//获取应用实例
const app = getApp()

Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})

index.wxss 是页面的样式表：

/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}

.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}

.userinfo-nickname {
color: #aaa;
}

.usermotto {
margin-top: 200px;
}

页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

index.json 是页面的配置文件：

页面的配置文件也是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。

logs 的页面结构

<!--logs.wxml-->
<view class="container log-list">
  <block wx:for-items="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

 logs 页面使用 <block/> 控制标签来组织代码，在 <block/> 上使用 wx:for-items 绑定 logs 数据，并将 logs

index.wxml은 페이지의 구조 파일입니다.

//logs.js
var util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {
        return util.formatTime(new Date(log))
      })
    })
  }
})

이 예에서는 <view>

、<image>、<text>

, 구성요소가 페이지 구조를 구축하고 데이터를 바인딩하며 대화형 처리 기능을 수행할 때까지 기다립니다.

index.js는 페이지의 스크립트 파일입니다. 이 파일에서는 페이지의 수명 주기 기능을 모니터링 및 처리하고, 미니 프로그램 인스턴스를 가져오고, 데이터를 선언 및 처리하고, 페이지 상호 작용 이벤트에 응답할 수 있습니다. rrreee

index.wxss는 페이지의 스타일 시트입니다.

rrreee

페이지의 스타일 시트는 선택 사항입니다. 페이지 스타일 시트가 있는 경우 페이지 스타일 시트의 스타일 규칙은 app.wxss의 스타일 규칙 위에 적용됩니다. 페이지의 스타일 시트를 지정하지 않으면 페이지의 구조 파일에서 app.wxss에 지정된 스타일 규칙을 직접 사용할 수도 있습니다.

index.json은 페이지의 구성 파일입니다.

페이지의 구성 파일도 선택 사항입니다. 페이지 구성 파일이 있으면 페이지의 구성 항목이 app.json 창의 동일한 구성 항목을 덮어씁니다. 지정된 페이지 구성 파일이 없으면 app.json의 기본 구성이 페이지에서 직접 사용됩니다.

로그 페이지 구조

rrreee

로그 페이지 사용 <block/>

코드를 정리하기 위한 제어 태그는 <block/>에서 사용됩니다. wx:for-items

logs 데이터를 바인딩하고 logs 데이터를 루프하여 노드를 확장합니다rrreee실행 결과는 다음과 같습니다.

🎜 🎜🎜🎜🎜 5단계: 모바일 미리보기 🎜🎜🎜 개발 도구의 상단 도구 모음에서 "미리보기"를 클릭하여 미리보기 QR 코드를 생성한 후 WeChat 클라이언트에서 경험을 미리 볼 수 있습니다. 🎜🎜🎜🎜🎜 위 내용은 위챗 미니 프로그램의 프론트엔드 개발 기본 과정입니다. 사실 컨텐츠 업데이트가 가능한 미니 프로그램을 만들기 위해서는 프론트엔드 개발만으로는 부족하고, 백그라운드 개발도 필요합니다. . 백엔드 개발은 기본적으로 웹 개발과 동일합니다. java, php, nodejs 등 어떤 언어든 사용할 수 있습니다. 한 가지 주의할 점은 미니 프로그램의 백엔드 서버는 https 프로토콜이어야 한다는 것입니다. 클라우드 서버 및 백엔드 구매 서버는 https 서비스로 설정되어 있습니다. 🎜🎜🎜이 기사는 다음에서 복제되었습니다: https://www.cnblogs.com/niejunchan/p/5904365.html🎜🎜🎜권장: "🎜Mini 프로그램 개발 튜토리얼🎜"🎜

위 내용은 WeChat 미니 프로그램 개발을 시작하는 방법은 무엇입니까? (사진과 글로 자세한 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!