寫在前面話：

隨著互聯網的快速發展，微信小程序應用的快速便捷，不用下載安裝等的優勢越來越明顯，于是，我就開始著手于小程序開發的學習，雖然微信提供了開發工具，但它只能生成小程序 ，不能生成APP，那么有沒有兩全的工具呢？ 百度后搜索到目前流程的開發工具是 Hbuilder，官網上以技術手冊為重點，感覺沒有簡單的教程，雖然也提供了幾套學習視頻，自己試著學習了幾個，總體感覺專業性較強，更有甚首一套視頻教程課件多則上百節，對于沒有編程基礎或第一次接觸APP開發的同學來講，太難了，太費時間了，容易被勸退。我下載了一套源文件，結果版本還不支持。

所以在自己學習后，編寫了這套教程，從小白的角度來開發一個真實的應用入手，讓你在實踐中沉浸式學習各項基本功能，并且成品可以直接拿來使用，兩天時間快速入門！

準備工作：

學習中我們只用到最少的2個工具來做講解：

1．Hbuilder 官網 下載開發工具,?直接解壓縮，找到HBuilderX.exe 就可以使用。

2．搭建php+mysql環境，這個網上有集成一鍵安裝的軟件，可自行搜索下載。

可以這么說吧，手機上的APP或者小程序，都是由我們看到顯示界面（所謂前端）與 數據（所謂后端）兩部分組成，前端調用后端的數據，兩者結合到一起就是我們看到的 排版與內容。

在本教程中，我們不講解后端數據的構成，直接安裝好數據庫的運行環境php+mysql，把本教程提供的數據庫安裝進來，php接口文件僅一個，只需要做簡單的配置就可以了，在文章最下面，提供本教程所有源程序 （Hbuilder中導入文件夾就可以使用）與php接口和數據庫代碼。在開始學習之前，請保證完成以上兩項準備工作。

應用名稱 ： 《樹洞筆記本》，一個私密日記本，可以用來記錄密碼，書寫心情，僅限自己一個人使用。

功能包括六項：?登陸 > 寫日記 > 看日記 > 修改 > 刪除 > 退出登陸

是不是看起來功能很簡單，但麻雀雖小五臟俱全。

下面我們正式開始

打開Hbuilder，點擊工具欄里的文件 -> 新建 -> 項目，選擇uni-app類型，輸入工程名：“mynote”，選擇最左邊第一個模板，點擊創建，即可成功創建。

這里說一下為什么我們要選uni-app，最早我三年前接觸這個軟件時，選的是H5+，這對于有網站開發經驗的朋友很容易上手，基本上全是html+js應用，但后來實際應用中發現，不能夠直接轉換成微信小程序，所以現在已經放棄了。而用官方擴來說，uni-app?開發者編寫一套代碼，可發布到iOS、Android、Web、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應用等多個平臺，所以同學們直接從這里入手，可以少走彎路。

?點擊確定后，會在左側目錄中，生成如下內容

┌──pages 我們用到的所有頁面文件存放的目錄 │ └─index │ └─index.vue 首頁 ├─static 存放應用引用靜態資源（如圖片、視頻等）的目錄，注意：靜態資源只能存放于此 ├─App.vue （不管它）應用配置，用來配置App全局樣式以及監聽 應用生命周期 ├─index.html （不管它） ├─main.js Vue初始化入口文件 ├─manifest.json （先不管它，最后才會用）配置應用名稱、appid、logo、版本等打包信息 ├─pages.json 配置頁面路由、導航條、選項卡等頁面類信息 └─uni.css （不管它） uni-app內置的常用樣式變量

這里我們先把要用到頁面一次性生成完畢，分別在 pages 文件夾上點擊右鍵，輸入文件名：login，按默認狀態直接確認就可以，依次生成 list , edit ,共三個文件，如下：

然后我們分別點開具體文件，將所有頁面改成如下格式，對應文件名保留 我是XX

<template><view>我是登陸界面（login）,我是編輯界面（edit)，我是寫日記界面(index)，我是看日記界面(list)</view> </template><script>export default {data() {return {}},methods: {}} </script><style></style>

接下來找四張小圖標，拷貝到 static 目錄下，我這里找了四張，大家可以另存為保存下來

b-1.pngb-2.png??a-1.png?a-2.png

?頁面生成完畢后，我們點開 pages.json,將內容改成以下

{"pages": [ //pages數組中第一項表示應用啟動頁，{"path": "pages/index/index","style": {"navigationBarTitleText": "寫日記"}}, {"path": "pages/login/login","style": {"navigationBarTitleText": "登陸","enablePullDownRefresh": false}}, {"path": "pages/list/list","style": {"navigationBarTitleText": "看日記","enablePullDownRefresh": true}}, {"path": "pages/edit/edit","style": {"navigationBarTitleText": "修改","enablePullDownRefresh": false}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "樹洞日記本","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"tabBar": {"color": "#000","selectedColor": "red","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/index/index","text": "寫日記","iconPath": "static/a-1.png","selectedIconPath": "static/a-2.png"},{"pagePath": "pages/list/list","text": "看日記","iconPath": "static/b-1.png","selectedIconPath": "static/b-2.png"}]}}

?重點說一下 "path": 對應是的頁面文件所在的目錄，以? pages/? ?開頭，這個叫”路徑“，我們教程中，全部推薦使用? pages/? 開頭的路徑。

?"navigationBarTitleText":? ?這個是指頁面的標題名稱
? "enablePullDownRefresh": false? ?這是指頁面是否允許下拉刷新，除了 list頁面 改成 true（允許），其它全默認false(禁止)就可以。

在上面的pages.json中，我們手工添加了一個”tabBar",這個是軟件下方的功能按鍵，

? ? ? ? "color": "#000",? ? ? ? ? ? ?-------------文字顏色
?? ??? ?"selectedColor": "red",? -------------選中后的文字顏色
?? ??? ?"borderStyle": "black",? -------------選框樣式
?? ??? ?"backgroundColor": "#ffffff",? ------------背景色
?? ??? ?"list": [?? -------------按鈕組，每個按鈕用 {? }? ?包起來
? ? ? ? ? ?{
?? ??? ??? ??? ?"pagePath": "pages/index/index",? -
?? ??? ??? ??? ?"text": "寫日記",
?? ??? ??? ??? ?"iconPath": "static/nav2.png",? ? ? ? ? ? ? ? ? ? ? ---沒選中時的圖標
?? ??? ??? ??? ?"selectedIconPath": "static/nav2-a.png"? ? ?---選中時的圖標
?? ??? ??? ?}

最后的效果如下

mysql數據表只有兩個

接口?api.php 只有一個文件，簡單方便

本節教程，我們先搭建好骨架，后面的教程中再讓它豐滿起來

本教程源文件 與 數據表，php接口 都已打包，直接下載導入就可以使用

零基本開發uniapp微信小程序教程源文件與數據庫接口，簡單易上手，不受版本限制-小程序文檔類資源-CSDN下載

總結

以上是生活随笔為你收集整理的【大白话学习】UniApp 微信小程序与APP应用 开发零基础入门教程(一）---基础页面框架搭建的全部內容，希望文章能夠幫你解決所遇到的問題。

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