本文作者：毀小慕，來自原文地址

微信小程序已經(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. 企業(yè)開發(fā)者, 有企業(yè)注冊(cè)相關(guān)信息, 可負(fù)擔(dān)500注冊(cè)費(fèi)用, 為了小程序能發(fā)布上線;
2. 公司不給錢程序員, 有企業(yè)注冊(cè)信息, 不想支付費(fèi)用, 為了技術(shù)儲(chǔ)備;
3. 沒錢瞎搗鼓程序員, 無企業(yè)注冊(cè)相關(guān)信息, 不想支付費(fèi)用, 為了技術(shù)儲(chǔ)備;

類型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ù)器域名, 如下圖:

1.2 小程序開發(fā)工具

1.2.1 微信web開發(fā)者工具

微信提供了微信web開發(fā)者工具作為官方IDE, 可以在此下載官方IDE
可在此下載demo體驗(yàn), 填寫app id后通過官方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.js

App()是小程序的生命周期方法, 可根據(jù)小程序生命周期的各個(gè)階段進(jìn)行業(yè)務(wù)邏輯, 還可以在這里設(shè)置全局變量.

3.3.2 app.json

對(duì)微信小程序進(jìn)行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等.pages[]中index=0的元素為小程序打開時(shí)默認(rèn)展示的頁面.還可以在此打開debug功能.

3.3.3 app.wxss

app.wxss用于設(shè)置全局樣式, .xxx對(duì)應(yīng).wxml中相應(yīng)UI控件所對(duì)應(yīng)的class名.

4. 模塊化

4.1 js

項(xiàng)目中與業(yè)務(wù)緊密相關(guān)的模塊作為components放在pages下, 業(yè)務(wù)間通用的模塊放到IDK下, 與業(yè)務(wù)無關(guān)的放到IDP下.

若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中.

5. 寫demo過程總結(jié)

由于是前端小白, 寫demo時(shí)是面向官方文檔編程&面向百度\面向谷歌\面向stackoverflow編程...遇到問題邊查邊解決, 最終解決各種問題誕生出demo小崽子時(shí)是非常有成就感的哈. 下面將我在寫demo中遇到的一些場景總結(jié)一下.

5.1 涉及到的應(yīng)用場景

5.1.1 點(diǎn)擊事件

bindTap="響應(yīng)點(diǎn)擊事件的方法名"

5.1.2 滾動(dòng)視圖

< scroll-view>
scroll-y 縱向滾動(dòng)
bindScroll="監(jiān)聽滾動(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)求,

也可用fetch.then

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)了.