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

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

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

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

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

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

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

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

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

強烈推薦有一定基礎(chǔ)的同學(xué)去微信開發(fā)平臺官方網(wǎng)站

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

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

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

具體步驟：

首先，請前往微信開發(fā)工具下載頁面根據(jù)自己的操作系統(tǒng)下載對應(yīng)的安裝包進行安裝。

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

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

在根目錄下創(chuàng)建app.json，其內(nèi)容如下。

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

index.wxml的內(nèi)容如下所示。 Hello World

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

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

二、小程序開發(fā)

新建一個初始小程序項目

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

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

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

編譯：點擊編譯即可進行編譯，默認每次修改保存后都會實時編譯?？梢孕薷拿看尉幾g條件：

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

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

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

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

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

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

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

主體部分：

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

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

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

各個頁面：

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

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

App.JSON介紹

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

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

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

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

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

App.js介紹

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

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

globaldata為全局變量

如果要使用請在對應(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，如果堅持使用less和sass需要使用vscode下載插件進行開發(fā)，后續(xù)轉(zhuǎn)為wxss即可；

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

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

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

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

路由方式

需要注意：

三、常見問題和解決方法

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

var page=getCurrentPages();

page[0].data.btn=true;

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

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

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

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

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

{undefined

“usingComponents”: {},

“navigationBarBackgroundColor”: “#ffffff”,

“navigationBarTextStyle”: “black”,

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

“backgroundColor”: “#eeeeee”,

“backgroundTextStyle”: “l(fā)ight”

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

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

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

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

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