微信小程序開(kāi)發(fā)現(xiàn)在已經(jīng)成為了互聯(lián)網(wǎng)圈的熱門(mén)討論對(duì)象。企業(yè)和品牌如果還沒(méi)有著手布局微信小程序業(yè)務(wù)，就有落伍的風(fēng)險(xiǎn)。
專業(yè)的微信小程序開(kāi)發(fā)公司Infocode藍(lán)暢信息技術(shù)來(lái)和大家聊一下微信小程序開(kāi)發(fā)步驟流程。
更新微信小程序開(kāi)發(fā)資訊，或您需要定制開(kāi)發(fā)微信小程序請(qǐng)聯(lián)系藍(lán)暢客服
1、準(zhǔn)備工作
1：注冊(cè) https://mp.weixin.qq.com/wxopen/waregister?action=step1
用沒(méi)有注冊(cè)過(guò)微信公眾平臺(tái)的郵箱注冊(cè)一個(gè)微信公眾號(hào)， 申請(qǐng)帳號(hào) , 根據(jù)指引填寫(xiě)信息和提交相應(yīng)的資料，就可以擁有自己的小程序帳號(hào)。注冊(cè)完成之后開(kāi)始登錄。
2：登錄 https://mp.weixin.qq.com
我們可以在菜單 “設(shè)置”-“開(kāi)發(fā)設(shè)置” 看到小程序的 AppID 了 。小程序的 AppID 相當(dāng)于小程序平臺(tái)的一個(gè)身份證，后續(xù)你會(huì)在很多地方要用到 AppID (注意這里要區(qū)別于服務(wù)號(hào)或訂閱號(hào)的 AppID)。有了小程序帳號(hào)之后，我們需要一個(gè)工具來(lái)開(kāi)發(fā)小程序。
根據(jù)官方教程進(jìn)行開(kāi)發(fā) https://developers.weixin.qq.com/miniprogram/dev/framework/
3：安裝開(kāi)發(fā)工具
前往 開(kāi)發(fā)者工具下載 頁(yè)面，根據(jù)自己的操作系統(tǒng)下載對(duì)應(yīng)的安裝包進(jìn)行安裝，有關(guān)開(kāi)發(fā)者工具更詳細(xì)的介紹可以查看 《開(kāi)發(fā)者工具介紹》 。打開(kāi)小程序開(kāi)發(fā)者工具，用微信掃碼登錄開(kāi)發(fā)者工具，準(zhǔn)備開(kāi)發(fā)你的第一個(gè)小程序吧！
關(guān)于開(kāi)發(fā)工具的相關(guān)信息，可通過(guò) 【微信開(kāi)發(fā)者工具 】了解詳情
4：開(kāi)啟第一個(gè)小程序
新建項(xiàng)目選擇小程序項(xiàng)目，選擇代碼存放的硬盤(pán)路徑，填入剛剛申請(qǐng)到的小程序的 AppID，給你的項(xiàng)目起一個(gè)好聽(tīng)的名字，最后，勾選 “創(chuàng)建 QuickStart 項(xiàng)目” (注意: 你要選擇一個(gè)空的目錄才會(huì)有這個(gè)選項(xiàng))，點(diǎn)擊確定，你就得到了你的第一個(gè)小程序了，點(diǎn)擊頂部菜單編譯就可以在 IDE 預(yù)覽你的第一個(gè)小程序。
5：編譯預(yù)覽
點(diǎn)擊工具上的編譯按鈕，可以在工具的左側(cè)模擬器界面看到這個(gè)小程序的表現(xiàn)，也可以點(diǎn)擊預(yù)覽按鈕，通過(guò)微信的掃一掃在手機(jī)上體驗(yàn)?zāi)愕牡谝粋€(gè)小程序。
2、框架介紹
小程序開(kāi)發(fā)框架的目標(biāo)是通過(guò)盡可能簡(jiǎn)單、高效的方式讓開(kāi)發(fā)者可以在微信中開(kāi)發(fā)具有原生 APP 體驗(yàn)的服務(wù)。
整個(gè)小程序框架系統(tǒng)分為兩部分：邏輯層（App Service）和?視圖層（View）。小程序提供了自己的視圖層描述語(yǔ)言 WXML 和 WXSS，以及基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，讓開(kāi)發(fā)者能夠?qū)Ｗ⒂跀?shù)據(jù)與邏輯。
響應(yīng)的數(shù)據(jù)綁定
框架的核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，可以讓數(shù)據(jù)與視圖非常簡(jiǎn)單地保持同步。當(dāng)做數(shù)據(jù)修改的時(shí)候，只需要在邏輯層修改數(shù)據(jù)，視圖層就會(huì)做相應(yīng)的更新。
頁(yè)面管理
框架 管理了整個(gè)小程序的頁(yè)面路由，可以做到頁(yè)面間的無(wú)縫切換，并給以頁(yè)面完整的生命周期。開(kāi)發(fā)者需要做的只是將頁(yè)面的數(shù)據(jù)、方法、生命周期函數(shù)注冊(cè)到 框架 中，其他的一切復(fù)雜的操作都交由 框架 處理。
基礎(chǔ)組件
框架 提供了一套基礎(chǔ)的組件，這些組件自帶微信風(fēng)格的樣式以及特殊的邏輯，開(kāi)發(fā)者可以通過(guò)組合基礎(chǔ)組件，創(chuàng)建出強(qiáng)大的微信小程序 。
豐富的 API
框架 提供豐富的微信原生 API，可以方便的調(diào)起微信提供的能力，如獲取用戶信息，本地存儲(chǔ)，支付功能等。
3、程序開(kāi)發(fā)
當(dāng)你學(xué)會(huì)了HTML+CSS+js,看了微信開(kāi)發(fā)文檔，你就可以很簡(jiǎn)單地開(kāi)始微信小程序的開(kāi)發(fā)啦~~
- 入口
每個(gè)小程序都需要在 app.js 中調(diào)用 App 方法注冊(cè)小程序?qū)嵗?，綁定生命周期回調(diào)函數(shù)、錯(cuò)誤監(jiān)聽(tīng)和頁(yè)面不存在監(jiān)聽(tīng)函數(shù)等。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
整個(gè)小程序只有一個(gè) App 實(shí)例，是全部頁(yè)面共享的。開(kāi)發(fā)者可以通過(guò) getApp 方法獲取到全局唯一的 App 實(shí)例，獲取App上的數(shù)據(jù)或調(diào)用開(kāi)發(fā)者注冊(cè)在 App 上的函數(shù)。
|
1 |
|
- 全局配置
小程序根目錄下的 app.json 文件用來(lái)對(duì)微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。
詳見(jiàn)【全局配置】 - 頁(yè)面配置
每一個(gè)小程序頁(yè)面也可以使用同名 .json 文件來(lái)對(duì)本頁(yè)面的窗口表現(xiàn)進(jìn)行配置，頁(yè)面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。
詳見(jiàn)【頁(yè)面配置】 - 小程序生命周期
注冊(cè)小程序。接受一個(gè) Object 參數(shù)，其指定小程序的生命周期回調(diào)等。
詳細(xì)api詳見(jiàn)https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html - 頁(yè)面生命周期
注冊(cè)小程序中的一個(gè)頁(yè)面。接受一個(gè) Object 類型參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。
生命周期對(duì)象詳見(jiàn)https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html - 組件
自帶組件庫(kù)weUI - API
豐富的api
https://developers.weixin.qq.com/miniprogram/dev/api/
微信小程序制作在線咨詢
關(guān)于我們：
Infocode藍(lán)暢信息技術(shù)有限公司成功為多家世界財(cái)富500強(qiáng)企業(yè)以及其他著名品牌提供優(yōu)質(zhì)服務(wù)，是您靠譜的互聯(lián)網(wǎng)開(kāi)發(fā)供應(yīng)商。
服務(wù)客戶遍及北京、上海、杭州、深圳、廣州、天津、青島、南京、寧波、蘇州、無(wú)錫、廈門(mén)、重慶、西安等大中型城市及地區(qū) ? ?為您提供：微信開(kāi)發(fā)，H5開(kāi)發(fā)，小程序制作，H5外包，H5商城開(kāi)發(fā)，小程序商城開(kāi)發(fā)，網(wǎng)站開(kāi)發(fā)外包，H5游戲開(kāi)發(fā)，小程序開(kāi)發(fā)外包，小程序設(shè)計(jì)、APP開(kāi)發(fā)外包，UI設(shè)計(jì)，SEO優(yōu)化，SEO外包，視頻后期制作等優(yōu)質(zhì)服務(wù)
