1、前期準(zhǔn)備工作

注冊(cè)微信小程序開發(fā)者賬號(hào)

在官網(wǎng)注冊(cè)頁選擇小程序注冊(cè)即可，賬號(hào)分為個(gè)人版和企業(yè)版：

個(gè)人版相對(duì)于企業(yè)版注冊(cè)流程更為簡(jiǎn)單和寬松。

 企業(yè)版注冊(cè)需要支付認(rèn)證費(fèi)用，一般為300元，個(gè)人版不需要，企業(yè)版經(jīng)過微信官方認(rèn)證，更具有信譽(yù)度。

個(gè)人版更多只是一個(gè)展示的平臺(tái)，企業(yè)版可以作為一個(gè)完整的平臺(tái)，個(gè)人版不可以做商業(yè)性質(zhì)的小程序，但是企業(yè)版可以，個(gè)人版不可以開通微信支付。

附近的小程序不顯示個(gè)人版，只能通過搜索，掃碼方式找到。

個(gè)人版不支持快速獲取微信用戶的手機(jī)號(hào)。

下載微信開發(fā)者工具

微信平臺(tái)官網(wǎng)提供的開發(fā)工具，選擇適合自己系統(tǒng)的版本下載最新版即可。開發(fā)小程序優(yōu)先選擇，喜歡用其他軟件如vscode，webstorm也可以（僅適合代碼生成后編寫代碼），打包上傳等仍需要開發(fā)者工具。

2、小程序開發(fā)

新建一個(gè)初始小程序項(xiàng)目

根據(jù)項(xiàng)目需求建立即可，appId在官網(wǎng)設(shè)置里可以看到或者使用測(cè)試號(hào)進(jìn)行開發(fā)（后續(xù)有了小程序賬號(hào)修改對(duì)應(yīng)appId即可），點(diǎn)擊新建即可創(chuàng)建一個(gè)新的小程序模板。

下圖為微信開發(fā)工具頁面，默認(rèn)左邊為開發(fā)頁面展示，右邊上方為代碼編輯區(qū)，下方為控制臺(tái)，可用來調(diào)試和查看開發(fā)過程中所需信息（開發(fā)者工具也可以用來訪問微信公眾號(hào)頁面網(wǎng)頁，用來查看http請(qǐng)求或者報(bào)錯(cuò)信息，前提是必須擁有開發(fā)者權(quán)限）。

開發(fā)工具常用功能介紹

編譯：點(diǎn)擊編譯即可進(jìn)行編譯，默認(rèn)每次修改保存后都會(huì)實(shí)時(shí)編譯。可以修改每次編譯條件：

真機(jī)調(diào)試：生成一個(gè)二維碼，微信掃碼即可真機(jī)調(diào)試（必須處在一個(gè)網(wǎng)絡(luò)下）;

版本管理：git可視化工具；

上傳：如果appid為正式id，則會(huì)有上傳按鈕，將小程序上傳到微信服務(wù)器（僅上傳編譯后項(xiàng)目，不是源代碼，源代碼仍需要單獨(dú)保存管理），上傳后在微信小程序官網(wǎng)控制版本，具體流程為：開發(fā)工具上傳>官網(wǎng)版本管理體驗(yàn)版自動(dòng)更新>提交體驗(yàn)版本審核>等待審核通過>提交審核通過版本;

小程序目錄結(jié)構(gòu)

默認(rèn)目錄結(jié)構(gòu)如上圖，分為主體部分和各個(gè)頁面:

主體部分：

app.js: 小程序初始化js；

app.json: 小程序配置文件，如：導(dǎo)航，窗口，各頁面引入；

app.wxss: 小程序公共樣式;

各個(gè)頁面：

Pages：各個(gè)子頁面以js+json+wxml+wxss組成，方便管理，右邊可快捷生成page;

小程序遵循MVC結(jié)構(gòu)（Model View Controller）,js為頁面邏輯（C&M）,wxss為頁面樣式，修飾wxml的DOM元素，wxml為頁面機(jī)構(gòu)（V），json為頁面配置（具體API可見微信官方文檔，可以修改此頁面標(biāo)題等，也充當(dāng)了部分M）；

App.JSON介紹

App.json為小程序較為重要的配置文件，也從充當(dāng)了類似其他框架中的路由功能。

部分字段如圖所示，這里只介紹最基礎(chǔ)常用的配置字段：

Pages：每一個(gè)子頁面都需要寫到這個(gè)數(shù)組里，其實(shí)就是路由引入；

Window：系統(tǒng)配置，包括標(biāo)題，標(biāo)題顏色，標(biāo)題背景等（如果不設(shè)置分頁面配置則默認(rèn)全覆蓋）；

Tabbar：官方提供的導(dǎo)航功能，可以設(shè)置導(dǎo)航欄，list為導(dǎo)航數(shù)組，存放導(dǎo)航項(xiàng)、color為字體顏色、selectedcolor為選中顏色、backgroundcolor為背景顏色；

App.js介紹

此圖為簡(jiǎn)單的微信登錄獲取openid的例子，獲取到對(duì)應(yīng)id自行與用戶綁定；

也可自定義全局函數(shù)。

globaldata為全局變量

如果要使用請(qǐng)?jiān)趯?duì)應(yīng)page.js引入：const app = getApp();

WXML，WXSS，JS

WXML等同于html，需要注意的是元素名全部為微信新定義的，需要注意的是不存在傳統(tǒng)的div、span、p等元素，取而代之的是view，text等，部分元素與html名字相同，但是用法不同，需要自行前往官網(wǎng)文檔查看；

WXSS等同于CSS，具體無太大變化，僅需注意目前不支持less或者sass，如果堅(jiān)持使用less和sass需要使用vscode下載插件進(jìn)行開發(fā)，后續(xù)轉(zhuǎn)為wxss即可；

JS類似VUE的結(jié)構(gòu)

上方可以引入其他文件，Page({})為實(shí)例對(duì)象，data為頁面需要的數(shù)據(jù)（雙向綁定）,下方為函數(shù)，需要注意每一個(gè)函數(shù)之間需要用,隔開。Page.js具體語法和原生js并無太大區(qū)別，僅需注意部分API如緩存，頁面跳轉(zhuǎn)等微信API即可（官網(wǎng)查看），值得一提的是，如果你想要使用TypeScript開發(fā)，請(qǐng)?jiān)陧?xiàng)目初始化時(shí)開發(fā)語言處選擇TS，則項(xiàng)目會(huì)構(gòu)建為TS模板（默認(rèn)為JS）；

小程序擁有自己的生命周期如下圖所示：

可以根據(jù)該圖示選擇自己需要的生命周期鉤子函數(shù)即可；

路由方式

需要注意：

3、常見問題和解決方法

1、在當(dāng)前頁面如何修改其他頁面數(shù)據(jù)？

var page=getCurrentPages();

page[0].data.btn=true;

該函數(shù)返回一個(gè)當(dāng)前頁面棧，從中找到對(duì)應(yīng)頁面即可;

2、為什么我想切換到主頁，使用wx.navigateTo不生效？

可能是配置了tabbar，tabbar頁面只能用switchTab跳轉(zhuǎn)；

3、如何修改當(dāng)前頁面title？

在對(duì)應(yīng)page.json中修改，示例：

{

 "usingComponents": {},

 "navigationBarBackgroundColor": "#ffffff",

 "navigationBarTextStyle": "black",

 "navigationBarTitleText": "快樂大抽獎(jiǎng)",

 "backgroundColor": "#eeeeee",

 "backgroundTextStyle": "light"

}

4、小程序頁面棧最多10層

5、redirectTo關(guān)閉當(dāng)前頁面跳轉(zhuǎn)，navigateto是當(dāng)前頁面保存到棧跳轉(zhuǎn)，首頁跳轉(zhuǎn)建議使用navigateto

6、小程序?qū)徍藛栴}

小程序?qū)徍诵枰?-7天完成，一年一次加急審核機(jī)會(huì)（工作日2小時(shí)以內(nèi)審核完成）。

2、程序代碼提交給微信審核，審核通過方可發(fā)布

小程序開發(fā)有哪些方式？

目前主要有這3種方式：

（1）如果你懂代碼知識(shí)，那么就可以自己寫代碼開發(fā)，這樣自由度更高。具體方法是先下載安裝微信官方開發(fā)者工具，然后新建小程序項(xiàng)目，填入自己的小程序的 AppID（沒有的話你要先到微信公眾平臺(tái)注冊(cè)一個(gè)小程序賬號(hào)）。勾選“創(chuàng)建 QuickStart 項(xiàng)目”，對(duì)照著微信小程序開發(fā)文檔，就可以開發(fā)自己的小程序了。

（2）如果你資金和時(shí)間充裕，需要做一個(gè)功能復(fù)雜的定制化小程序，那么可以找外包團(tuán)隊(duì)定制開發(fā)。這種比較適合大型企業(yè)。

（3）如果你是個(gè)技術(shù)小白，那么可以直接用第三方小程序開發(fā)工具，有很多模板可供選擇，你只需選個(gè)模板再添加需要的功能版塊就好。對(duì)于普通零售商家而言，還是選擇這種方式比較劃算。

商城小程序開發(fā)哪家好？

主要看這幾個(gè)方面：

（1）知名度。盡量找知名度高的建站平臺(tái)，這樣各方面都會(huì)比較完善一些。

（2）案例效果。不同小程序開發(fā)團(tuán)隊(duì)的設(shè)計(jì)理念、設(shè)計(jì)水平也不同，設(shè)計(jì)水平高的小程序，能有更美觀的案例效果；這樣訪客在瀏覽小程序時(shí)，也會(huì)有更好的視覺體驗(yàn)。小程序的設(shè)計(jì)就給出簡(jiǎn)約典雅，界面ui看起來都很舒服。

（3）操作簡(jiǎn)單程度。對(duì)新手來說，操作當(dāng)然是越簡(jiǎn)單越好，有些平臺(tái)就是傻瓜式操作，只要會(huì)添加版塊、會(huì)打字就能做好，這樣你上架商品、之后修改小程序都非常省時(shí)省力。