微信小程式開發 總結1

2022-08-02 20:21:11 字數 3750 閱讀 8429

開放平台和公眾平台的區別:

開放平台:

介面的平台

開放的api呼叫

後端程式設計師是開放平台開發的主力軍

公眾平台:

前端程式設計師是公眾平台開發的主力軍

小程式出現的目的:

小程式適合的業務場景:

適合做 「用完即走」 的應用(如:點外賣,打車,代價,共享單車,購物等)

小程式的基本元件:

乙個元件通常包括:開始標籤

和結束標籤

,屬性用來修飾這個元件,內容

在兩個標籤之內。

所有元件名稱與屬性名稱都是小寫。

小程式的基本元件介紹:

小程式專案的結構:

設定小程式專案的預設首頁:

pages陣列中第乙個頁面路徑,就是小程式專案裡的預設首頁。

小程式常用的ui元件

1.text文字

selectable:文字是否可選擇,除了text元件之外,其他元件都無法長按選中,預設false,boolean型別。

space:顯示連續空格,可選擇:ensp(英文空格),emsp(中文空格),nbsp,預設值false,string型別。

decode:是否解碼,可解析: < > & '    

2.view檢視容器(相當於網頁開發中的div標籤)

hover-class:指定按下去的樣式類。當hover-class=『none』時,沒有點選效果。預設值為none,型別是string。

hover-stop-propagation:指定是否阻止本節點的祖先節點出現點選態。預設false,boolean型別。

hover-start-time:按住後多久出現點選態,單位毫秒。預設值是50,型別是number。

hover-stay-time:手指鬆開後點選態保留時間,單位毫秒。預設值400,型別是number。

3.button按鈕

size:按鈕的大小。預設值default,型別string。

type:按鈕的樣式型別。預設值default,型別string。

plain:按鈕是否鏤空,背景色透明。預設值default,型別boolean。

disabled:是否禁用。預設值false,型別boolean。

loading:名稱前是否帶loading圖示。預設值false,型別boolean。

4.input輸入框

value:輸入款的初始內容。型別string。

type:input的型別。預設值:『text』,型別string。

password:是或否是密碼型別。預設值false,boolean型別。

placeholder:輸入框為空時佔位符。型別string。

disabled:是否禁用。預設值false,型別為boolean。

maxlength:最大輸入長度,設定為-1時不限制最大長度。預設值140,型別number。

5.image

image元件預設寬度300px,高度225px

若只寫乙個,也會有乙個300*225固定寬高的空白位置

wxss和css的區別:

不同點是:wxss擴充套件的特性有:尺寸單位,樣式匯入。

小程式的api

1. api概念:

api應用程式程式設計介面,是一些預先定義的函式,目的是提**用程式與開發人員基於某軟體或硬體得以訪問一組例程的能力。

2. api的三種分類:

(1)事件監聽api

on開頭的api用來監聽某個事件是否觸發

(2)同步api

sync結尾的api都是同步api

(3)非同步api(類似網頁端的ajax

通常需要指定**函式接受呼叫的結果;小程式中,大多數的api都是非同步api

元件和api的區別:

不同點:元件以ui結構布局為主,一般不需要處理業務邏輯;api以純業務邏輯為主,一般沒有對應的ui結構

小程式成員管理:登入小程式賬號 --> 管理 --> 成員管理 -- 專案成員 

開發者許可權:開發模組許可權,可使用體驗版小程式,開發者工具

運營者許可權:管理,推廣,設定等模組,可使用體驗版小程式

資料分析者(基礎分析):統計模組許可權,可使用體驗版小程式

詳情查閱:

建立小程式專案:

點選左側選單中的小程式選項

點選+號新建小程式專案

填寫專案名稱

選擇專案存放路徑(必須選擇空目錄)

點選新建按鈕

小程式預覽:

點選 工具欄 --> 預覽 即可彈出預覽視窗

靜態頁面的內容:

1.html結構標籤mui element-ui

結構:text,

view,

button,

inpu

t,image

2.css

1.選擇器

標籤選擇器,class選擇器,id選擇器,偽類偽元素選擇器,data-*自定義屬性選擇器,nth-child  nth-of-type 子類選擇器

2. 組合選擇器的優先順序 (* < 標籤 < class < id < style < !important)

3. css模組化(模組內部不影響外部:模組獨立性,使用匯入功能進行相互呼叫)

vue: scoped

react: css modules

小程式: 樣式匯入

4.適配問題

網頁用rem,

統一規定:在橫向上螢幕分為750份rpx

rpx對最終顯示的css單位的對應關係:

1rpx = 0.5px(裝置css單位) = 1設計稿px(基於iphone6進行的2倍750寬度的設計稿)

小程式中的rpx尺寸單位,把所有寬度尺寸的螢幕,統一劃分為了750份,不論大螢幕還是小螢幕,

375rpx會被小程式識別,並渲染為螢幕寬度的一半。

如果要根據iphone的設計稿繪製小程式頁面,可以直接把單位從px替換為rpx。

例如,假設iphone6設計稿上,要繪製乙個寬高為200px的盒子,換算為rpx為200rpx。

5.@import樣式匯入

可以匯入外聯樣式表

語法格式為:@import "wxss樣式表的相對路徑";    (分號一定要帶上!)

6.全域性樣式與區域性樣式

當區域性樣式的權重大於或者等於全域性樣式的權重時,才會覆蓋全域性的樣式效果!

微信小程式開發

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

微信 小程式 1

工程結構 檔案說明 1.game.js 小遊戲入口檔案。import js libs symbol import main from js main new main 2.game.json 配置檔案,檔案位於根目錄下,完成介面渲染和屬性設定。ex.key deviceorientation val...

微信小程式開發 微信繫結

官方api提供的request請求的url wx.login 請求引數 傳送請求 解析相應內容 換成json物件 jsonobject json jsonobject.fromobject sr 獲取會話金鑰 session key string session key json.get sessi...