先把官網(wǎng)文檔擺在這，后面會用到的
[uniapp官網(wǎng)文檔]: https://uniapp.dcloud.net.cn/vernacular.html#
一、開發(fā)工具準備
1-1 安裝HBuilder
按照官方推薦，先裝一個HBuilder
下載地址：
https://www.dcloud.io/hbuilderx.html
1-2 安裝微信開發(fā)者工具
如果要在微信小程序上運行，再裝一個微信開發(fā)者工具
下載地址：（記得選穩(wěn)定版）
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
1-3 配置
為了之后的調(diào)試，在HBuilder里配置微信開發(fā)者工具的安裝路徑
HBuilder-》工具-》設(shè)置-》運行配置-》小程序運行配置-》微信開發(fā)者工具路徑
在微信開發(fā)者工具中設(shè)置端口開發(fā)、不校驗合法域名
微信開發(fā)者工具-》設(shè)置-》安全設(shè)置-》服務(wù)端口：打開
微信開發(fā)者工具-》詳情-》本地設(shè)置-》不校驗合法域名...：勾選
二、寫代碼
如果你有足夠的耐心，可以先去官網(wǎng)把語法文檔先看一遍，大致了解vue的一些基本語法，下面寫起來會相對容易。
沒耐心如我憑著多年前的模糊前端知識記憶直接開搞，遇到哪里不懂再去百度哪里。
2-1 新建模板項目
HBuilder-》文件-》新建-》項目-》選一個模板
-
注意1：這里是選模板，也就是你接下來要寫的項目的參照（你CV大法的來源），推薦官方提供的【Hello uni-app】,大部分你接下來要用到的組件里面都有例子。
-
注意2：這里vue版本最好選2，頭鐵的我就覺得新的好，選了3。3簡直太好了，它好就好在遇到問題網(wǎng)上一搜全是2的解決方案，根本沒幾個可以參考的，就靠我的鐵頭自己想解決方案，慘痛經(jīng)歷。
2-2 新建空白項目
步驟同上，選擇模板的時候選默認模板。
注意：為什么不直接在成品模板里改呢，因為你會因為一兩行代碼的改動遇到各種奇奇怪怪的錯誤，然后就失去了正確的模板可以參考。當然，你也可以再新建一個模板項目來參考，但直接在成品模板里改出一個自己的項目，就算成功了，也會存在大量冗余代碼，也會存在很多“刪除了會報錯，留著又不知道它有什么用的代碼”，不利于新人初期的學(xué)習(xí)。
個人建議：初期學(xué)習(xí)還是做加法更有利于掌握知識。
2-3 運行空白項目
運行-》運行到小程序模擬器-》運行微信開發(fā)者工具
當日志欄出現(xiàn)【項目 ‘demo02’ 編譯成功。前端運行日志，請另行在小程序開發(fā)工具的控制臺查看?！繒r，就可以通過微信小程序開發(fā)工具查看你的項目了。
注：uniapp項目編譯后的路徑：項目根目錄/unpackage/dist/dev/mp-weixin
微信小程序開發(fā)工具導(dǎo)入項目時就是導(dǎo)入這個路徑
導(dǎo)入之后可以看到空白項目里的HBuilder圖標和Hello字樣
2-4 開寫
2-4-1 頁面
空白項目只自帶一個首頁，我需要新增頁面，于是在/pages目錄下右鍵新建另外三個頁面
建的時候勾選【在pages.json中注冊】，工具就會自動修改pages.json文件，如圖所示。
然后你可以手動為這些頁面改名
2-4-2 導(dǎo)航欄
基礎(chǔ)頁面可以通過頁腳導(dǎo)航欄切換，這就需要新增一段配置，在剛剛的pages同級下新增"tabBar"配置
修改pages.json文件
"pages": [ //pages數(shù)組中第一項表示應(yīng)用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首頁"
}
}
,{
"path" : "pages/tab1/tab1",
"style" :
{
"navigationBarTitleText": "頁面1",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/tab2/tab2",
"style" :
{
"navigationBarTitleText": "頁面2",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/tab3/tab3",
"style" :
{
"navigationBarTitleText": "頁面3",
"enablePullDownRefresh": false
}
}
],
"tabBar": {
"borderStyle": "black",
"backgroundColor": "#333",
"color": "#8F8F94",
"selectedColor": "#f33e54",
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁"
},
{
"pagePath": "pages/tab1/tab1",
"text": "頁面1"
},
{
"pagePath": "pages/tab2/tab2",
"text": "頁面2"
},
{
"pagePath": "pages/tab3/tab3",
"text": "頁面3"
}
]
}
改完保存，自動差量編譯，切到微信小程序開發(fā)工具，可以看到頁面上已經(jīng)出現(xiàn)底部導(dǎo)航欄的4個頁面選項，并且可以通過點擊切換頁面
2-4-3 發(fā)請求
按照uniapp官方文檔來：
這里隨便找了個開源在線請求地址，實際項目可替換為自己的項目服務(wù)地址。
注意：如果沒有注冊微信小程序appId，https請求是調(diào)不通的，只能發(fā)http請求
修改tab1.vue文件
<template>
<view>
<button @click="sendRequest">發(fā)請求</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
sendRequest(){
uni.request({
url: 'http://api.thecatapi.com/v1/images/search?limit=1', //示例
data: {
},
header: {
'custom-header': 'hello' //自定義請求頭信息
},
success: (res) => {
console.log(res.data);
this.text = 'request success';
}
});
}
}
}
</script>
<style>
</style>
點擊按鈕發(fā)送請求，控制臺打印出返回數(shù)據(jù)：
2-4-4 …
待補充…文章來源：http://www.zghlxwxcb.cn/news/detail-695894.html
有了頁面，有了導(dǎo)航用來切換頁面，能夠向后端發(fā)送請求，這就算一個簡陋的demo了，還想要什么功能可以直接拿起vue在此基礎(chǔ)上開搞文章來源地址http://www.zghlxwxcb.cn/news/detail-695894.html
到了這里，關(guān)于Uniapp學(xué)習(xí)之從零開始寫一個簡單的小程序demo（新建頁面，通過導(dǎo)航切換頁面，發(fā)送請求）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
