Editor

vscode? ?? ?????(?? ????? ???? ???? ??? ??????? WeChat ?? ??? ?????). ?? ??? ?? wxml? html?, wxss? css? ?????

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

? ? ????. ?? ???? ?? ????? ??

?? ?? ??

• ?? ?? ?? ???? ???(?????, ????, API)? ?? ??? ???. ??? ??? ? ?? ? ????.

• view ?? ??? html

• text? p? ?????. ? ???? #id, .className, ::after, ::before

• public ??? ?????. ?? ??

???? ????? ? ?? ??? ????. ???? ??? ???? ??? ?? ? ?? ??? ???, ??? ? js ??? ??? ??? ????.

???? ?? < include/> ?? ?? ? ?? +

• ??? ?? @import? ????

• js? ???? ???? ?? , ?? mergePage? ???? ??? ?? ??? ?????.

• mergePage

???? ??

• const ErrorMsg = require('../../../components/error-msg/error-msg');
  Page(util.mergePage({
    // 頁面 Page 方法...
    onLoad() {
      // 可以直接在頁面方法中調(diào)用 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 方法設(shè)置
   */
  function mergePage(dest, ...src) {
    let args = arguments;
    let eventsStack = {
      onLoad: [],
      onReady: [],
      onShow: [],
      onHide: [],
      onUnload: [],
      onPullDownRefresh: [],
      onReachBottom: [],
    };
    // 保存所有的事件，最后一個參數(shù)的事件會最先調(diào)用。
    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 返回的接口數(shù)據(jù)是在 data 屬性里，這里我們只要 data 屬性就行了，所以直接參數(shù)解析構(gòu)
    // 2. 如果 failed，無 data 時，data 將為默認值 {}
    if(data.code !== 0) {
      // do something if request failed
      return;
    }
    // 請求正常處理代碼
    // 3. 因為用的箭頭函數(shù)，回調(diào)里可以正常使用 this, 訪問 Page 對象的方法
    // 比如 this.setData(...)
  }
})

?? ?? ????? ?? ????? ?? ??? ?? ????.

data ????? ???? ??? ?

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

? ?? ?? ?? ??? ??? ? ????.

?? ???? ???? obj ??? ?? ?? ??? ? ????.

ES 6 ??? ???? ????? ????? ???? ??? ? ????

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

?? ?? ??

wx.showToast ???? "??", "?? ?"? ???? ?? ????? ??? ???? ???

• ???? ??? ?? ?? ?? ???? ????? ?????.

• ?? ??(v0.10.102800)??? ?? ??? ???? ??? ??? ???? ?????? ??? ? ???, ???? WeChat??? ??? ? ????.

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

?? ???? JS? ???? ?? ?? ?? ??? ? ?? ????? ????? ??? ?? ??? ??? onLoad ?? ???? ???.

?? ??? ???:

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