js 走近小程式

2022-04-18 09:21:07 字數 1530 閱讀 2429

一、什麼是小程式?

二、小程式開發工具以及語言?

三、小程式與普通網頁開發的區別?

​網頁開發渲染執行緒和指令碼執行緒是互斥的,這也是為什麼長時間的指令碼執行可能會導致頁面失去響應,而在小程式中,二者是分開的,分別執行在不同的執行緒中。網頁開發者可以使用到各種瀏覽器暴露出來的 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...