之前聽別人開玩笑的說過會vue的想開發(fā)微信小程序很簡單，于是找了一個(gè)時(shí)間去試了一試砰蠢。
不是開玩笑蓖扑，如果你有一點(diǎn)vue的基礎(chǔ)，要入個(gè)門台舱，進(jìn)行簡單的開發(fā)真的不難律杠，你不信自己動手試試就知道。
首先你需要去微信開發(fā)者官網(wǎng)注冊一個(gè)小程序竞惋，每個(gè)郵箱只能申請一個(gè)柜去，申請過程很簡單我就不細(xì)說了。
申請成功之后你拿到你的AppID拆宛，并且去下載小程序開發(fā)者工具嗓奢。附上鏈接:開發(fā)者工具?自己選擇系統(tǒng)進(jìn)行下載
安裝完成后打開并登錄，創(chuàng)一個(gè)新項(xiàng)目
默認(rèn)創(chuàng)建后的程序目錄如上
app.json 是對當(dāng)前小程序的全局配置浑厚，包括了小程序的所有頁面路徑股耽、界面表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間瞻颂、底部 tab 等豺谈。
這是我修改后的app.json配置，配置的參數(shù)具體參考官網(wǎng)的解釋:app.json配置詳細(xì)
1.pages字段 ——?接受一個(gè)數(shù)組贡这，每一項(xiàng)都是字符串茬末，來指定小程序由哪些頁面組成。每一項(xiàng)代表對應(yīng)頁面的【路徑+文件名】信息盖矫，數(shù)組的第一項(xiàng)代表小程序的初始頁面丽惭。小程序中新增/減少頁面，都需要對 pages 數(shù)組進(jìn)行修改辈双。
2.window字段 —— 用于設(shè)置小程序的狀態(tài)欄责掏、導(dǎo)航條、標(biāo)題湃望、窗口背景色换衬。
因?yàn)槲覀儠簳r(shí)不用登錄，獲取用戶信息等功能证芭，所以我們可以修改一下app.js瞳浦，將之前的全刪了，然后敲app有提示的废士，按回車會出來很多代碼叫潦，上面有注釋都寫得很清楚。
App({
? /**
? * 當(dāng)小程序初始化完成時(shí)官硝，會觸發(fā) onLaunch（全局只觸發(fā)一次）
? */
? onLaunch: function () {
? ? console.log("小程序初始化完成");
? },
? /**
? * 當(dāng)小程序啟動矗蕊，或從后臺進(jìn)入前臺顯示短蜕，會觸發(fā) onShow
? */
? onShow: function (options) {
? ? console.log("小程序啟動或進(jìn)入了前臺");
? },
? /**
? * 當(dāng)小程序從前臺進(jìn)入后臺，會觸發(fā) onHide
? */
? onHide: function () {
? ? console.log("小程序進(jìn)入到了后臺");
? },
? /**
? * 當(dāng)小程序發(fā)生腳本錯(cuò)誤傻咖，或者 api 調(diào)用失敗時(shí)朋魔，會觸發(fā) onError 并帶上錯(cuò)誤信息
? */
? onError: function (msg) {
? ? console.log("小程序出錯(cuò)啦："+msg);
? }
})
下面我們來修改index.wxml，修改后的內(nèi)容如下圖没龙。在這里語法我就不講了铺厨，用過vue的基本都能看懂，沒用過的自己去看微信的開發(fā)文檔硬纤，因?yàn)檫@語法不是一會半會能講完的解滓。
下面是index.wxss內(nèi)容，就是一些簡單的css筝家，.window下的text-align: right;是我測試text標(biāo)簽的時(shí)候加上去的洼裤，你們可以不寫，因?yàn)閷懥艘部床怀鲂Ч麃硐酰瑧?yīng)該是要設(shè)置text的大小才能體現(xiàn)出效果來腮鞍，你們可以自己去試試。
下面試index.js的內(nèi)容
然后下面就是運(yùn)行后的結(jié)果
點(diǎn)擊標(biāo)題莹菱，標(biāo)題樣式會改變移国，因?yàn)辄c(diǎn)擊的時(shí)候我們將它的class改變了
怎樣，是不是很簡單道伟。感興趣的你可以下去自己嘗試嘗試迹缀，只要你肯多動手，你會發(fā)現(xiàn)其實(shí)很簡單
下面附上個(gè)人博客鏈接：勤奮的懶人
