如何開發(fā)微信小程序?星光科技小編為了讓更多人的了解微信小程序。
下面的回答側(cè)重于微信小程序開發(fā)的實(shí)際操作方法,肯定適合零基礎(chǔ)沒有開發(fā)經(jīng)驗(yàn)的人。
微信官方的文檔確實(shí)很重要,隨時(shí)都要用,但身為小編,先動(dòng)手、做起來、做出來更首要。沒有編程基礎(chǔ),上來就以學(xué)文檔學(xué)代碼為主,太抽象太枯燥了,很容易把自己嚇跑的。
下面是小編我自己做微信小程序開發(fā)的簡要過程(包括制作、提交審核、發(fā)布、下載小程序碼等,總共有13步):
1. 小程序原型設(shè)計(jì)
開發(fā)前,最好先做個(gè)原型,把自己的需求理順。我用的工具為Axure, 下載的是一個(gè)免費(fèi)版,功能不全,但自己梳理想法足夠了。
2. 注冊(cè)一個(gè)開發(fā)工具賬號(hào)
現(xiàn)在微信小程序開發(fā)工具大多都是純線上版本,無需下載;并且,打開注冊(cè)頁后一般都可以用微信掃碼即可完成注冊(cè),非常簡便。
需要補(bǔ)充說明下:想開發(fā)微信小程序,微信官方的開發(fā)工具肯定是要用的,但是對(duì)于沒有編程基礎(chǔ)的人來說,這個(gè)官方工具只能做做最后的發(fā)布。最復(fù)雜的開發(fā)制作環(huán)節(jié),咱這種初級(jí)人員玩不轉(zhuǎn)。所以像我這樣的菜鳥群體,制作時(shí)得依靠市面上第三方工具。有很多,各有特色;當(dāng)然,工具固然重要,但背后思路方法更為本質(zhì)。
3. 選擇模板
在模板市場(chǎng)中,選擇跟自己需求最為接近的模板,點(diǎn)擊“使用”,即可進(jìn)入開發(fā)制作臺(tái),開始小程序的正式制作。開發(fā)微信小程序,早期最好基于現(xiàn)成模板就行搭建,在使用過程中再逐步調(diào)整,在后期越來越熟悉后,就可以嘗試進(jìn)行深度個(gè)性化開發(fā)。
4.對(duì)模板進(jìn)行修改、開發(fā)
選好模板并“使用”后,在制作臺(tái)中央,模板以及模板的各個(gè)組成部分就會(huì)可視化的展現(xiàn)出來了。選中希望修改的模塊,在右側(cè)對(duì)基礎(chǔ)屬性、樣式和觸發(fā)條件(什么情況下該模塊開始工作)等進(jìn)行設(shè)置。如果需要增加一些新功能模塊,可以在制作臺(tái)左側(cè)找到相應(yīng)的模塊(星光科技稱為組件),然后直接拖放到屏幕中央的小程序界面里,再回到右側(cè)做做樣式設(shè)置,就能完成一個(gè)基本模塊的開發(fā)。
小程序的前端、后臺(tái)服務(wù),都可以參考上面的方法進(jìn)行開發(fā)制作,具體可以進(jìn)入“高級(jí)”標(biāo)簽頁詳細(xì)查看。
如果模塊拖拽的方式覺得不過癮,想更徹底的掌控小程序開發(fā)細(xì)節(jié),也可以切換到IDE模式:
星光科技的IDE模式,支持用javascript、html5和css語言對(duì)微信小程序進(jìn)行編程。因?yàn)榇a編寫我暫時(shí)還不會(huì),介紹不上來,等過段時(shí)間學(xué)下這幾個(gè)語言,再補(bǔ)充點(diǎn)代碼操作的案例上來。
開發(fā)制作操作完成后,將進(jìn)入配置、發(fā)布環(huán)節(jié)。
5. 注冊(cè)并配置微信小程序賬號(hào)信息
首次發(fā)布小程序,需要先進(jìn)行小程序注冊(cè),獲得小程序賬號(hào)的appid和appsecret。
然后再回到所使用的開發(fā)制作工具(星光科技)里完成小程序賬號(hào)信息配置。在星光科技制作臺(tái)導(dǎo)航欄上選"高級(jí)"——>再在屏幕左上方選“管理后臺(tái)”——>左側(cè)功能樹列表里選“微信配置”:
6. 為微信小程序獲取并配置上服務(wù)器域名
小程序正式發(fā)布前需要進(jìn)行服務(wù)器域名配置。有服務(wù)器域名微信小程序才能正常工作。
在星光科技制作臺(tái)的“發(fā)布”頁面中,單擊“第三步 導(dǎo)入微信開發(fā)者工具”按鈕,顯示出發(fā)布版本的服務(wù)器域名:
為微信小程序獲取服務(wù)器域名信息
然后,在小程序官網(wǎng)登錄小程序賬號(hào),單擊首頁中的“開發(fā)頁面”按鈕,打開開發(fā)頁面,向下滾動(dòng),即可看到服務(wù)器域名的配置。注意服務(wù)器域名在一個(gè)月內(nèi)只能修改5次。
登錄小程序賬號(hào),配置服務(wù)器域名信息
7. 下載安裝微信開發(fā)者工具
下載 · 微信官方的小程序開發(fā)工具(即所謂的"微信開發(fā)者工具")
8. 下載制作好的微信小程序包
點(diǎn)擊星光科技制作臺(tái)右上角的“發(fā)布”按鈕,進(jìn)入“發(fā)布”頁面,單擊頁面中的“第二步 下載小程序”按鈕,頁面中顯示“正在生成微信小程序,請(qǐng)稍等…”,使用瀏覽器的下載功能,下載步驟4中制作好的微信小程序包:
9. 在微信開發(fā)者工具里創(chuàng)建一個(gè)新項(xiàng)目
打開微信開發(fā)者工具。在微信開發(fā)者工具中新建一個(gè)項(xiàng)目,輸入小程序賬號(hào)的appid、項(xiàng)目名稱、選擇項(xiàng)目目錄,為導(dǎo)入制作好的微信小程序包做準(zhǔn)備:
10. 上傳微信小程序包到微信開發(fā)者工具
在微信開發(fā)者工具中,單擊“上傳”按鈕,上傳步驟8導(dǎo)出的小程序包。上傳后,因?yàn)檫€未審核,所以都叫"開發(fā)版本"。
上傳后,登錄微信公眾平臺(tái)|小程序,在“開發(fā)管理”中可以看到剛上傳的開發(fā)版本。
11. 提交開發(fā)版本進(jìn)行審核
將開發(fā)版本提交審核,審核通過后,才能提交發(fā)布,提交審核的方法是:單擊“開發(fā)版本”右側(cè)的“提交審核”按鈕,打開“提交審核相關(guān)須知”,按向?qū)瓿商峤粚徍肆鞒獭?br />
開始進(jìn)入提交審核的向?qū)?br />
提交審核后,登錄微信公眾平臺(tái)|小程序,在"開發(fā)管理"頁面中的審核版本中會(huì)顯示“審核中”。等待審核結(jié)果。
12. 正式發(fā)布微信小程序
審核通過后,審核版本中顯示“審核通過,待發(fā)布”,單擊審核版本右側(cè)的“提交發(fā)布”按鈕,小程序?qū)⒄桨l(fā)布到線上提供服務(wù)。
13. 下載微信小程序碼
小程序提供了小程序碼,用于掃描后打開小程序。登錄微信公眾平臺(tái)|小程序,在設(shè)置頁面中下載小程序碼,單擊“下載更多尺寸”按鈕,打開更多尺寸對(duì)話框,提供多種顏色和尺寸的小程序碼用于下載。
再就題主的問題補(bǔ)充說一下:我剛開始甚至連HTML5、CSS都沒聽說過,更別說js(javascript)了。后來在制作過程中,我并沒有滿足于拖拉放,而是一邊圖形化搭建著,一邊注意經(jīng)常切換到代碼狀態(tài)琢磨琢磨,現(xiàn)在雖然還不能自己獨(dú)立寫代碼,但基本上能讀懂個(gè)大概了,還能做做簡單代碼修改。
當(dāng)然,微信小程序做的好不好,零基礎(chǔ)入門知識(shí)作為普通個(gè)體經(jīng)營戶用是可以,作為企業(yè)型微信小程序建議還是更多的尋求專業(yè)開發(fā)團(tuán)隊(duì)來完成。一個(gè)重要原因是,專業(yè)的事情專業(yè)人士去干,作為小編我作為星光科技一員,希望有需求的同志可以聯(lián)系我們。