編輯器
我直接用vscode（其它編輯器同理，預覽還是用的微信開發工具），語法高亮將wxml 設為html, wxss 設定成css
"files.associations": {
"*.wxss": "css",
"*.wxml": "html"
}也可以安裝小程式相關外掛程式
view 元件對應html 裡的p
text 對應span
wxss 裡選擇器只支援element, #id, .className, ::after, ::before
專案目錄里新建components ，按類似pages 目錄結構，將每個元件的模板，樣式和js 檔案放在同一個資料夾
#模板可以直接
樣式使用@import 匯入
#js 使用require 引入到頁面，然後使用下面的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;
}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 傳data 參數時，可以使用物件屬性簡寫，如
<template is="..." data="{{...obj, id: otherIdVariable, name}}"></template>
這樣template 中可以使用變數為obj 物件的所有key，以及id 和name
小程式裡可以直接方便的使用es 6 模板字串
let url = `${app.globalData.API_PREFIX}/cart/add`;
// 放到 app.js 前面 wxConfig.projectConfig.Network.RequestDomain.push('https://weapp.juanpi.com');
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.
微信公眾號平台原始碼下載總結微信小程式開發UI佈局技術微信開發之微信支付值得一看的微信小程式開發經驗摘要以上是總結一個微信開發的過程實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
