非教程，個(gè)人整理使用，歡迎提出建議 :D

文件格式

視圖層 [ .wxml ]、[ .wxss ]、[ .wxs ]、邏輯層[ .js ]、配置[ .json ]
??wxml類似一個(gè)嵌套組件，開頭并沒有聲明之類的東西，直接上了<view></view>功能類似于<div></div>。
??wxss目前沒發(fā)現(xiàn)和css有太大區(qū)別的地方，可以用@import引入另外一個(gè)表（一般引公共表），也可以直接在wxml里寫內(nèi)聯(lián)樣式<view style="height={{mainHeight}}rpx"></view>。
??wxs是小程序的腳本語言，有自己語法，和js類似但并不一致，兩者運(yùn)行互不相關(guān)，也不能調(diào)用API，據(jù)官方說IOS下比js運(yùn)行快2-20倍，通過<wxs></wxs>內(nèi)嵌或者建立 .wxs 文件。注意每個(gè)wxs都是單獨(dú)模塊，變量和函數(shù)私有，給外邊就用module.exports。
??小程序的 js 里目前可知的是不能操作DOM的，但是同時(shí)也給定了一大批API，十分方便好用，js總是有很多好玩的，這里先貼一塊文檔介紹。

• 增加 App 和 Page 方法，進(jìn)行程序和頁面的注冊。
• 增加 getApp 和 getCurrentPages 方法，分別用來獲取 App 實(shí)例和當(dāng)前頁面棧。
• 提供豐富的 API，如微信用戶數(shù)據(jù)，掃一掃，支付等微信特有能力。
• 每個(gè)頁面有獨(dú)立的作用域，并提供模塊化能力。文檔入口

??json是一個(gè)定義配置的json數(shù)據(jù)文件，有全局配置app.json、工具配置project.config.json，還有單個(gè)子頁面的配置page.json。小程序的json里配置項(xiàng)有現(xiàn)成名字,像全局的 pages、window、tabBar、networkTimeout、debug等；至于page.json即單個(gè)頁面的配置，只有window配置項(xiàng)（即頁面展示樣式）的權(quán)限，所以不用寫配置項(xiàng)名字，直接寫內(nèi)容。寫完頁面配置會覆蓋掉全局配置的window屬性。

/*一個(gè)小程序的簡單文件樹模型*/
├── app.js
├── app.json 
├── app.wxss
├── pages     /*頁面文件包*/
│   │── index  /*每個(gè)文件夾一個(gè)頁面*/
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json  /*page.json*/
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils
    └── utils.js /*封裝的工具類js，utils里用 module.exports 輸出，外部用require調(diào)用*/

文件的嵌套

??wxml中嵌套另外一個(gè)wxml<include src="../public/public.wxml"/>
??wxss中的嵌套@import "../public/public.wxss";
??js中的嵌套var utils = require('../../utils/util.js')
需要配合在被引用js中使用module.exports = {sayHi:sayHi,task:task}

rpx/rem

??rpx、rem是自適應(yīng)屏幕尺寸的單位。小程序的寬度是750rpx（20rem）。如果屏幕寬度是375px，使用rpx后， 1rpx = 0.5px；使用rem的話，1rem = 18.75 px。相比之下，rpx更適合精細(xì)定位。

花括號/大括號

//開發(fā)者工具中
if(true){
  this.setData({
    foo:'bar'
  })
}
//可省略為
if(true)
  this.setData({
    foo:'bar'
  })
//強(qiáng)迫癥 短時(shí)間內(nèi)不打算采用，還是老規(guī)矩寫

雙花/大括號

<text class="tipText">{{valueText}}</text>和Vue（或者PHP，同樣都是嵌套插入）里的用法比較像，wxml里插入，js里動態(tài)設(shè)定內(nèi)容。雙括號可以充當(dāng)類名（class="{{className}}"）、屬性（src="{{imageUrl}}"）?？梢园磉_(dá)式如class="{{dataNum == 2?'newClass':''}}"根據(jù)外在條件做判斷，可以達(dá)到動態(tài)改變元素樣式的目的。

小程序組件

swiper

??滑塊視圖容器，就是焦點(diǎn)圖，不用再寫一大堆js，定義一下屬性就可以實(shí)現(xiàn)不錯(cuò)的效果。

<swiper style="height:300rpx;width:100%" autoplay="true" 
indicator-dots="true" indicator-color="#fff" 
indicator-active-color="#00c0ff" 
bindchange="swiperChange" bindanimationfinish="swiperFinish">
  <swiper-item >
    <image mode="widthFix" src="demo.jpg"></image>
  </swiper-item>
</swiper>

??swiper 和 swiper-item需要組合使用，上面這個(gè)定義了寬高、自動、小圓點(diǎn)指示器。還有interval、duration、circular、vertical這些屬性等等。可以綁定 change 和 finish 事件。

view

??view也是視圖容器，還有scroll-view、movable-view、cover-view，就是字面意思，可滾動的，可移動的，覆蓋的。給個(gè)入口

textarea原生組件

??textarea適合在輸入多行文本時(shí)候使用，不過需要注意這是個(gè)原生組件，層級是最高的，非原生組件是蓋不到它上面的。scroll-view、swiper、picker-view、movable-view這幾個(gè)里面不能使用，沒C3動畫，也不能fixed。
??為了在原生組件上添加內(nèi)容，小程序定義了兩個(gè)特殊的原生組件，cover-view 與cover-image，這兩個(gè)可以覆蓋在部分原生組件之上?？筛采w的原生組件包括map、video、canvas、camera、live-player、live-pusher。很遺憾這個(gè)部分并不包括textarea，需要覆蓋的情況可以考慮隱藏textarea的樣式，附加的內(nèi)容在帶有樣式的view里上下排列。
??另外，在textarea輸入?yún)^(qū)域內(nèi)也不建議有其它元素的事件，因?yàn)殚_發(fā)者工具中事件是可以綁定和測試成功的，但是真機(jī)上有問題。比如之前的項(xiàng)目里有需要通過定位把一個(gè)按鈕布局進(jìn)textarea區(qū)域內(nèi)，bindtap="copy"(copy是自定義的名字)開發(fā)者工具里點(diǎn)擊按鈕一次，實(shí)現(xiàn)了復(fù)制；預(yù)覽進(jìn)入真機(jī)之后，點(diǎn)擊會彈出鍵盤，私以為這是原生組件的最高層級問題，但是在瘋狂點(diǎn)擊之后，有那么一兩次會觸發(fā)成功，而且在特意放大按鈕之后，觸發(fā)幾率會變大。最后是以text替換textarea解決，暫時(shí)沒有詳細(xì)測試根本原因。Mark

小程序Flex布局

??Flex布局的常用屬性總結(jié)一下

.container{//容器
    display:flex;
    height:100%;
    width:100%;
    flex-direction:row; //默認(rèn)是 row 按行排，column 是按列排
    flex-wrap:nowrap; //擠不下的時(shí)候縮窄，選用wrap 的話是換行
    flex-flow:nowrap row; //上邊兩個(gè)的復(fù)合寫法
    justify-content:center; //水平居中
    //flex-start | flex-end | space-between | space-around
    align-items:center; //垂直居中，針對一行
    //flex-start | flex-end | baseline | stretch;
    align-content:center; // 垂直居中，針對wrap的多行
}
.content{//內(nèi)容
    flex-grow:2; //地方足夠大時(shí)，規(guī)定這個(gè)元素放大的比例
    flex-shrink:1; //不夠大時(shí)，規(guī)定這個(gè)元素縮小的比例
    flex-basis:100rpx; //水平方向占多大空間
    flex:2 1 100rpx; //grow,shrink,basis復(fù)合寫法
    order:3; //從左到右顯示的順序
    align-self:; //每個(gè)元素自己的對齊方式
}

做一個(gè)簡單的復(fù)制、清空按鈕

<!--wxml文件-->
<view>
    <text>{{results}}</text>
    <button size='mini' bindtap='clear'>清空<button/>
    <button size='mini' bindtap='copy'>復(fù)制<button/>
</view>

//js文件
page({
    data:{
        results:'測試文本',
    }
    //判斷是否有內(nèi)容，沒有就提示，有就清空
    clear: function (e) {
    var that = this;
    if (that.data.results == '') {
      wx.showToast({
        title: '無內(nèi)容',
        icon: 'none'
      });
    } else {
      that.setData({
        results: ''
      })
      wx.showToast({
        title: '清除成功',
        icon: 'none'
      });
    }
  },
  //判斷是否有內(nèi)容，沒有就提示，有就放進(jìn)剪切板
  copy: function (e) {
    var that = this;
    if (that.data.results == '') {
      wx.showToast({
        title: '無內(nèi)容',
        icon: 'none'
      });
    } else {
      wx.setClipboardData({
        data: that.data.results,
        success: function (res) {
          wx.showToast({
            title: '復(fù)制成功',
            icon: 'none'
          });
        }
      });
    }
  },

做一個(gè)有字?jǐn)?shù)提示的輸入框

使用的組件是textarea，想添加一個(gè)限定字?jǐn)?shù)的提示。

<!--wxml文件-->
<view>
    <textarea bindinput='inputs' value='{{majorValue}}'></textarea>
    <text class='textTip'>你還可以輸入{{currentLeft}}字</text>
</view>

//js文件 字?jǐn)?shù)檢測
page({
    data:{
        majorValue:"",
        currentLeft:140,
    }
    inputs: function (e) {    
    var value = e.detail.value;     //找到當(dāng)前框內(nèi)的值
    var len = parseInt(value.length);   //算出長度          
    this.setData({
      currentLeft: 140-len  //總長度減去目前長度
    });  
  },
})

生命周期函數(shù)

onLoad: function ()  //監(jiān)聽頁面加載
onShow: function ()  //頁面顯示/切入前臺時(shí)觸發(fā)。
onReady: function ()  //頁面初次渲染完成時(shí)觸發(fā)。一個(gè)頁面只會調(diào)用一次，代表頁面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互。
/*對界面內(nèi)容進(jìn)行設(shè)置的 API 如wx.setNavigationBarTitle，需在onReady之后進(jìn)行。*/
onHide: function ()  //頁面隱藏/切入后臺時(shí)觸發(fā)。 如 navigateTo 或底部 tab 切換到其他頁面，小程序切入后臺等。
onUnload: function ()  //頁面卸載時(shí)觸發(fā)。如redirectTo或navigateBack到其他頁面時(shí)。