1、前期準備工作

注冊微信小程序開發(fā)者賬號

在官網注冊頁選擇小程序注冊即可，賬號分為個人版和企業(yè)版：

個人版相對于企業(yè)版注冊流程更為簡單和寬松。

 企業(yè)版注冊需要支付認證費用，一般為300元，個人版不需要，企業(yè)版經過微信官方認證，更具有信譽度。

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

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

個人版不支持快速獲取微信用戶的手機號。

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

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

2、小程序開發(fā)

新建一個初始小程序項目

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

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

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

編譯：點擊編譯即可進行編譯，默認每次修改保存后都會實時編譯。可以修改每次編譯條件：

真機調試：生成一個二維碼，微信掃碼即可真機調試（必須處在一個網絡下）;

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

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

小程序目錄結構

默認目錄結構如上圖，分為主體部分和各個頁面:

主體部分：

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

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

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

各個頁面：

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

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

App.JSON介紹

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

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

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

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

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

App.js介紹

此圖為簡單的微信登錄獲取openid的例子，獲取到對應id自行與用戶綁定；

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

globaldata為全局變量

如果要使用請在對應page.js引入：const app = getApp();

WXML，WXSS，JS

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

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

JS類似VUE的結構

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

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

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

路由方式

需要注意：

3、常見問題和解決方法

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

var page=getCurrentPages();

page[0].data.btn=true;

該函數(shù)返回一個當前頁面棧，從中找到對應頁面即可;

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

可能是配置了tabbar，tabbar頁面只能用switchTab跳轉；

3、如何修改當前頁面title？

在對應page.json中修改，示例：

{

 "usingComponents": {},

 "navigationBarBackgroundColor": "#ffffff",

 "navigationBarTextStyle": "black",

 "navigationBarTitleText": "快樂大抽獎",

 "backgroundColor": "#eeeeee",

 "backgroundTextStyle": "light"

}

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

5、redirectTo關閉當前頁面跳轉，navigateto是當前頁面保存到棧跳轉，首頁跳轉建議使用navigateto

6、小程序審核問題

小程序審核需要1-7天完成，一年一次加急審核機會（工作日2小時以內審核完成）。

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

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

目前主要有這3種方式：

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

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

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

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

主要看這幾個方面：

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

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

（3）操作簡單程度。對新手來說，操作當然是越簡單越好，有些平臺就是傻瓜式操作，只要會添加版塊、會打字就能做好，這樣你上架商品、之后修改小程序都非常省時省力。