WeChat 개발 프로세스의 예를 요약합니다.

Editor

vscode를 직접 사용합니다(다른 편집기에도 동일하게 적용되며 여전히 미리보기용으로 WeChat 개발 도구를 사용합니다). 구문 강조를 위해 wxml을 html로, wxss를 css로 설정합니다

"files.associations": {
  "*.wxss": "css",
  "*.wxml": "html"
}

할 수 있습니다. 미니 프로그램 관련 플러그인도 설치

코드 작성 시작

• 우선 위챗 미니 프로그램 설명서(프레임워크, 컴포넌트, API)를 전부 읽어야 합니다. 나중에 사용할 때 찾을 수 있습니다.

• view 구성 요소는 html

• text의 p에 해당합니다. 이 선택기는 #id, .className, ::after, ::before

• public 요소만 지원합니다. 구성 요소

프로젝트 디렉터리에 새 구성 요소를 만듭니다. 페이지와 유사한 디렉터리 구조에 따라 각 구성 요소의 템플릿, 스타일 및 js 파일을 동일한 폴더에 넣습니다.

템플릿은 직접 d3b3ddc11781b045e4b0a9664d2aaf56 또는 필수 값 전달 de3db5173ba162146856f74f89e5f81e + d477f9ce7bf77f53fbcf36bec1b69b7a21c97d3a051048b8e55e3c8f199a54b2

• 스타일 사용 @import를 사용하여

• js를 사용하여 페이지에 도입 , 다음 mergePage를 사용하여 페이지 개체 중간을 로드합니다.

fc430c7db1eecf4621f4fc8a5479f894

• mergePage

구성요소 로드

• const ErrorMsg = require('../../../components/error-msg/error-msg');
  Page(util.mergePage({
    // 页面 Page 方法...
    onLoad() {
      // 可以直接在页面方法中调用 showErrorMsg 方法
    }
  }, ErrorMsg/* 更多组件也可以*/));

mergePage 메소드를 사용하여 모든 구성요소 메소드와 페이지 이벤트를 페이지 객체에 등록하세요

컴포넌트 작성 방법

• var errorTimer;
  module.exports = {
    showErrorMsg(msg, cb) {
      clearTimeout(errorTimer);
      this.setData({
        errorMsg: msg
      });
      errorTimer = setTimeout( () => {
        this.setData({
          errorMsg: false
        });
        cb && cb();
      }, 2000);
    }
    // 可以在这里注册 `onLoad`，`onShow`等页面事件
  }

  컴포넌트에서 this.setData를 사용하여 페이지 데이터를 업데이트하거나 onLoad, onShow 및 기타 페이지 이벤트를 등록할 수 있습니다. mergePage의 마지막 매개 변수가 있는 이벤트가 먼저 호출됩니다.

mergePage 소스 코드

• /**
   * 合并 Page 对象所有的方法及事件
   * 子对象不能使用 data 属性，请在 onLoad 中使用 setData 方法设置
   */
  function mergePage(dest, ...src) {
    let args = arguments;
    let eventsStack = {
      onLoad: [],
      onReady: [],
      onShow: [],
      onHide: [],
      onUnload: [],
      onPullDownRefresh: [],
      onReachBottom: [],
    };
    // 保存所有的事件，最后一个参数的事件会最先调用。
    for(let name in eventsStack) {
      for(let i = args.length - 1; i >= 0; i--) {
        args[i][name] && eventsStack[name].push(args[i][name])
      }
    }
    Object.assign(...args);
    for(let name in eventsStack) {
      dest[name] = function() {
        for(let i = 0; i < eventsStack[name].length; i++) {
          eventsStack[name][i].apply(this, arguments);
        }
      }
    }
    return dest;
  }

  es 6

화살표 함수, 함수 매개변수 기본값 및 분석 구조

wx.request({
  complete: ({data= {}}) => {
    // 1. 因为 wx.request 返回的接口数据是在 data 属性里，这里我们只要 data 属性就行了，所以直接参数解析构
    // 2. 如果 failed，无 data 时，data 将为默认值 {}
    if(data.code !== 0) {
      // do something if request failed
      return;
    }
    // 请求正常处理代码
    // 3. 因为用的箭头函数，回调里可以正常使用 this, 访问 Page 对象的方法
    // 比如 this.setData(...)
  }
})

일부 함수 매개변수는 기본 매개변수를 직접 사용할 수도 있습니다.

연산자 및 객체 속성 약어 확장

data 매개변수를 템플릿에 전달할 때

<template is="..." data="{{...obj, id: otherIdVariable, name}}"></template>

와 같은 객체 속성 약어를 사용할 수 있습니다.

이런 방식으로 템플릿은 obj 객체의 모든 키를 사용할 수 있습니다.

템플릿 문자열

ES 6 템플릿 문자열을 애플릿에서 직접적이고 편리하게 사용할 수 있습니다

let url = `${app.globalData.API_PREFIX}/cart/add`;

더 많은 es 6 기능

기타 참고 사항

wx.showToast 아이콘은 "성공", "로드 중"만 지원하며 오류 프롬프트를 사용자 정의해야 합니다

• 템플릿의 변수에 값이 없는 경우 데이터가 전달되는지 확인하세요.

• 개발 도구(v0.10.102800)에서는 다음 방법을 사용하여 도메인 이름을 요청하는 인터페이스를 추가할 수 있지만, 아쉽게도 WeChat에서는 사용할 수 없습니다.

• // 放到 app.js 前面
   wxConfig.projectConfig.Network.RequestDomain.push('https://weapp.juanpi.com');

모든 페이지의 JS는 페이지가 열릴 때가 아닌 시작할 때 바로 실행되므로 전역적으로 작성된 일부 코드는 최대한 onLoad 뒤에 배치해야 합니다.

Debug

소스 로드된 코드로:

• define("pages/index/index.js", function(require, module, exports, window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,XMLHttpRequest,WebSocket ){ 'use strict';
  var app = getApp();
  var util = require('../../../utils/util');
  var ErrorMsg = require('../../../components/error-msg/error-msg');
  var AddressPicker = require('../../../components/address-picker/address-picker');
  Page(util.mergePage({
    // 页面代码省略
  }, AddressPicker, ErrorMsg));
  //# sourceMappingURL=data:application/json;...
  });require("pages/index/index.js")

  【관련 권장 사항】

1.

WeChat 공개 계정 플랫폼 소스 코드 다운로드

2. WeChat 애플릿 개발 UI 레이아웃 기술 요약

3. WeChat 개발을 위한 WeChat 결제

4.

WeChat 미니 프로그램 개발 경험 요약

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