本文作者:毀小慕,來自原文地址 微信小程序已經(jīng)推出很久了,最近開始有時(shí)間搗鼓一下,由于從來沒有寫過任何前端代碼,所以這篇博文也是總結(jié)自己摸索調(diào)研的過程,希望對(duì)像我一樣前端0經(jīng)驗(yàn)的同學(xué)有所幫助。 1. 環(huán)境小程序發(fā)布流程如下圖: 1.1 微信認(rèn)證根據(jù)用戶不同需求, 對(duì)注冊(cè)要求也不同:
類型1\2的用戶, 首先需要一個(gè)非綁定個(gè)人帳號(hào)的郵箱在微信公眾平臺(tái)上注冊(cè), 注冊(cè)步驟可參考官方文檔,類型選擇企業(yè)類型, 需要填寫企業(yè)名稱和營業(yè)執(zhí)照注冊(cè)號(hào)等. 由于運(yùn)行到真機(jī)需要app id, 可選擇微信支付300的選項(xiàng), 但暫不支付。 類型3的用戶只能下載微信web開發(fā)者IDE, 通過模擬器開發(fā)體驗(yàn)無app id功能受限的小程序.用于注冊(cè)小程序的企業(yè)帳號(hào)可添加個(gè)人帳號(hào)為管理員, 管理員可邀請(qǐng)10個(gè)開發(fā)者帳號(hào), 并且每個(gè)企業(yè)帳號(hào)有一個(gè)app id; 開發(fā)者可通過微信IDE和app id進(jìn)行開發(fā)和真機(jī)調(diào)試; 如果涉及網(wǎng)絡(luò)請(qǐng)求, 還需要在小程序后臺(tái)配置服務(wù)器域名, 如下圖:
配置服務(wù)器
1.2 小程序開發(fā)工具1.2.1 微信web開發(fā)者工具
微信提供了微信web開發(fā)者工具作為官方IDE, 可以在此下載官方IDE
1.2.2 webstorm由于官方IDE代碼補(bǔ)全和體驗(yàn)不是很好, 例如每打開一個(gè)文件就新開一個(gè)tab\背景色無法調(diào)等等, 強(qiáng)迫癥開發(fā)者可以選擇使用webstorm作為IDE+微信IDE只作為模擬器.webstorm還有很多感人的小細(xì)節(jié), 比如hex顏色可以在左側(cè)預(yù)覽.
2. 社區(qū)資源匯總微信公眾平臺(tái) 官方的; 像我一樣前端0基礎(chǔ)的同學(xué)可以先大體看一下官方平臺(tái)上的簡易教程\ 框架\ 組件\ API\ 工具的介紹, 對(duì)整體有個(gè)基本的概念, 然后再從demo入手, 一邊研究別人的demo 一邊寫自己的demo, 遇到不會(huì)的問題尋求搜索引擎和社區(qū)的幫助. 3. 框架由于官方文檔已經(jīng)有框架等的介紹, 我這里通過自己的理解總結(jié)一下, 看到這的同學(xué)如果還沒讀官方文檔可以先看一下我的理解, 后續(xù)再自己摸索時(shí)形成自己的理解. 3.1 簡介通過官方demo可以看到根文件夾就是項(xiàng)目名, 其下有pages文件夾, 這下面存放各個(gè)業(yè)務(wù)模塊, 每個(gè)業(yè)務(wù)模塊創(chuàng)建單獨(dú)的一個(gè)pages的子文件夾, 例如子文佳名稱為component_one, 該文件夾下的.js.json.wxml.wxss也需要以component為前綴.如下圖, 紅框文件夾對(duì)應(yīng)第二個(gè)tab的功能, 綠框文件夾對(duì)應(yīng)第一個(gè)tab的功能, 藍(lán)框中文件命名不可改變, 是全局性的.
框架示例
pages文件夾名和app.js\json\wxss命名的來頭官方解釋為: 小程序包含一個(gè)描述整體程序的 app 和多個(gè)描述各自頁面的 page。
通過上面的表, 可以看出, 全局性的app.js\ app.json是必須的, 局部的.js.wxml是必須的. 如果代碼量比較小, 類似豆瓣電影demo, 可以把所有樣式表都寫在app.wxss中, 但還是推薦根據(jù)業(yè)務(wù)區(qū)分, 寫到各自業(yè)務(wù)的wxss中.pages中的json\wxss會(huì)覆蓋app.json\app.wxss中相同的配置項(xiàng), 若page缺少某個(gè)選填文件類型, 則該頁面直接使用app對(duì)應(yīng)的配置. 3.2 mvc角度從MVC的角度來看, js就是controller, json是邏輯配置文件, wxml是只有UI控件的view, wxss是只配置view中各控件具體樣式的配置文件. 3.3 各類型文件都干了什么3.3.1 app.jsApp()是小程序的生命周期方法, 可根據(jù)小程序生命周期的各個(gè)階段進(jìn)行業(yè)務(wù)邏輯, 還可以在這里設(shè)置全局變量.
3.3.2 app.json
3.3.3 app.wxss
app.wxss
app.wxss用于設(shè)置全局樣式, .xxx對(duì)應(yīng).wxml中相應(yīng)UI控件所對(duì)應(yīng)的class名.
app.wxml
4. 模塊化4.1 js項(xiàng)目中與業(yè)務(wù)緊密相關(guān)的模塊作為components放在pages下, 業(yè)務(wù)間通用的模塊放到IDK下, 與業(yè)務(wù)無關(guān)的放到IDP下.
模塊化-代碼結(jié)構(gòu)
若pages中的類B引用IDK中的類A, 可如下在類B中創(chuàng)建一個(gè)A的實(shí)例, 并在類B的Page()方法中引用. var aObj = require('../../IDK/A.js') 4.2 wxss公用的UI控件樣式可寫到app.wxss中, 例如loading控件等; 只與page相關(guān)的UI樣式可寫到各page對(duì)應(yīng)的wxss中.
wxss模塊化
5. 寫demo過程總結(jié)由于是前端小白, 寫demo時(shí)是面向官方文檔編程&面向百度\面向谷歌\面向stackoverflow編程...遇到問題邊查邊解決, 最終解決各種問題誕生出demo小崽子時(shí)是非常有成就感的哈. 下面將我在寫demo中遇到的一些場景總結(jié)一下. 5.1 涉及到的應(yīng)用場景5.1.1 點(diǎn)擊事件
點(diǎn)擊事件
bindTap="響應(yīng)點(diǎn)擊事件的方法名" 5.1.2 滾動(dòng)視圖
5.1.3 列表數(shù)據(jù)綁定< block wx:for-items="{{數(shù)據(jù)源們}}" wx:for-item="一個(gè)數(shù)據(jù)"> 綁定數(shù)據(jù)源; 5.1.4 網(wǎng)絡(luò)請(qǐng)求可用微信小程序API發(fā)送get\post請(qǐng)求,
wx.request
5.2 遇到的坑5.2.1 模擬器上看不到圖片微信小程序bug, 模擬器上有時(shí)圖片被攔截?zé)o法顯示 5.2.2 真機(jī)網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)為空需要在小程序運(yùn)營配置平臺(tái)中配置請(qǐng)求域名, 并需要交500注冊(cè)費(fèi)之后才可以支持真機(jī)網(wǎng)絡(luò)請(qǐng)求. 應(yīng)用場景雜談微信官方對(duì)小程序的定位是——微信小程序是一種全新的連接用戶與服務(wù)的方式,它可以在微信內(nèi)被便捷地獲取和傳播,同時(shí)具有出色的使用體驗(yàn)。所以對(duì)比公眾號(hào),小程序更像局限在微信中的一個(gè)插件??傮w看起來, 如果是工具類創(chuàng)業(yè)型項(xiàng)目, 例如寵物醫(yī)院\家政服務(wù)\買火車票等等, 還是比較適合不單獨(dú)做一個(gè)APP, 而是借助微信生態(tài)圈的; 但如果是類似百度\阿里等互聯(lián)網(wǎng)公司, 微信小程序的閉塞性還是無法當(dāng)做一個(gè)導(dǎo)流工具的, 而且由于其API是有很多微信定制性, 無法完整移植現(xiàn)有的H5代碼, 也會(huì)產(chǎn)生一定學(xué)習(xí)和開發(fā)成本.對(duì)小程序應(yīng)用性感興趣的同學(xué)也可以看上面第2部分"社區(qū)資源"中相關(guān)的新聞和評(píng)論分析, 比我寫的好的多, 我就只談自己的觀點(diǎn), 不做搬運(yùn)了. |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)