微信小程序開發教程（步驟流程）

近幾年來微信小程序非常火熱，有很多朋友想要自學開發微信小程序，那么開發一個微信小程序有哪些步驟和流程呢？下面為成都碼鄰蜀科技為大家列出一份詳細的微信小程序開發教程。

一、前期準備工作

1、注冊微信小程序開發賬號

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

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

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

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

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

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

強烈推薦有一定基礎的同學去微信開發平臺官方網站

2、下載微信開發工具

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

在詳細介紹小程序歷史和技術細節前，請先跟隨我們的步驟完成開發Hello World例子。

具體步驟：

首先，請前往微信開發工具下載頁面根據自己的操作系統下載對應的安裝包進行安裝。

第二步，打開微信開發工具，選擇新建小程序項目，我們先不需理解AppID的概念，新建項目時選擇無AppID，并取消勾選“建立普通快速啟動模板”的選項。

結尾一步，我們來添加必要的代碼。

在根目錄下創建app.json，其內容如下。

在根目錄下新建pages目錄，然后在pages目錄下新建index目錄，接著在index目錄下創建兩個文件index.wxml和index.js。

index.wxml的內容如下所示。 Hello World

index.js的內容如下所示。Page({})

通過編寫以上短短的幾行代碼，微信開發工具的模擬器界面上顯示出Hello World。

二、小程序開發

新建一個初始小程序項目

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

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

開發工具常用功能介紹

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

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

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

上傳：如果appid為正式id，則會有上傳按鈕，將小程序上傳到微信服務器（僅上傳編譯后項目，不是源代碼，源代碼仍需要單獨保存管理）

上傳后在微信小程序官網控制版本，具體流程為：

開發工具上傳>官網版本管理體驗版自動更新>提交體驗版本審核>等待審核通過>提交審核通過版本;

小程序目錄結構

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

主體部分：

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：每一個子頁面都需要寫到這個數組里，其實就是路由引入；

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

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

App.js介紹

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

也可自定義全局函數。

globaldata為全局變量

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

WXML，WXSS，JS

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

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

JS類似VUE的結構

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

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

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

路由方式

需要注意：

三、常見問題和解決方法

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

var page=getCurrentPages();

page[0].data.btn=true;

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

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

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

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

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

{undefined

“usingComponents”: {},

“navigationBarBackgroundColor”: “#ffffff”,

“navigationBarTextStyle”: “black”,

“navigationBarTitleText”: “快樂大抽獎”,

“backgroundColor”: “#eeeeee”,

“backgroundTextStyle”: “light”

4、小程序頁面棧只能10層

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

6、小程序審核問題

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

以上就是關于微信小程序開發教程（步驟流程）的介紹，有小伙伴想要了解更詳細的小程序開發資料或者有小程序開發需求可以聯系我們，成都碼鄰蜀是專業的小程序開發公司。