【小程序】基礎(chǔ)入門寫法

微信官方開發(fā)工具:
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
啟動工具時颖系,開發(fā)者需要使用已在后臺綁定成功的微信號掃描二維碼登錄,后續(xù)所有的操作都會基于這個微信帳號

小程序是啥辩越,不多做介紹嘁扼,我們直接來看項目代碼!

  1. 小程序文件結(jié)構(gòu)系統(tǒng)
    文件系統(tǒng)結(jié)構(gòu)

    小程序的文件管理和html的保持高度一致性黔攒!我下面說一下一般項目內(nèi)會使用到文件夾
    1.1 WXML文件
    WXML(WeiXin Markup Language)是框架設(shè)計的一套標(biāo)簽語言趁啸,結(jié)合基礎(chǔ)組件事件系統(tǒng)督惰,可以構(gòu)建出頁面的結(jié)構(gòu)不傅。
    1.1.1 數(shù)據(jù)綁定
    1.1.2 列表渲染
    1.1.3 條件渲染
    1.1.4 模板
    1.1.5 事件
    1.1.6 引用

1.1.2 WXSS文件

WXSS(WeiXin Style Sheets)是一套樣式語言,用于描述 WXML 的組件樣式赏胚。
WXSS 用來決定 WXML 的組件應(yīng)該怎么顯示蛤签。
為了適應(yīng)廣大的前端開發(fā)者,我們的 WXSS 具有 CSS 大部分特性栅哀。 同時為了更適合開發(fā)微信小程序震肮,我們對 CSS 進(jìn)行了擴(kuò)充以及修改。

與 CSS 相比我們擴(kuò)展的特性有:

尺寸單位
樣式導(dǎo)入

尺寸單位
rpx(responsive pixel): 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)留拾。規(guī)定屏幕寬為750rpx戳晌。如在 iPhone6 上,屏幕寬度為375px痴柔, 
共有750個物理像素沦偎,則750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素咳蔚。
設(shè)備  rpx換算px (屏幕寬度/750)  px換算rpx (750/屏幕寬度)
iPhone5 1rpx = 0.42px   1px = 2.34rpx
iPhone6 1rpx = 0.5px    1px = 2rpx
iPhone6 Plus    1rpx = 0.552px  1px = 1.81rpx
建議: 開發(fā)微信小程序時設(shè)計師可以用 iPhone6 作為視覺稿的標(biāo)準(zhǔn)豪嚎。 
注意: 在較小的屏幕上不可避免的會有一些毛刺,請在開發(fā)時盡量避免這種情況谈火。

樣式導(dǎo)入
使用@import語句可以導(dǎo)入外聯(lián)樣式表侈询,@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑,用;表示語句結(jié)束糯耍。

示例代碼:

/** common.wxss **/
.small-p {
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

內(nèi)聯(lián)樣式
框架組件上支持使用 style扔字、class 屬性來控制組件的樣式。
style:靜態(tài)的樣式統(tǒng)一寫到 class 中温技。style 接收動態(tài)的樣式革为,在運行時會進(jìn)行解析,請盡量避免將靜態(tài)的樣式寫進(jìn) style 中舵鳞,以免影響渲染速度震檩。
<view style="color:{{color}};" />
class:用于指定樣式規(guī)則,其屬性值是樣式規(guī)則中類選擇器名(樣式類名)的集合蜓堕,樣式類名不需要帶上.抛虏,樣式類名之間用空格分隔。
<view class="normal_view" />

選擇器
目前支持的選擇器有:
選擇器 樣例  樣例描述
.class  .intro  選擇所有擁有 class="intro" 的組件
#id #firstname  選擇擁有 id="firstname" 的組件
element view    選擇所有 view 組件
element, element    view, checkbox  選擇所有文檔的 view 組件和所有的 checkbox 組件
::after view::after 在 view 組件后邊插入內(nèi)容
::before    view::before    在 view 組件前邊插入內(nèi)容

全局樣式與局部樣式
定義在 app.wxss 中的樣式為全局樣式俩滥,作用于每一個頁面嘉蕾。在 page 的 wxss 文件中定義的樣式為局部樣式,
只作用在對應(yīng)的頁面霜旧,并會覆蓋 app.wxss 中相同的選擇器错忱。

1.1.3 JS文件和其它文件
一般來說初學(xué)者在接觸到小程序的時候,都只會使用pages文件夾挂据,因為接近所有的東西都可以放到pages里面以清,可是在具體項目中,一些資源文件崎逃,工具類掷倔,和輔助頁面,很多時候都是放到外面个绍。大概可以分為一下幾類:

images勒葱,medias浪汪,csv,file這些文件的歸為程序的資源文件凛虽!
自定義工具類
自定義頁面類死遭,及其模版
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市凯旋,隨后出現(xiàn)的幾起案子呀潭,更是在濱河造成了極大的恐慌,老刑警劉巖至非,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件钠署,死亡現(xiàn)場離奇詭異,居然都是意外死亡荒椭,警方通過查閱死者的電腦和手機(jī)谐鼎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來戳杀,“玉大人该面,你說我怎么就攤上這事⌒趴ǎ” “怎么了隔缀?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長傍菇。 經(jīng)常有香客問我猾瘸,道長,這世上最難降的妖魔是什么丢习? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任牵触,我火速辦了婚禮,結(jié)果婚禮上咐低,老公的妹妹穿的比我還像新娘揽思。我一直安慰自己,他們只是感情好见擦,可當(dāng)我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布钉汗。 她就那樣靜靜地躺著,像睡著了一般鲤屡。 火紅的嫁衣襯著肌膚如雪损痰。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天酒来,我揣著相機(jī)與錄音卢未,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛辽社,可吹牛的內(nèi)容都是我干的伟墙。 我是一名探鬼主播,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼滴铅,長吁一口氣:“原來是場噩夢啊……” “哼远荠!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起失息,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎档址,沒想到半個月后盹兢,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡守伸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年绎秒,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片尼摹。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡见芹,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蠢涝,到底是詐尸還是另有隱情玄呛,我是刑警寧澤,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布和二,位于F島的核電站徘铝,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏惯吕。R本人自食惡果不足惜惕它,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望废登。 院中可真熱鬧淹魄,春花似錦、人聲如沸堡距。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽吏颖。三九已至搔体,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間半醉,已是汗流浹背疚俱。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留缩多,地道東北人呆奕。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓养晋,卻偏偏與公主長得像,于是被迫代替她去往敵國和親梁钾。 傳聞我的和親對象是個殘疾皇子绳泉,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,916評論 2 344

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,522評論 25 707
  • 轉(zhuǎn)載請注明出處, 謝謝! (~ o ~)Y 1月9日,也就是今天姆泻,微信推出的“小程序”正式上線零酪。“小程序”是一種無...
    Jimmy_P閱讀 14,373評論 53 273
  • 前兩天看一篇文章《和能讓你變美的人一起玩》拇勃∷奈看到這個題目,我想到的是A君方咆,這些年和她在一起月腋,我真的覺得我變美了很多...
    暖心班長閱讀 230評論 0 1
  • 被窩里很悶,我卻還是整個人埋在被子里瓣赂,向世界假裝此地寧靜榆骚。 所有人都睡了,整個村莊漆黑煌集、靜寂妓肢。白天黑夜,明暗之別牙勘。...
    小小瓶閱讀 760評論 0 0