微信小程式開發入門

2022-09-17 09:12:10 字數 2181 閱讀 8192

首先說下結構吧,看看小程式到底長什麼樣子

然後除了系統提供的,我們要想開發小程式肯定要建立自己的頁面,每個自己的頁面都有四個檔案index.js index.json index.wxml ,index.wxss。

那這些檔案裡到底都有些什麼呢 ,下面看圖:

index.wxss 就想成css吧,其實就是樣式表 什麼color marin padding width height  這些

這個就是index.json 沒什麼太大的作用 就是一些配置資訊 

這個就比較重要了 index.js 就是一些監聽函式或者自定義函式 和page 的註冊等

這個就是index.wxml  就相當於html 看這樣子就覺得長得挺像,就負責頁面具體長什麼樣子,由一些控制項節點堆成的,裡面繫結資料和函式

框架提供了自己的檢視層描述語言wxml和wxss ,就類似於html 和css,以及基於j**ascript的邏輯層框架,並在檢視層和邏輯層間提供了資料傳輸和事件系統,可以讓開發者方便的聚焦於資料與邏輯之上。

框架的核心是乙個響應的資料繫結,這點和native的mvc mvvm 和react-native的state,props等資料繫結響應繫結一樣的,框架都是讓資料與檢視盡可能簡單的保持同步,當資料發生改變時,只需要在邏輯層修改資料,檢視層就會自動的響應更新。可以通過下面乙個例子來看:

// this is our view 

hello }   // 是不是感覺很像html的寫法呢,別急下面的更像

click me 這其實就是乙個按鈕掛接乙個function ,函式名稱叫changename,按鈕的標題叫click me

var hellodata = }

}page(, ]

setdata 函式用於將資料從邏輯層傳送到檢視層,同時改變對應的this.data 的值

直接修改this.data的值無效,這點有點類似this.setstate,無法改變頁面的狀態,還會造成資料的不一致

index.wxml是頁面的結構檔案}}

本例中使用了來搭建頁面結構,繫結資料和互動處理函式

index.js是頁面的指令碼檔案,在這個檔案中可以監聽並處理頁面的生命週期函式,獲取小程式例項,宣告並處理資料,響應頁面互動事件等

//獲取應用例項

page(

//事件處理函式

bindviewtap: function() }

page( })

關鍵字需要寫在雙引號之間 

運算  可在}內進行簡單的運算 三元運算 算數運算 邏輯判斷  字串運算  資料路徑計算 陣列 物件

條件渲染

在框架中可以用 wx:if=「」 來判斷是否需要渲染該**塊

列表渲染

在元件中使用wx:for 控制屬性繫結乙個陣列,即可使用陣列中的各項的資料重複渲染該元件

預設陣列的當前項的下標變數名預設為index,陣列當前項的變數名預設為item 

page({

使用wx:for-item可以指定陣列當前元素的變數名 使用wx:for-index 可以指定陣列當前下標的變數名

模板 template

可以在模板中定義**片段,然後在不同的地方呼叫

定義模板 使用name 屬性作為模板的名字

使用is屬性,宣告需要使用的模板,然後將模板的data傳入

page({

is 屬性可以使用雙引號語法來動態決定具體需要渲染哪個模板

模板擁有自己的作用域,只能使用data傳入的資料

事件在元件上繫結乙個事件處理函式,如bindtap,當使用者點選該元件的時候會在該頁面對應的page中找到對應的事件處理函式

click me

在相應的page中定義事件處理函式引數是event

page({

微信小程式 開發入門 一

對使用者來說 3 通過掃一掃,搜尋等方式,我們用完了直接退出 與應用程式的區別在於 開發準備工作有以下幾個環節 1 首先要註冊小程式的賬號,點選註冊選擇小程式進行註冊 選擇小程式型別進行註冊 2 填寫相關郵箱並啟用 註冊郵箱並啟用 3 資訊登記,你是個人 企業 等組織型別 這人我們選擇個人,並填寫相...

微信小程式入門

標籤 view text 語法 條件渲染 view view else view 列表渲染 for wx key view for wx for item myitem wx for index myindex text 模板template 定義 template name temp view t...

微信小程式入門

pages 存放頁面的目錄 utils 存放自定義util工具的目錄 project.config.json 專案配置檔案 sitemap.json關於本檔案的更多資訊,請參考文件 專案中檔案,保留project.config.json 和 sitemap.json即可,其他的都可以刪除然後自行建立...