一、 注冊小程序

訪問 https://mp.weixin.qq.com/ 注冊一個小程序，身份可以是個人，注冊過程盡管有點繁瑣，但都是一些常規操作，在此就不再贅述了。注冊小程序是為了得到一個app_id，相當于一個小程序的唯一識別碼，這是必備的，否則后繼所有操作都沒辦法繼續。

注冊成功后，選擇: 開發 -> 開發管理 -> 開發設置 -> 記錄下 [AppID(小程序ID)]

選擇: 開發 -> 開發工具 -> 下載 [微信開發者工具] ，安裝很簡單，一路默認下一步即可。

掃碼登錄微信開發者工具后，創建一個默認項目，app_id就填你剛才申請的那個，全部默認選項即可。

選擇: 設置 -> 通用設置 -> 安全 -> 打開 [服務端口] ， 這一步的目的是為了讓第三方開發工具能夠與微信開發者工具互通。

現在，可以關閉這個工具了，進行下一步。

TIPS: 騰訊官方這個開發工具是一個完整的微信小程序開發平臺，包括自己的原生JS框架，獨立的IDE環境以及官方光環加持等等優點。但缺點也顯而易見，那就是用戶必須掌握這個技術棧，或多或少需要一些時間成本。其實，利用第三方框架及工具也可以完成微信小程序開發，比如說DCloud的uni-app, 京東的tora, 美團的mpvue 、騰訊自家的kbone等等等等。 采用第三方工具的好處是便于開發者用其他框架開發小程序，比如對vue很熟悉的開發者，則直接可以用HBuilder+VUE上手，而不需要重頭再學一遍官方的原生框架。那么你可能會問，既然選擇第三方平臺進行開發，那為什么還要下載安裝微信開發者工具呢？答案是需要它的發布功能，簡單地說，利用第三方平臺，將代碼寫好后，還是需要通過微信開發者工具進行發布。但除此之外，實際上大部分工作還是在第三方平臺上完成的。

---

二、 HBuilder與uni-app的關系

HBuilder是一個代碼編輯器，其定位跟SubLime，VSCode，ATOM這些一樣。
uni-app 是一個使用 Vue.js 開發所有前端應用的框架，它不僅僅可以用來開發微信小程序，也可以用來制作H5應用、手機應用等等。因為HBuilder和uni-app同屬DCloud公司的兩個項目，因此HBuilder很自然的成了uni-app的首選開發工具。

現在開始安裝：

登錄 https://www.dcloud.io/ ，下載HBuilder, 注意要下載 “app開發版”

無需安裝，直接解壓就能用，啟動文件：HBuilderX.exe

選擇：新建 -> 項目 -> uni-app -> 默認模板 -> 創建

在pages/index文件夾下面新建3個文件：sun.vue 、earth.vue 、 moon.vue

打開pages.json文件，復制以下內容并存盤：

{"pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "Hello World Demo"}},{"path": "pages/index/sun"},{"path": "pages/index/earth"},{"path": "pages/index/moon"}],"tabBar": {"color": "#7A7E83","selectedColor": "#007AFF","borderStyle": "black","backgroundColor": "#F8F8F8","list": [{"pagePath": "pages/index/index","iconPath": "static/home.png","selectedIconPath": "static/home-HL.png","text": "HOME"},{"pagePath": "pages/index/sun","iconPath": "static/sun.png","selectedIconPath": "static/sunHL.png","text": "SUN"}, {"pagePath": "pages/index/earth","iconPath": "static/earth.png","selectedIconPath": "static/earthHL.png","text": "EARTH"}, {"pagePath": "pages/index/moon","iconPath": "static/moon.png","selectedIconPath": "static/moonHL.png","text": "MOON"}]},"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"}}

pages.json 這個文件有點類似vue里面的vue-router，在這里將頁面安排好，做好相應的路由。與vue不同的是，uni-app還直接為我們準備好了tabBar這個組件，在tabBar的list定義中，將每個頁面綁定到一個app下方的導航按鈕上，注意每個pagePath是必須在前面定義好的，另外iconPath是指定按鈕沒有被選中時候的外觀，而selectedIconPath則設置為按鈕被選中時的外觀，將每個按鈕都綁定兩張圖片（選中/未選中）即可，很簡單。但需要注意的是，要么你老老實實把這四個圖標的圖片都設置好，要么就干脆不要設置，如果設置了圖片，但沒有對應的真實圖片的話，微信小程序發布的時候是會出問題的。

下面，將我們剛才建立的3個空文件隨便填點內容，看看切換效果：
打開earth.vue，輸入以下內容并存盤：

<template><view ><H1> Hello Earth! </H1></view> </template><script> </script><style>h1 {text-align: center;} </style>

注意，在這里的<view>，實際上就是我們平時用的<div>，此處也能用<div>，但是最終會被編譯為<view>。依葫蘆畫瓢，把sun.vue和moon.vue也都改改，每個文件的輸出文字多少有點區別就行了。

現在，選擇菜單：運行 -> 運行到內置瀏覽器
一個APP框架就出來了，麻雀雖小五臟俱全，這個demo已經有了頁面切換、路由、底部導航按鈕等等基本功能了。

---

三、發布到微信小程序

點擊菜單： 發行 -> 小程序-微信

輸入最開始我們得到的那個app-id，點 [發行]

如果這一步報錯找不到微信小程序開發者工具的話，在設置里面重新指定一下路徑即可。

如果一切正常，HBuilder將會將現有代碼轉換為微信小程序的wxs代碼，然后你會看到這個demo在小程序開發工具的預覽窗口里跑了起來。

在小程序開發工具這邊按下 [上傳] 按鈕

上傳成功后，點擊 [預覽] 按鈕，會生成一個二維碼，用手機微信掃描它，這個demo就能正兒八經在你的手機微信里跑起來。

這個二維碼只能維持半個小時，如果你需要讓更多的人看到效果，需要返回微信小程序WEB后臺：https://mp.weixin.qq.com/

進入：管理 -> 版本管理 -> 將本次提交審核為開發版本，然后在版本號下面就能生成一個持久的二維碼了。

---

四、后記

這個框架僅僅是起一個拋磚引玉的作用，更多的功能實現需要您自己去研究，盡管這個demo沒有實現任何業務邏輯，但對于完全沒有接觸過的朋友而言，還是可以少走一點彎路。萬事開頭難，有一個好的開始總是好的，祝您成功~

總結

以上是生活随笔為你收集整理的[Hello World教程] 使用HBuilder和Uni-app 生成一个简单的微信小程序DEMO的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。