WeChat Mini 프로그램 개발 가이드 자세한 설명

코드 작성

애플릿 인스턴스 생성

개발자의 왼쪽 탐색에서 "편집"을 클릭합니다. tools를 보면 이 프로젝트가 초기화되었으며 몇 가지 간단한 코드 파일이 포함되어 있음을 알 수 있습니다. 가장 중요하고 필수적인 것은 app.js, app.json 및 app.wxss입니다. 그 중 .js 접미사는 스크립트 파일, .json 접미사는 구성 파일, .wxss 접미사는 스타일 시트 파일입니다. WeChat 애플릿은 이러한 파일을 읽고 애플릿 인스턴스를 생성합니다.

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

app.js는 미니 프로그램의 스크립트 코드입니다. 애플릿의 수명주기 기능을 모니터링 및 처리하고 이 파일에서 전역 변수를 선언할 수 있습니다. 이 예에서는 로컬 데이터의 동기 저장 및 동기 읽기와 같이 프레임워크에서 제공하는 풍부한 API를 호출합니다. 사용 가능한 API에 대해 자세히 알아보려면 API 설명서

//app.js
App({
 onLaunch: function () {
 //调用API从本地缓存中获取数据
 var logs = wx.getStorageSync('logs') || []
 logs.unshift(Date.now())
 wx.setStorageSync('logs', logs)
 },
 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을 참조하세요. app.json은 전체 애플릿에 대한 전역 구성입니다. 이 파일에서는 미니 프로그램이 어떤 페이지로 구성되어 있는지 구성하고, 미니 프로그램의 창 배경색을 구성하고, 탐색 표시줄 스타일을 구성하고, 기본 제목을 구성할 수 있습니다. 이 파일에는 설명을 추가할 수 없습니다. 더 많은 구성 항목을 보려면 구성 세부 정보

{
 "pages":[
 "pages/index/index",
 "pages/logs/logs"
 ],
 "window":{
 "backgroundTextStyle":"light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "WeChat",
 "navigationBarTextStyle":"black"
 }
}

app.wxss를 참조하세요. 전체 애플릿에 대한 공통 스타일 시트입니다. 페이지 구성 요소의 클래스 속성에 대해 app.wxss에 선언된 스타일 규칙을 직접 사용할 수 있습니다.

/**app.wxss**/
.container {
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-between;
 padding: 200rpx 0;
 box-sizing: border-box;
}

페이지 만들기

이 튜토리얼에는 두 페이지가 있습니다. 페이지와 로그 페이지, 즉 환영 페이지와 미니 프로그램 시작 로그 표시 페이지는 모두 페이지 디렉토리에 있습니다. 위챗 미니 프로그램의 각 페이지의 [경로 + 페이지 이름]은 app.json의 페이지에 작성해야 하며, 페이지의 첫 번째 페이지는 미니 프로그램의 홈페이지입니다.
각 미니 프로그램 페이지는 index.js, index.wxml, index.wxss, index.json과 같이 동일한 경로에 동일한 이름을 가진 4개의 서로 다른 접미사 파일로 구성됩니다. .js 접미사가 있는 파일은 스크립트 파일이고, .json 접미사가 있는 파일은 구성 파일이며, .wxss 접미사가 있는 파일은 스타일 시트 파일이고, .wxml 접미사가 있는 파일은 페이지 구조 파일입니다.

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

<!--index.wxml-->
<view class="container">
 <view bindtap="bindViewTap" class="userinfo">
 <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
 <text class="userinfo-nickname">{{userInfo.nickName}}</text>
 </view>
 <view class="usermotto">
 <text class="user-motto">{{motto}}</text>
 </view>
</view>

이 예에서는 , , 를 사용하여 페이지 구조를 구축하고 데이터를 바인딩하며 대화형 처리 기능을 수행합니다.

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

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
 motto: 'Hello World',
 userInfo: {}
 },
 //事件处理函数
 bindViewTap: function() {
 wx.navigateTo({
  url: '../logs/logs'
 })
 },
 onLoad: function () {
 console.log('onLoad')
 var that = this
 //调用应用实例的方法获取全局数据
 app.getUserInfo(function(userInfo){
  //更新数据
  that.setData({
  userInfo:userInfo
  })
 })
 }
})
 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 창의 동일한 구성 항목을 덮어씁니다. 지정된 페이지 구성 파일이 없으면 app.json의 기본 구성이 페이지에서 직접 사용됩니다.

로그 페이지 구조

<!--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>

로그 페이지는 태그를 제어하여 코드를 구성하고, 에서 wx:for-items를 사용하여 로그 데이터를 바인딩하고, 로그 데이터를 반복하여 노드를 확장합니다.

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

실행 결과는 다음과 같습니다.

4. 모바일 미리보기보기

개발자 도구 왼쪽 메뉴 표시줄에서 "프로젝트"를 선택하고 "미리보기"를 클릭한 후 QR 코드를 스캔하여 WeChat 클라이언트에서 경험해 보세요.

위는 WeChat Mini 프로그램 개발 가이드에 대한 정보 모음입니다. 앞으로도 관련 정보를 계속 추가하겠습니다. 이 사이트!

위챗 애플릿 개발 가이드 및 관련 글에 대한 자세한 설명은 PHP 중국어 홈페이지를 참고해주세요!