微信小程序 基础1【本页面窗口配置、组件、布局】
視頻地址：
https://www.bilibili.com/video/BV1cW411T7t6? 【2018】學做小程序- 清華大學
https://www.bilibili.com/video/BV1M7411w7ez? ?清華大學- 學做小程序（基礎+實戰）
?
視頻-項目-源碼：https://pan.baidu.com/s/1qJ_8S0yL9ES0kl5t2AfSvg
如果 百度網盤 鏈接 失效，可以聯系我。【QQ 386335886】
?【p01 - p16】：https://blog.csdn.net/weixin_44949135/article/details/105087975
?【p17 - p28】：https://blog.csdn.net/weixin_44949135/article/details/105198450
?【p29 - p41】：https://blog.csdn.net/weixin_44949135/article/details/105308817
?希望能幫到大家，hhh~? ? ? 如有錯誤，歡迎指正~
?目? ?錄
微信小程序 官方網址【注冊/登錄】：https://mp.weixin.qq.com?
微信小程序【定義】：
微信小程序的優點 ：?
微信小程序的優勢 ：
相關說明 ：
相關文檔 ：?
實戰演練 ：
新建項目 ：
樣式的使用 ：
設置標題 ：
使用?.json?文件來對本頁面的窗口表現進行配置 ：
在app.json中，不能有注釋 ：
wxm常見組件 ：
xml布局 ：?
傳統布局
彈性盒子布局
響應式長度單位rpx ：讓元素大小適配不同寬度屏幕。
新建頁面?：
編寫 好新增的頁面，查看渲染效果 ：
全局wxss配置 ：
配置TabBar ：
數據綁定-從視圖中抽離出數據 ：
小程序運行環境與基本架構 ：
重要視頻截圖 ：
微信小程序 官方網址【注冊/登錄】：https://mp.weixin.qq.com?
微信小程序【定義】：
微信小程序，小程序的一種，英文名 Wechat Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。
微信小程序的優點 ：?
微信小程序的優勢 ：
相關說明 ：
相關文檔 ：?
實戰演練 ：
新建項目 ：
樣式的使用 ：
設置標題 ：
{"usingComponents": {},"navigationBarTitleText": "關于","navigationBarBackgroundColor": "#FF69B4", //標題欄背景色"navigationBarTextStyle": "black" //文本顏色( white/black ) }使用?.json?文件來對本頁面的窗口表現進行配置 ：
每一個小程序頁面也可以使用?.json?文件來對本頁面的窗口表現進行配置。
頁面中配置項在當前頁面會覆蓋?app.json?的?window?中相同的配置項。
文件內容為一個 JSON 對象，有以下屬性：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
在app.json中，不能有注釋 ：
wxm常見組件 ：
<text style="font-weight: bold; font-size: 30px;">123</text>
<text hidden="true">456</text>
<text class="info">789</text>
<text data-user-name="user">000</text>
?
wxml常見組件,可設置屬性【無 單標記元素】：class="" id="" style="" bindtap="" hidden="" data-user-name="user"
data-user-name="user" ：設置組件自定義的數據。通過data-方式自定義的數據,將會在事件觸發時,封裝到事件對象中,傳遞給對應的事件處理函數進行處理。
xml布局 ：?
傳統布局
傳統布局：不靈活，不能夠靈活地應對布局的變化。
頁面結構發生變化的時候（比如：8個text標簽。），布局屬性相關的取值（margin-bottom）要進行相關的調整。
彈性盒子布局
彈性盒子布局 ：相關的wxml屬性賦值，比較統一；方式靈活。
響應式長度單位rpx ：讓元素大小適配不同寬度屏幕。
使用px這種絕對單位，無法使圖片寬高始終保持為屏幕的一半。px : rpx---1 : 2
新建頁面?：
方法一 ：【推薦方法】
簡便方法【快捷方法】：
直接在app.json文件中，修改pages，增加"pages/weekly/weekly"，保存即可?自動新增4個基本文件。
方法二 ：[ ?視頻上，可以。現在，不管用---報錯（可能是開發工具版本更新問題。）?]
配置 json?文件?：配置為空的json對象文本。語句：{}
配置 js腳本文件?：在腳本文件中,調用page()函數,給頁面注冊一個空對象,作為其頁面對象。語句：page({})
編寫 好新增的頁面，查看渲染效果 ：
每一個用戶可能訪問到的頁面，都需要在前局配置中來登記它的訪問路徑。
查看方法 ：【第一個配置的頁面，作為初始頁面。】
全局wxss配置 ：
navigator 組件（不要拼錯字母！是a不是e！） 【添加導航鏈接】：
navigator 微信開發文檔 ：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
配置TabBar ：
很多時候，對于about頁和weekly頁，這樣的一級頁面，我們希望實現的是在它們之間的快速的任意的切換。
在全局配置 app.json 中，配置出 ‘ 所需要的配置 ’ ：
【通過對TabBar屬性的配置來實現---包含幾個tab---每一個tab的具體屬性是什么---通過list屬性設置完成】
【list屬性取值：是一個對象數組---其中的每一個對象對應的是一個tab的設置】
navigator失效，需要設置navigator的open-type屬性（open-type="switchTab"）。
配置全局的導航欄樣式【 json文件中，navigationBarTitleText等屬性】 ：
直接將index.json文件中的代碼復制到weekly.json中：直接復制的方法必然會帶來代碼升級時候的問題。
全局設置 ：app.json文件，設置window。
數據綁定-從視圖中抽離出數據 ：
硬編碼是將數據直接嵌入到程序或其他可執行對象的源代碼中的軟件開發實踐，與從外部獲取數據或在運行時生成數據不同。 硬編碼數據通常只能通過編輯源代碼和重新編譯可執行文件來修改，盡管可以使用調試器或十六進制編輯器在內存或磁盤上進行更改。 硬編碼的數據通常表示不變的信息，例如物理常量，版本號和靜態文本元素。 另一方面，軟編碼數據對用戶輸入，HTTP服務器響應或配置文件等任意信息進行編碼，并在運行時確定。?
?視頻截圖 ：
?
在小程序框架中，每個頁面所需要的各種數據，都是集中在這個頁面所注冊的頁面對象中定義的。
每個頁面都是在其對應的腳本文件[ .js文件 ]中，通過調用page({})函數來給這個頁面注冊其所需要的頁面對象。
在頁面對象中通過data屬性[ data:{} ]給頁面定義其所需要的各種數據。
記錄觀察內部狀態數據：count ( 內部狀態變量 ) 記錄當前頁面被訪問的次數。
將數據綁定輸出到視圖中進行顯示。
我們可以對‘內部狀態變量’進行一些運算，或者說對它們進行一些組合來進行輸出顯示。
通過開發者工具調試器的APPdata這個type，我們可以實時的調試每個頁面的所有內部狀態變量的取值。
小程序運行環境與基本架構 ：
about頁和weekly頁，都內置了一個webviewId的內部狀態變量，來記錄它們各自是在幾號weview進程之中進行渲染的。
?
重要視頻截圖 ：
about.json不能是空白json對象。
調用page()函數給about頁面注冊一個頁面對象。
注冊空頁面對象：page({})?
utils/app.json : 至少配置pages屬性,字符串數組-配置用戶可能訪問到的每一個頁面的路徑
完成以上配置，無報錯。
總結
以上是生活随笔為你收集整理的微信小程序 基础1【本页面窗口配置、组件、布局】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 匹配串 KMP算法
- 下一篇： CHM格式的帮助文档，打开时乱码