uni-app 前後端實戰課 - 《悅讀》學習筆記：【創建項目、後端環境介紹】小程序開發實例教程1/

相關視頻和資料代碼網上非常多。大家可以去找一下哦。如果找不到可以給我留言。我可以發給你們。bilibili上就有

項目介紹：

1：創建項目

 

後端介紹
本教程將以 php + MySQL 爲後端環境，爲大家詳細講解服務端代碼編寫！
如果您沒有後端基礎並不想學習後端寫法，課程將提供完整後端源碼及數據庫，您可以快速將後端部署在自己的電腦完成接口的部署工作 ^_^
我們將以 php 原生作爲開發，開發過程中的基礎架構和類庫，請在騰訊課堂課程內獲取；
本套課程也提供了 php 環境搭建教程及本課程後端接口部署教程；

 

 

1. 打開HBuilderX -> 新建 uniapp 項目

創建項目：

項目創建成功後。的界面：

2. 創建頁面

|_ index.vue 入口頁面 （系統已經幫我們創建好了）
|_ write.vue 文章撰寫頁面

在pages下面創建頁面：寫作頁面，用戶提交文章的頁面

 

|_ my.vue 賬戶中心頁面

 

完善底部導航欄

1. 下載圖標, 圖標地址 :

https://pan.baidu.com/s/1iaWd6l_-cIJ3RNUsqNqFNQ

2. 將圖標部署至 /static 目錄;

3. 修改 page.json

"tabBar" : {
        "color" : "#707070",
        "selectedColor" : "#DE533A",
        "list" : [
            {
                "pagePath" : "pages/index/index",
                "text" : "文章",
                "iconPath" : "static/nav1.png",
                "selectedIconPath" : "static/nav1-a.png"
            },
            {
                "pagePath" : "pages/write/write",
                "text" : "寫作",
                "iconPath" : "static/nav2.png",
                "selectedIconPath" : "static/nav2-a.png"
            },
            {
                "pagePath" : "pages/my/my",
                "text" : "我的",
                "iconPath" : "static/nav3.png",
                "selectedIconPath" : "static/nav3-a.png"
            }
        ]
    }

4. 修改項目名稱

"globalStyle" : {
    "navigationBarTextStyle" : "black",
    "navigationBarTitleText" : "悅讀",
    "navigationBarBackgroundColor" : "#F8F8F8",
    "backgroundColor" : "#F8F8F8"
}

把上面的代碼複製粘貼

 

加載 graceUI 框架
graceUI : http://grace.hcoder.net/
收費框架，本教程中使用部分免費分享給大家，在課程內下載即可！
部署 :

|_ 項目根目錄
    |_ graceUI
        |_ graceUI.css

我們可以把資料中的【graceUI 】這個目錄複製粘貼到項目裏。裏面是一個css文件：

在app.vue 內添加以下代碼：

<style>
@import 'graceUI/graceUI.css';
</style>

修改index.vue、my.vue、write.vue這幾個文件。清理一下。如下圖。然後每個頁面的view裏面寫上那個頁面的名字...暫時起到一個頁面內容的作用

保存好了之後：按ctrl+r運行：然後：選微信開發者工具進行調試（如果沒有安裝微信開發者工具的，需要先安裝再使用）

第一次使用。一直報錯：

於是需要打開微信開發者工具。把安全裏的服務端口打開。就可以了：

成功了：可以看見自己的第一個小程序頁面了！

因爲默認的名字是uni-app所以我們來修改一下名稱：悅讀

只改這裏的話。首頁的名字還是沒有變：可以把首頁的名字刪掉。用下面的全局的名字就可以了

於是成功了：

 

pages.json

{
	"pages": [ //pages數組中第一項表示應用啓動頁，參考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
			}
		}
	    ,{
            "path" : "pages/write/write",
            "style" : {}
        }
        ,{
            "path" : "pages/my/my",
            "style" : {}
        }
        ,{
            "path" : "pages/login/login",
            "style" : {}
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "悅讀",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar" : {
	        "color" : "#707070",
	        "selectedColor" : "#DE533A",
	        "list" : [
	            {
	                "pagePath" : "pages/index/index",
	                "text" : "文章",
	                "iconPath" : "static/nav1.png",
	                "selectedIconPath" : "static/nav1-a.png"
	            },
	            {
	                "pagePath" : "pages/write/write",
	                "text" : "寫作",
	                "iconPath" : "static/nav2.png",
	                "selectedIconPath" : "static/nav2-a.png"
	            },
	            {
	                "pagePath" : "pages/my/my",
	                "text" : "我的",
	                "iconPath" : "static/nav3.png",
	                "selectedIconPath" : "static/nav3-a.png"
	            }
	        ]
	    }
}