微信小程式學習新手教程

2022-09-24 02:54:09 字數 1174 閱讀 9557

框架

微信小程式是乙個框架,小程式開發框架。

目標是通過盡可能簡單、高效的方式讓開發者可以在微信中開發具有原生 app 體驗的服務。

框架結構

自己的檢視層描述語言(view)wxml 和 wxss基於 j**ascript 的邏輯層(app service)框架檢視層與邏輯層間提供了資料傳輸和事件系統

特點響應的資料繫結

整個系統分為兩塊檢視層(view)和邏輯層(app service)只需要在邏輯層修改資料,檢視層就會做相應的更新。省心的頁面管理

框架 管理了整個小程式的頁面路由。可以做到頁面間的無縫切換,並給以頁面完整的生命週期。只要將頁面的資料,方法,生命週期函式註冊進 框架 中,其他的一切複雜的操作都交由 框架 處理。更加微信「原生」

與在微信上瀏覽webapp相比,會減少脫節感。

檔案結構

小程式包含乙個描述整體程式的 app和多個描述各自頁面的 page。

關鍵檔案三個

最關鍵也是必不可少的,是 app.js、app.json、app.wxss 這三個。

.js字尾的是指令碼檔案

監聽並處理小程式的生命週期函式、宣告全域性變數。呼叫框架提供的豐富的 api.json字尾的檔案是配置檔案

app.json 是對整個小程式的全域性配置。配置小程式是由哪些頁面組成配置小程式的視窗背景色,配置導航條樣式,配置預設標題注意該檔案不可新增任何注釋。.wxss字尾的是樣式表檔案

就是css

關鍵資料夾pages

每乙個頁面的【路徑+頁面名】都需要寫在app.json的 pages 中且 pages 中的第乙個頁面是小程式的首頁。

小程式頁面

組成描述頁面的這四個檔案必須具有相同的路徑與檔名

.js字尾的檔案是指令碼檔案,

監聽並處理頁面的生命週期函式、獲取小程式例項,宣告並處理資料,響應頁面互動事件.json字尾的檔案是配置檔案,.wxss字尾的是樣式表檔案,.wxml字尾的檔案是頁面結構檔案。

.json

非必要將會在app.json的基礎上,覆蓋相同的配置項。}}

具有新的標籤支援自重新整理的資料傳遞方式

mvvc

.wxss

當有頁面樣式表時,頁面的樣式表中的樣式規則會層疊覆蓋app.wxss中的樣式規則。

如果不指定頁面的樣式表,也可以在頁面的結構檔案中直接使用app.wxss中指定的樣式規則。

微信小程式button元件新手教程

button按鈕元件說明 button,顧名思義,按鈕,類似於html的button標籤。我們可以設定按鈕的屬性,比如字型顏色大小,背景顏色等,可以給按鈕繫結事件,使用者點選時會觸發事件。button按鈕元件示例 執行效果如下 下面是wxml 怎麼飛?點選 按鈕 即飛 下面是js page onlo...

微信小程式頁面傳值新手教程

微信小程式頁面傳值新手教程。最近組裡開發小程式,遇到了乙個前端亙古不變的話題 頁面傳值。剛開始使用路徑傳參解決,但是眾所周知 各瀏覽器http get請求url最大長度並不相同,幾類常用瀏覽器最大長度及超過最大長度後提交情況如下 ie6.0 url最大長度2083個字元,超過最大長度後無法提交。ie...

微信小程式之購物車新手教程

微信小程式之購物車新手教程。登入成功 付款成功,而且還擁有了自己的一輛車 購物車也發現了自己的不足之處 餘額不足。為大家介紹的就是購物車 這裡演示從商品列表中新增到購物車 下面先做商品列表頁。如下圖 布局分析 首先乙個list的主盒子,接著是item盒子,這是必須的。然後把item分成左側的部分,和...