3 項目目錄結構
3.1 項目目錄結構
3.1.1 目錄介紹
# 1 項目主配置文件，在項目根路徑下，控制整個項目的-app.js # 小程序入口文件，小程序啟動，會執行此js-app.json # 小程序全局配置文件，配置小程序導航欄顏色等信息-app.wxss # 小程序全局樣式-app.js和app.json必須存在# 2 頁面文件-pages文件夾內，有一個個文件夾（index，login，register）--> 每個文件夾下有4個文件，-xx.js # 頁面邏輯：js代碼控制-xx.wxml # 頁面結構/布局，html === wxml，部分標簽不一樣-xx.json # 頁面配置，當前頁面導航欄顏色等-xx.wxss # 頁面樣式，當前頁面的樣式，當前頁面樣式優先級高于小程序全局樣式-xx.js和xx.wxml必須存在# 3 其他非重點-components 頁面會用到的組件，每個組件放到一個文件夾內，每個文件夾內有4個文件-xx.js-xx.wxml-xx.json-xx.wxss-exlintrc.js 語法檢查，不用項目配置，基礎配置，整個項目存放位置，是否開啟https-project.config.json 開發者工具默認配置-project.private.config.json 開發者工具用戶配置，優先用這個，可以刪除-sitemap.json 頁面抓取相關，搜索優化，上線后他人通過哪些關鍵字搜索到小程序
3.1.2 配置文件
3.1.2.1 項目配置app.json
# 1 小程序全局配置文件，用于配置小程序的一些全局屬性和頁面路由，默認標題以及導航欄顏色，是否下拉刷新等# 2 配置參考地址
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html# 3 部分配置
屬性 類型 必填 描述 最低版本
entryPagePath string 否 小程序默認啟動首頁
pages：頁面路徑列表
window：全局的默認窗口表現：頂部顏色，是否有下拉，經常用到
3.1.2.2 頁面配置xx.json
# 1 小程序頁面配置文件，也稱局部配置文件，用于配置當前頁面的窗口樣式、頁面標題等# 2 app.json的部分配置，也支持對單個頁面進行配置，可以在頁面對應的 xx.json文件來對本頁面的表現進行配置，即第3點# 3 頁面中配置項在當前頁面會覆蓋app.json中相同的配置項（樣式相關的配置項屬于app.json中的window屬性，但這里不需要額外指定window字段），具體的取值和含義可參考全局配置文檔說明# 4 參考文檔
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html# 5 常用配置
navigationBarBackgroundColor # 導航欄背景顏色，如 #000000
navigationBarTextStyle # 導航欄標題、狀態欄顏色，僅支持 black / white
navigationBarTitleText # 導航欄標題文字內容
3.1.2.3 工程配置
# 1 project.config.json project.private.config.json
# 2 小程序項目配置文件，用于保存項目的一些配置信息和開發者的個人設置
# 3 參考文檔
https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html
project.config.json的配置與詳情里的本地設置是聯動的。
調試基礎庫
3.1.2.4 搜索seo相關配置
# 1 作用
微信現已開放小程序內搜索，開發者可以通過 sitemap.json 配置，或者管理后臺頁面收錄開關來配置其小程序頁面是否允許微信索引。當開發者允許微信索引時，微信會通過爬蟲的形式，為小程序的頁面內容建立索引。當用戶的搜索詞條觸發該索引時，小程序的頁面將可能展示在搜索結果中。 爬蟲訪問小程序內頁面時，會攜帶特定的 user-agent：mpcrawler 及場景值：1129。需要注意的是，若小程序爬蟲發現的頁面數據和真實用戶的呈現不一致，那么該頁面將不會進入索引中。# 2 參考文檔
https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html# 3 配置 -->用戶搜索小程序，任意頁面有關鍵字，都會被搜索到
{"desc": "關于本文件的更多信息，請參考文檔 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html","rules": [{"action": "allow","page": "*"}]
}
3.2 webview渲染
3.2.1 webview與skyline模式
# 1 webview模式：老一點，穩定，支持新老版本
# 2 skyline模式：新一點，不支持老版本，不太穩定# 3 調整成webview模式更加穩定一些# 4 項目配置 --> app.jsonapp.json刪除以下配置
3.3 新建頁面
# 1 app.json只有一個頁面 === 小程序只有一個頁面-后期增加頁面# 2 增加頁面方式一1 pages右鍵 --> 新建文件夾2 新建的文件夾右鍵 新建page3 生成4個文件，分別是xx.js，xx.wxml，xx.json，xx.wxss# 3 增加頁面方式二1 app.json pages中，新增一行2 自動創建文件夾和頁面增加頁面方式一
輸入page名，會生成四個文件
同時app.json會多出一行login內容
增加頁面方式二
3.4 啟動頁面調整
# 1 修改默認啟動頁面
## 方式1 在app.json的pages修改順序，第一個即默認啟動頁面
{"pages": ["pages/login/login","pages/index/index","pages/register/register"],
}## 方式2 通過entryPagePath配置 --- 較多
{"entryPagePath": "pages/index/index",
}## 方式3：臨時用 -添加編譯模式，使用較少
方式1 pages
方式2
entryPagePath
方式3 添加編譯模式
3.5 調試小程序
3.5.1 調試小程序基礎庫
# 微信小程序基礎庫，一直在版本升級-轉發功能-發送朋友圈-等等# 不同功能是在不同版本加入的-假設基于老版本開發，那么某些功能可能不存在-開發時，如果沒有，寫了無效，應確認基礎庫是否支持此功能-參考文檔，https://developers.weixin.qq.com/miniprogram/dev/framework/client-lib/version.html
如果基礎庫低于1.2.0，即無此轉發功能
基礎庫版本
3.5.2 調試窗口
調試器
3.5.3 真機調試
# 剛才說的都是模擬器調試
# 真機調試 - 微信調試-掃描真機調試二維碼，出現vconsole# 自動真機調試-掃碼登錄會自動連接手機
自動真機調試
也有vconsole
3.6 純凈項目
# 純凈模式，刪除項目不需要的東西，只留核心 --> 開發
## 刪除components
## 刪除pages，除index之外的pages
## 刪除exlintrs.js，project.config.json，project.private.config.json，sitemap.json(配置文件刪除會有默認配置）# app.json
{"pages": ["pages/index/index"],"window": {"navigationBarTitleText": "功能演示","navigationBarBackgroundColor": "#0000ff","enablePullDownRefresh": false,"backgroundColor": "#00ffff","backgroundTextStyle":"dark"},"style": "v2"
}# app.wxss# app.jsApp({})# pages/index
## index.jsPage({})
## index.wxml<view class="container">吳磊吳磊</view>
## index.wxss
## index.json{"usingComponents": {},"navigationBarTitleText": "功能演示index","navigationBarBackgroundColor": "#ffff00","enablePullDownRefresh": true,"backgroundColor": "#00ffff","backgroundTextStyle":"light"}
### index.json的配置優先app.json# 提示，如果代碼修改沒有效果，清除全部緩存
# json文件不能有注釋
4 快速上手
4.1 小程序常用組件
# 1 做過htmla標簽div標簽spanimg# 2 小程序沒有以上html標簽，自己封裝的是組件-https://developers.weixin.qq.com/miniprogram/dev/component/# 3 text 類似span，不換行，顯示文字-https://developers.weixin.qq.com/miniprogram/dev/component/text.html
# 4 view 類似div，換行，可顯示任何內容-https://developers.weixin.qq.com/miniprogram/dev/component/view.html
# 5 image 類似img src填圖片位置，style設置圖片寬高-https://developers.weixin.qq.com/miniprogram/dev/component/image.htmlstyle="height: 30px; width:70px;"src="/images/b.png" images前的/表示當前項目的路徑
# 6 swipe，輪播圖組件
# 7 icon，圖標組件- <icon color="red" type="success" size="93"></icon>
4.2 tabbar配置
# 底部或頂部的tab頁-幾乎所有小程序都會有tabbar，一般在底部位置# 如何設置1 在app.json配置"tabBar":{"selectedColor": "#b4282d","position": "bottom","list":[{"pagePath": "pages/index/index","text": "首頁","iconPath": "images/兩狗對視.jpg","selectedIconPath": "images/可愛柯基.jpg"},{"pagePath": "pages/my/my","text": "我的","iconPath": "images/貓貓吃魚.jpg","selectedIconPath": "images/藍金漸層.jpg"}]},效果
