“微信小程序” js部分注解

1、小程序不提供獲取dom的操作，而是讓我們直接將事件綁定寫入到組件內。區別在於bind不阻止冒泡，而catch阻止冒泡。

<view id="tapTest" bindtap="tapName"> Click me! </view>

2、currentTarget和target兩個屬性，前者是綁定事件的組件，后者是觸發事件的組件源。

<view id="tap1" data-hi="綁定組件" bindtap="tapName">
  <view id="tap2" data-hi="觸發組件源"></view>
</view>

　　我們再輸出看看（為了方便對比，只保留下currentTarget和target兩個屬性）:

{
 "target": {
  "id": "tap2",
  "dataset": {
   "hi":"觸發組件源"
  }
 },
 "currentTarget": {
  "id": "tap1",
  "dataset": {
   "hi":"綁定組件"
  }
 }
}

3、data-hi和dataset，這兩個屬性有什么關系呢？

　　dataset的值其實就是我們設置的data-xxx（html中常見的自定義屬性的寫法，而在小程序中，則被用來傳參）的值，而xxx則是dataset里面的key。

4、如何去動態的改變樣式呢？

　　我們沒有辦法直接獲取dom然后去改變他的樣式，所以我們只能通過data里的屬性來控制樣式的變化，如上面的代碼，overflow的值取決於screenType的值是否存在，如果存在，則overflow: hidden，反之overflow: scroll-y；那么我們只需要改變screenType的值。要改變screenType的值也簡單了，小程序提供了this.setData方法，可以設置data內的值。

<view class="container" style="overflow: {{screenType?'hidden':'scroll-y'}}" bindtap="bindType">
Page({
 data: {
  screenType: ''
 },
 bindType: function(){
  this.setData({
    screenType: '1'
  })
 }
 })</view>

5、我們熟悉的ajax請求，在小程序里，它不叫ajax，而叫做wx.request。用法和ajax沒什么區別，唯一需要特別注意的是，請求必須是https請求！而不是平常的http請求！除了必須要是https請求以外，還需要到小程序的后台里設置合法域名，否則無法請求。

6、data里面的數據類型只有這5種（字符串，數字，布爾值，對象，數組）。

7、setData函數用於將數據從邏輯層發送到視圖層，同時改變對應的this.data的值。

8、在Page()函數內部this的作用域。。。

　　this代表着當前對象,隨着程序的執行，當前對象已不存在時，需要。

　  （總之，在使用this.data來獲取數據獲取不到時，var一下[var that=this;]//把this對象復制到臨時變量that）（或者使用另外一種聲明方式）

success: res =>{
  this.setData({
      loadingHidden: true,
      hideCommitSuccessToast: false
  })
}

9、根目錄的app.js 文件我們可以通過getApp()輕松調用。

//app.js
App({
  globaData:'huangenai'
 })

//test.js
var app = getApp();
Page({
 onLoad: function () {
 console.log(app.globaData);
 } 
})

10、微信小程序引用公共js里的方法的實例詳解。

　　在根目錄下有個utils文件夾(沒有的話新建)，里面util.js（沒有的話新建）在這里我們可以將通用的方法寫在這。

　　

util.js
 
//正則判斷
function Regular(str, reg) {
 if (reg.test(str))
  return true;
 return false;
}
 
//是否為中文
function IsChinese(str) {
 var reg = /^[\u0391-\uFFE5]+$/;
 return Regular(str, reg);
}
//去左右空格;
function trim(s){
  return s.replace(/(^\s*)|(\s*$)/g, "");
}
 
//最下面一定要加上你自定義的方法（作用：將模塊接口暴露出來），否則會報錯：util.trim is not a function;
module.exports = {
IsChinese: IsChinese,
trim: trim
}

　　

//test.js
 
var util = require('../../utils/util.js');
Page({
  onLoad: function () {
  console.log("判斷是否為中文:"+util.IsChinese('測試'));
  console.log("去除左右空格：" + util.trim(s));
  }
})