生活随笔
收集整理的這篇文章主要介紹了
[Hello World教程] 使用HBuilder和Uni-app 生成一个简单的微信小程序DEMO
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、 注冊(cè)小程序
訪問(wèn) https://mp.weixin.qq.com/ 注冊(cè)一個(gè)小程序，身份可以是個(gè)人，注冊(cè)過(guò)程盡管有點(diǎn)繁瑣，但都是一些常規(guī)操作，在此就不再贅述了。注冊(cè)小程序是為了得到一個(gè)app_id，相當(dāng)于一個(gè)小程序的唯一識(shí)別碼，這是必備的，否則后繼所有操作都沒(méi)辦法繼續(xù)。 注冊(cè)成功后，選擇: 開發(fā) -> 開發(fā)管理 -> 開發(fā)設(shè)置 -> 記錄下 [AppID(小程序ID)] 選擇: 開發(fā) -> 開發(fā)工具 -> 下載 [微信開發(fā)者工具] ，安裝很簡(jiǎn)單，一路默認(rèn)下一步即可。 掃碼登錄微信開發(fā)者工具后，創(chuàng)建一個(gè)默認(rèn)項(xiàng)目，app_id就填你剛才申請(qǐng)的那個(gè)，全部默認(rèn)選項(xiàng)即可。 選擇: 設(shè)置 -> 通用設(shè)置 -> 安全 -> 打開 [服務(wù)端口] ， 這一步的目的是為了讓第三方開發(fā)工具能夠與微信開發(fā)者工具互通。 現(xiàn)在，可以關(guān)閉這個(gè)工具了，進(jìn)行下一步。
TIPS: 騰訊官方這個(gè)開發(fā)工具是一個(gè)完整的微信小程序開發(fā)平臺(tái)，包括自己的原生JS框架，獨(dú)立的IDE環(huán)境以及官方光環(huán)加持等等優(yōu)點(diǎn)。但缺點(diǎn)也顯而易見，那就是用戶必須掌握這個(gè)技術(shù)棧，或多或少需要一些時(shí)間成本。其實(shí)，利用第三方框架及工具也可以完成微信小程序開發(fā)，比如說(shuō)DCloud的uni-app, 京東的tora, 美團(tuán)的mpvue 、騰訊自家的kbone等等等等。 采用第三方工具的好處是便于開發(fā)者用其他框架開發(fā)小程序，比如對(duì)vue很熟悉的開發(fā)者，則直接可以用HBuilder+VUE上手，而不需要重頭再學(xué)一遍官方的原生框架。那么你可能會(huì)問(wèn)，既然選擇第三方平臺(tái)進(jìn)行開發(fā)，那為什么還要下載安裝微信開發(fā)者工具呢？答案是需要它的發(fā)布功能，簡(jiǎn)單地說(shuō)，利用第三方平臺(tái)，將代碼寫好后，還是需要通過(guò)微信開發(fā)者工具進(jìn)行發(fā)布。但除此之外，實(shí)際上大部分工作還是在第三方平臺(tái)上完成的。
二、 HBuilder與uni-app的關(guān)系
HBuilder是一個(gè)代碼編輯器，其定位跟SubLime，VSCode，ATOM這些一樣。
現(xiàn)在開始安裝：
登錄 https://www.dcloud.io/ ，下載HBuilder, 注意要下載 “app開發(fā)版” 無(wú)需安裝，直接解壓就能用，啟動(dòng)文件：HBuilderX.exe 選擇：新建 -> 項(xiàng)目 -> uni-app -> 默認(rèn)模板 -> 創(chuàng)建 在pages/index文件夾下面新建3個(gè)文件：sun.vue 、earth.vue 、 moon.vue 打開pages.json文件，復(fù)制以下內(nèi)容并存盤：
{ "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 這個(gè)文件有點(diǎn)類似vue里面的vue-router，在這里將頁(yè)面安排好，做好相應(yīng)的路由。與vue不同的是，uni-app還直接為我們準(zhǔn)備好了tabBar這個(gè)組件，在tabBar的list定義中，將每個(gè)頁(yè)面綁定到一個(gè)app下方的導(dǎo)航按鈕上，注意每個(gè)pagePath是必須在前面定義好的，另外iconPath是指定按鈕沒(méi)有被選中時(shí)候的外觀，而selectedIconPath則設(shè)置為按鈕被選中時(shí)的外觀，將每個(gè)按鈕都綁定兩張圖片（選中/未選中）即可，很簡(jiǎn)單。但需要注意的是，要么你老老實(shí)實(shí)把這四個(gè)圖標(biāo)的圖片都設(shè)置好，要么就干脆不要設(shè)置，如果設(shè)置了圖片，但沒(méi)有對(duì)應(yīng)的真實(shí)圖片的話，微信小程序發(fā)布的時(shí)候是會(huì)出問(wèn)題的。
下面，將我們剛才建立的3個(gè)空文件隨便填點(diǎn)內(nèi)容，看看切換效果：
< template> < view> < H1> Hello Earth!
</ H1> </ view> </ template> < script>
</ script> < style> h1 { text-align : center; }
</ style> 注意，在這里的<view>，實(shí)際上就是我們平時(shí)用的<div>，此處也能用<div>，但是最終會(huì)被編譯為<view>。依葫蘆畫瓢，把sun.vue和moon.vue也都改改，每個(gè)文件的輸出文字多少有點(diǎn)區(qū)別就行了。
現(xiàn)在，選擇菜單：運(yùn)行 -> 運(yùn)行到內(nèi)置瀏覽器
三、發(fā)布到微信小程序
點(diǎn)擊菜單： 發(fā)行 -> 小程序-微信 輸入最開始我們得到的那個(gè)app-id，點(diǎn) [發(fā)行 ] 如果這一步報(bào)錯(cuò)找不到微信小程序開發(fā)者工具的話，在設(shè)置里面重新指定一下路徑即可。 如果一切正常，HBuilder將會(huì)將現(xiàn)有代碼轉(zhuǎn)換為微信小程序的wxs代碼，然后你會(huì)看到這個(gè)demo在小程序開發(fā)工具的預(yù)覽窗口里跑了起來(lái)。 在小程序開發(fā)工具這邊按下 [上傳 ] 按鈕 上傳成功后，點(diǎn)擊 [預(yù)覽 ] 按鈕，會(huì)生成一個(gè)二維碼，用手機(jī)微信掃描它，這個(gè)demo就能正兒八經(jīng)在你的手機(jī)微信里跑起來(lái)。 這個(gè)二維碼只能維持半個(gè)小時(shí)，如果你需要讓更多的人看到效果，需要返回微信小程序WEB后臺(tái)：https://mp.weixin.qq.com/ 進(jìn)入：管理 -> 版本管理 -> 將本次提交審核為開發(fā)版本，然后在版本號(hào)下面就能生成一個(gè)持久的二維碼了。
四、后記
這個(gè)框架僅僅是起一個(gè)拋磚引玉的作用，更多的功能實(shí)現(xiàn)需要您自己去研究，盡管這個(gè)demo沒(méi)有實(shí)現(xiàn)任何業(yè)務(wù)邏輯，但對(duì)于完全沒(méi)有接觸過(guò)的朋友而言，還是可以少走一點(diǎn)彎路。萬(wàn)事開頭難，有一個(gè)好的開始總是好的，祝您成功~
總結(jié)
以上是生活随笔 為你收集整理的[Hello World教程] 使用HBuilder和Uni-app 生成一个简单的微信小程序DEMO 的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔 網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔 推薦給好友。
