以下是微信小程式開發一週總結,希望對php中文網的同學有幫助。
編輯器
我直接用vscode(其它編輯器同理,預覽還是用的微信開發工具),語法高亮將wxml 設定成html, wxss 設定成css
"files.associations": { "*.wxss": "css", "*.wxml": "html" }
# 也可以安裝小程式相關外掛程式
開始寫程式碼
),方便後面用到時尋找。wxss 裡選擇器只支援element, #id, .className, ::after, ::before
#樣式使用@import 導入js 使用
物件
。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`等页面事件 }
/** * 合并 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`;
更多es 6 特性
其它注意
// 放到 app.js 前面 wxConfig.projectConfig.Network.RequestDomain.push('https://weapp.juanpi.com');### ############所有頁面的JS 會在啟動時立即執行,而不是開啟頁面才執行,所以有些寫在全域的程式碼應該盡量放到onLoad 之後,以下是從###調試### source 看到載入的程式碼:########
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")
以上是微信小程式開發一週總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!