Editor
vscode를 직접 사용합니다(다른 편집기에도 동일하게 적용되며 여전히 미리보기용으로 WeChat 개발 도구를 사용합니다). 구문 강조를 위해 wxml을 html로, wxss를 css로 설정합니다
"files.associations": {
"*.wxss": "css",
"*.wxml": "html"
}할 수 있습니다. 미니 프로그램 관련 플러그인도 설치
우선 위챗 미니 프로그램 설명서(프레임워크, 컴포넌트, API)를 전부 읽어야 합니다. 나중에 사용할 때 찾을 수 있습니다.
view 구성 요소는 html
text의 p에 해당합니다. 이 선택기는 #id, .className, ::after, ::before
템플릿은 직접 < include/> 또는 필수 값 전달
스타일 사용 @import를 사용하여
js를 사용하여 페이지에 도입 , 다음 mergePage를 사용하여 페이지 개체 중간을 로드합니다.
const ErrorMsg = require('../../../components/error-msg/error-msg');
Page(util.mergePage({
// 页面 Page 方法...
onLoad() {
// 可以直接在页面方法中调用 showErrorMsg 方法
}
}, ErrorMsg/* 更多组件也可以*/));
컴포넌트 작성 방법
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;
}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 객체의 모든 키를 사용할 수 있습니다.
템플릿 문자열let url = `${app.globalData.API_PREFIX}/cart/add`;템플릿의 변수에 값이 없는 경우 데이터가 전달되는지 확인하세요.
개발 도구(v0.10.102800)에서는 다음 방법을 사용하여 도메인 이름을 요청하는 인터페이스를 추가할 수 있지만, 아쉽게도 WeChat에서는 사용할 수 없습니다.
// 放到 app.js 前面 wxConfig.projectConfig.Network.RequestDomain.push('https://weapp.juanpi.com');
모든 페이지의 JS는 페이지가 열릴 때가 아닌 시작할 때 바로 실행되므로 전역적으로 작성된 일부 코드는 최대한 onLoad 뒤에 배치해야 합니다.
Debug2. WeChat 애플릿 개발 UI 레이아웃 기술 요약 위 내용은 WeChat 개발 프로세스의 예를 요약합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!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")
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
