原創聲明:本文為作者原創,未經允許不得轉載,經授權轉載需注明作者和出處
首先小程序主要由WXML,WXSS,JS三部分組成,而WXML與WXSS脫胎于xml與css,有一定的區別,具體見http://www.mkhyf.com/topic/497 (劉冰華) 以及http://www.mkhyf.com/topic/694 (茂茂大妖怪)
凡程序應用,皆為頁面與功能。WXML與WXSS負責頁面,JS負責功能。WXML告訴機器這個頁面有什么內容,而WXSS告訴機器這些內容是怎么布局的。WXML與WXSS的具體用法小子就不一一贅述了,在此我就這次經歷分享一下心得吧。
頁面(WXML):
推薦每一個<>都賦予class屬性,對于button text icon image 等有點擊觸發功能的組件都添加bindtap的屬性(即使可能有的根本上就用不到)
對于input或需要文本輸入的組件,可以用emsp,enspm,nbsp實現空格,對于密碼,則是添加password屬性,為false時密碼不可見,為true時密碼可見
對于頁面跳轉,則是添加navigator屬性,并寫明URL。不過我認為頁面跳轉最好還是放在JS里寫比較好。
對于swiper滑塊視圖容器,官方給出的代碼我認為不是很好,因為在修改每個swiper-item時不時很方便。相反,這時可以把swiper-item單獨拿出來分開寫
對于scroll-view可滾動視圖容器,一定要注明是x軸還是y軸滾動!,并且必須規定整個容器的高度或者寬度。如果出現scroll-view-item的小容器不能鋪滿,可以在整個scroll-view外加上一層<view class='a-scroll'>
搜索框的模式有兩種,我常用的是<icon class="searchcion" size='20' type='search'></icon>
<cover-***></cover-***>中間不能再加其他東西
頁面(WXSS):
第一個通常是整個頁面的布局,可用 .page{},也可以用自己在WXML命名的class
頁面布局的首要是確定布局方向,具體可以參考http://www.runoob.com/w3cnote/flex-grammar.html
其次是整個頁面或者整個容器的長寬高顏色等屬性。由width、height、color
margin屬性只寫一個時是包含了top、right、bottom、left四個方向的。建議用時不要嫌麻煩,四個屬性該怎么寫就怎么寫,不要只用一個margin
字體的話,則是用font。有font-size、font-style、font-variant、font-weight、font-family
邊框的話,則是用border。有border-width、border-style、border-color 注意:border-width與border-color用法同margin
背景的話,則是用background,有background-color background-position background-size background-repeat background-origin background-clip background-attachment background-image
position屬性規定元素的定位類型。值有absolute、fixed、relative、static(默認值)、inherit
注意:能用百分比時請用百分比,不推薦全部用px、rpx定長
功能(JS):
申明全局變量請在Page{}外申明
page里的data常用來放我們會用到的數組以及一些變量
onload方法是指加載 當前文件(頁面)時會用到的方法。我們可以在這里讀取我們之前存在本地的數據或者使用wx.getSystemInfo來獲取一些需要在當前用到的數據信息;反之在onclose那里我們可以存放一些我們需要存放的數據。API中存儲數據到本地用wx.setStorage(Sync)(不加Sync的是異步存儲,加Sync是同步存儲),獲取本地存儲的數據用wx.getStorage(Sync)(不加Sync的是異步存儲,加Sync是同步存儲)
對于需要改變屬性值的方法,一定要記得加e!!如: ***:function(e){}
對于需要根據用戶的輸入來進行提示時,用wx.showToast。建議icon為none
對于請求后臺則是wx.request({}) 注意:微信小程序wx.request發起的請求必須是HTTPS
頁面跳轉的API有wx.navigateTo,wx.redirectTo,wx.switchTab,wx.navigateBack,wx.reLaunch
wx.chooseImage是用來選擇本地圖片的
添:所有的頁面都應該在app.json里注明
在app.js里的app{}里申明globaldata變量,可以在其它*.js里通過app.globaldata引用這個變量
先寫成這樣吧,都把自己寫暈的(◎﹏◎)。亂七八糟的