一、什麼是小程式?
二、小程式開發工具以及語言?
三、小程式與普通網頁開發的區別?
網頁開發渲染執行緒和指令碼執行緒是互斥的,這也是為什麼長時間的指令碼執行可能會導致頁面失去響應,而在小程式中,二者是分開的,分別執行在不同的執行緒中。網頁開發者可以使用到各種瀏覽器暴露出來的 dom api,進行 dom 選中和操作。而如上文所述,小程式的邏輯層和渲染層是分開的,邏輯層執行在 jscore 中,並沒有乙個完整瀏覽器物件,因而缺少相關的dom api和bom api。這一區別導致了前端開發非常熟悉的一些庫,例如 jquery、 zepto 等,在小程式中是無法執行的。同時 jscore 的環境同 nodejs 環境也是不盡相同,所以一些 npm 的包在小程式中也是無法執行的。
四、小程式的**構成?
(1)在我們新建的小程式專案裡面會有四種型別的檔案。
.json
字尾的json
配置檔案 (靜態配置資訊)
.wxml
字尾的wxml
模板檔案(相當於原生html檔案)
.wxss
字尾的wxss
樣式檔案(相當於原生css檔案)
.js
字尾的js
指令碼邏輯檔案
(2) **結構詳細說明。在新建的專案裡面我們可以看到如下圖所示目錄
1. project.config.json 工具配置
內部含有多項內容的配置,概括是個性化配置、打包、除錯、自定義預處理的一系列配置。詳細請參考
pages
字段 —— 用於描述當前小程式所有頁面路徑,相當於路由配置的位址。(但是在pages配置一條路徑位址,則會在相應為資料夾建立相應的檔案)
window
字段 —— 定義小程式所有頁面的頂部背景顏色,文字顏色定義等。
onlaunch(object object) 小程式初始化完成時觸發,全域性只觸發一次。
globaldata 全域性資料,在每個頁面都可獲取到。
4. utils 封裝的公共方法
5. pages 裡面包含每個頁面
index.json 裡面包含了對頁面的一些設定,例如:導航欄顏色、視窗背景、禁止頁面右滑手勢返回等設定,詳細請參考
.wxml 檔案類似於html,描述頁面頁面的結構,小程式的wxml
用的標籤是view
,button
,text是已經包裝好的元件,多了一些wx:if
這樣的屬性以及}
這樣的表示式。詳細請參考
.wxsswxss
具有css
大部分的特性,小程式在wxss
也做了一些擴充和修改。新增的尺寸單位 rpx ,用來適配不用的螢幕寬高問題,此外wxss
僅支援部分css
選擇器。詳細請參考
wxml事件
以上為本人原創,參考資料
小程式中js的賦值問題
1.js中給當前頁面賦值 that.setdata 2.js中給當前頁面的元件賦值 that.priceshowmodalcomponent.setdata 在給元件賦值之前,需要將元件初始化 onready function 在xml中元件應該先定義id 當前檔案的json 元件的引用 compo...
js 小程式入門 wxml語法 二
官網 一 資料繫結與條件渲染 1 wxml 中的動態資料均來自對應 page 的 data。2 使用 mustache 語法 雙大括號 將變數包起 內容 屬性 view控制 view 可用block 替換,包裹多個view if else運算 三元運算 hidden算數運算 d陣列 物件 二 列表渲...
微信小程式js過度動畫
一,我們先來看看效果吧。二,我們用的是js的逐幀動畫,css也可有相同的效果,我們這裡用js pages arrary first more4 more4.js let puts cloud cloud cloud cloud cloud cloud cloud cloud cloud page t...