前言
此文非教程,主要記錄小程序實際開發過程中的一些體驗,O(∩_∩)O。
小程序自帶前端組件及API,官方文檔有詳盡的使用教程,使用起來還是比較方便的, 在服務端的開發上我使用的是node.js(作為前端較易上手),服務器使用的是入門級阿里云ECS(1核,2G,1Mbps帶寬),數據庫使用mysql+redis(session存儲),部署于服務器本地,使用git作為代碼管理工具。
開發者工具
官網下載:mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html
AppID
若小程序僅供本地調試使用,可不填AppID,添加項目時選擇"無AppID即可";
若需使用AppID,登錄mp.weixin.qq.com,就可以在網站的“設置”-“開發者設置”中,查看到微信小程序的 AppID 了,注意不可直接使用服務號或訂閱號的 AppID。
創建quick start
方法1:
使用微信web開發者工具新建小程序,項目目錄選擇一個空的文件夾,開發者工具會提示,是否需要創建一個 quick start 項目。選擇“是”,開發者工具會幫助我們在開發目錄里生成一個簡單的 demo。
方法2:
在官方文檔(mp.weixin.qq.com/debug/wxadoc/dev/)中下載quick start源碼到指定小程序路徑
使用微信web開發者工具新建小程序,項目目錄指向小程序系統路徑
打開quick start
比照官方文檔,了解小程序的框架配置:
全局配置文件(app.json)
app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成,配置小程序的窗口?背景色,配置導航條樣式,配置默認標題。注意該文件不可添加任何注釋;
官網配置詳解參考:mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html
全局定義(app.js)
app.js是小程序的腳本代碼,我們可以在這個文件中監聽并處理小程序的生命周期函數、聲明全局變量、調用框架提供的豐富的 API;
API使用參考官網文檔:mp.weixin.qq.com/debug/wxadoc/dev/api/
全局樣式(app.wxss)
app.wxss 是整個小程序的公共樣式表。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規則。
拓展工具/插件類文件夾(utils)
放置拓展工具/插件類文件,以日期轉換插件為例:
在頁面腳本文件中引用,如:
require('../../utils/date-format.js').dateformat()
travel.date = new Date(travel.date).Format('yyyy-MM-dd')
頁面文件夾
每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成:
JS: 頁面的腳本文件,在這個文件中我們可以監聽并處理頁面的生命周期函數、獲取小程序實例,聲明并處理數據,響應頁面交互事件等;
JSON:是頁面的配置文件,當有頁面的配置文件時,配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件,則在該頁面直接使用 app.json 中的默認配置;
WXML:頁面的結構文件;
WXSS:頁面的樣式表,當有頁面樣式表時,頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表,也可以在頁面的結構文件中直接使用 app.wxss 中指定的樣式規則。
新建頁面
小程序新增單頁無需手動添加文件或文件夾,在全局配置中注冊新的單頁地址即可,保存后會自動創建該單頁的文件夾及文件
手機預覽
開發者工具左側菜單欄選擇"項目",點擊"預覽",掃碼后即可在微信客戶端中體驗。