微信小程式開發系列之Hello World

2021-08-15 19:06:35 字數 1349 閱讀 9304

時至今日(具體日期不再考究),可以個人註冊了,那麼就讓我們來寫乙個自己的hello world吧。

第一步:註冊

第二步:編輯器、開發工具

這裡,我推薦用:sublime text或者visual studio code。

如果你經常用chrome的話,是不是很類似,chrome下開啟除錯工具(f12),切換到手機模式,調整除錯工具的方向到右側貼邊。

第三步:寫**

至於副檔名,先說明一下:.wxss表示css,.wxml表示html,.json表示配置資訊,這樣,你就知道了,平時我們開發乙個網頁的3檔案(html、css、js),是被另行規定了一下,你只要記住就行了,這是規則。

這裡大部分是固定的,你只需要改變配置資訊就行,針對本文,你需要指定 hello.js(不帶副檔名)。

這是全域性的css樣式定義,和你之前定義的main.css,讓整個**都用的公共樣式一樣。

4、hello.js

我們新建乙個pages資料夾,讓所有的頁面都在此管理,接著新建hello.js檔案,如下:

page({})這是固定的格式, data也是固定的,表示靜態資料用的,這裡,我們定義message變數。

這裡的view是乙個容器,類似我們經常寫的div。然後模板引用資料},上個檔案,我們定義的變數在這裡使用。

定義了2個css類樣式,供上乙個檔案的標籤class屬性使用。

第四步:除錯預覽,上傳

除錯預覽的效果,就如上邊編輯器的那樣的。

微信開發之微信小程式template使用

當您的專案需要多次使用同乙個布局和樣式的時候,您就可以考慮使用template 模板 來減少冗餘 使用方式 1.新建乙個template資料夾來存放您的通用模板 2.在資料夾裡面新建乙個wxml,wxss,進行模板和樣式的定義 3.設定模板的name,以及裡面您需要定義的wxml內容 4.設定wxs...

微信小程式開發之setData

之setdata?為什麼不能頻繁 setdata 先科普下 setdata 做的事情 在資料傳輸時,邏輯層會執行一次 json.stringify 來去除掉 setdata 資料中不可傳輸的部分,之後將資料傳送給檢視層。同時,邏輯層還會將 setdata 所設定的資料字段與 data 合併,使開發者...

微信小程式開發

一 開發準備 二 開發工具的使用 編碼目錄結構 1 wxml的功能 資料繫結 資料繫結使用 mustache 語法 雙大括號 將變數包起來。列表渲染 wx for 在元件上使用 wx for 控制屬性繫結乙個陣列,即可使用陣列中各項的資料重複渲染該元件。block wx for 類似 block w...