WeChat 미니 프로그램 개발 일주일 요약

다음은 WeChat 애플릿 개발 주간을 요약한 내용입니다. PHP 중국어 웹사이트에서 학생들에게 도움이 되기를 바랍니다.

Editor

저는 vscode를 직접 사용합니다(다른 편집기에도 동일하게 적용됩니다. 저는 여전히 미리보기를 위해 WeChat 개발 도구를 사용합니다). wxml을 html로, wxss를 css

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

로 설정하세요. 미니 프로그램 관련 플러그인

을 설치하고 코드 작성을 시작할 수도 있습니다

• 먼저 나중에 검색하기 쉽도록 WeChat 미니 프로그램 설명서(프레임워크, 구성 요소 및 API)를 모두 읽어야 합니다.

• view 구성 요소는 p에 해당

• text는span에 해당

• wxss 선택기 요소만 지원 , #id, .className, ::after, ::before

퍼블릭 컴포넌트

프로젝트 새 컴포넌트 생성 디렉토리에서 페이지 와 유사한 디렉토리 구조를 따르고 각 구성 요소의 템플릿, 스타일 및 js 파일을 동일한 폴더

• 필요한 경우 템플릿을 직접 사용하거나 +

• 스타일을 사용할 수 있습니다. 값을 전달하려면 @import는

• js를

  require를 사용하여 페이지에 가져온 다음 다음 mergePage를 사용하여 페이지에 로드합니다. 개체 .

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(...)
  }
})

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

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

데이터 매개변수를 템플릿에 전달할 때

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

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

이런 방식으로

변수 를 템플릿에서 사용하여 obj 개체의 모든 키와 ID 및 이름을 사용할 수 있습니다.

templateString

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

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

더 많은 es 6 기능

기타 참고사항

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

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

• 개발툴(v0.10.102800)에서는 다음과 같은 방법으로 도메인 이름을 요청할 수 있는 인터페이스를 추가할 수 있지만, 아쉽게도 위챗에서는 사용할 수 없습니다.

// 放到 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")

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