banner.jpg

1. WXML 要求標(biāo)簽必須是嚴(yán)格閉合的，沒有閉合將會導(dǎo)致編譯錯誤齐婴。

2. 屬性值也可以動態(tài)的去改變鲫售，有所不同的是阱州，屬性值必須被包裹在雙引號中

<!—正確的寫法—>

<text data-test="{{test}}"> hello world</text>

<!—錯誤的寫法 —>

<text data-test={{test}}> hello world </text >

3. WXML 中姻灶，使用wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊

<view wx:if="{{length > 5}}"> 1 </view>

<view wx:elif="{{length > 2}}"> 2 </view>

<view wx:else> 3 </view>

4. 關(guān)于 .json文件

40A25BF2-10DE-4EBA-B491-69503C5A8780.png

5.樣式

title:{
  overflow:hidden; /*自動隱藏文字*/

  text-overflow:ellipsis; /*文字隱藏后添加省略號*/

  white-space: nowrap; /**強(qiáng)制不換行*/
}

6．頁面跳轉(zhuǎn)動態(tài)修改導(dǎo)航欄標(biāo)題和頁面?zhèn)鲄栴}

動態(tài)修改導(dǎo)航欄標(biāo)題敛腌，假如從A頁面跳轉(zhuǎn)到B頁面媳谁，B頁面的導(dǎo)航欄標(biāo)題需要從A頁面帶過去系羞。
頁面A:

<view class="messageItem" 
bindtap="bindMessageDetail"
 data-passparam="{{item.title}}">
</view>

在設(shè)置bindtap的時候設(shè)置一個data-passparam;其中data-前綴是固定的夹供，后面passparam是你要傳遞的參數(shù)各吨，名字隨便，但是不能出現(xiàn)大寫字母袁铐，不然值傳不過去揭蜒。
在點(diǎn)擊跳轉(zhuǎn)方法中

bindMessageDetail:function(e){
    vartitle = e.currentTarget.dataset.passparam;
    wx.navigateTo({
      url: "chat/chat?name="+title,
    });
  },

通過e.currentTarget.dataset.passparam獲取剛才需要傳遞的參數(shù)，然后拼接到url后值就傳遞過去了剔桨。

在B頁面屉更，如果需要獲取傳遞過來的值，需要在生命周期方法onLoad方法中獲取

onLoad: function(options) {
    let name= options.name;
  },

洒缀，但是如果是需要給導(dǎo)航欄設(shè)置title,官方建議在

onReady: function() { },

方法中進(jìn)行設(shè)置瑰谜。所以如果是動態(tài)設(shè)置導(dǎo)航欄標(biāo)題則在onLoad方法先獲取傳遞過來的參數(shù)保存起來，然后在onReady方法里進(jìn)行設(shè)置树绩。

Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
navTitle:''
  },
/**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function(options) {
    this.data.navTitle = options.name;
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function() {
    wx.setNavigationBarTitle({
      title: this.data.navTitle    // 其他頁面?zhèn)鬟^來的標(biāo)題名
    })
  },

7.列表渲染

1.在組件上使用wx:for 控制屬性綁定一個數(shù)組萨脑，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為index饺饭，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為item

<view wx:for="{{array}}">   {{index}}: {{item.message}} </view>

2.使用wx:for-item 指定數(shù)組當(dāng)前元素的變量名渤早，使用wx:for-index 指定數(shù)組當(dāng)前下標(biāo)的變量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">   {{idx}}: {{itemName.message}} </view>

3.類似 block wx:if ，也可以將 wx:for 用在 <block/> 標(biāo)簽上瘫俊，以渲染一個包含多節(jié)點(diǎn)的結(jié)構(gòu)塊鹊杖。

<block wx:for="{{[1, 2, 3]}}">   <view> {{index}}: </view>   <view> {{item}} </view> </block>

8.Toast使用和Modal的使用

1. Toast使用方式一：（不推薦）

在.wxml文件中定義組件

<toasthidden="{{!isShowToast}}"stytle="display:flex  width:100rpx"duration="1000"bindchange="toastChange">請稍后重試</toast>

在js文件data中定義一個變量isShowToast用于控制是否顯示Toast,在js文件需要顯示Toast的地方

bindTapSearch:function(){
this.setData({isShowToast:true})
}

同時需要實(shí)現(xiàn)toastChange方法，不然Toast不會消失

toastChange:function(){
   this.setData({ isShowToast: false })
 },

2.Toast使用方式二：（推薦）
直接調(diào)用API控制Toast的顯示和隱藏

• 顯示Toast（顯示完Toast后過了duration時間會自動隱藏）

wx.showToast({ 
      title: '已發(fā)送',
      icon: 'none',  //此處（有success扛芽、loading骂蓖、none三種樣式可選）
      duration: 1500
})；

• 隱藏Toast

wx.hideToast()川尖；

3.Modal的使用方式一

//官方Modal(使用方式和Toast的方式一一樣)
  wx.showModal({
      title: '標(biāo)題',
      content: '告知當(dāng)前狀態(tài)登下，信息和解決方法',
      confirmText: '主操作',
      cancelText: '次要操作',
      success: function(res) {
        if(res.confirm) {
          console.log('用戶點(diǎn)擊主操作')
        } elseif(res.cancel) {
          console.log('用戶點(diǎn)擊次要操作')
        }
      }
})

Modal方式一

4.Modal的使用方式二

<modal hidden="{{hidden}}" title="這里是title"
 confirm-text="自定義確定按鈕" 
cancel-text="自定義取消按鈕" 
bindcancel="cancel" 
bindconfirm="confirm" 
no-cancel="{{nocancel}}">   
  內(nèi)容 
</modal>
//no-cancel：是否隱藏cancel按鈕

Modal方式二

5. 自定義Modal

參見：https://blog.csdn.net/solocoder/article/details/80696752

注意：官方已有組件<modal/>,所以自定義Modal的時候不能取名為modal,不然調(diào)用的會是系統(tǒng)的modal

9.小程序中的slot（插槽）

有時候在自定義組件時，有一部分在某處是不需要顯示的空厌，而其他地方需要顯示庐船，這時候，可以用slot來控制隱藏的部分嘲更；
slot 標(biāo)簽可用在自定義組件中筐钟，根據(jù)外部傳進(jìn)來的標(biāo)簽篓冲，來顯示和隱藏 如果需要顯示就傳遞標(biāo)簽進(jìn)來诽俯，如果不需要顯示仙粱，就不傳伐割，這樣，可以動態(tài)的設(shè)置自定義組件的樣式，提高了組件的復(fù)用性

自定義組件耐床，添加插槽堪嫂，插槽的name一定要設(shè)置，使用時name要相同
 <view class='container'>  
 <text>{{text}}</text>   
<!-- slot 插槽 -->  
 <slot name="after"></slot> 
</view>
使用組件怜森，組件名為<m-tag/>恐疲，name 要和添加時候一直（after）  <m-tag text="{{item.content}}">     <text slot="after">{{item.nums}}</text>  </m-tag> 里面的<text>標(biāo)簽就是傳遞給插槽的，
注意：最重要的是激活插槽，在自定義組件的JS中，添加一下代碼/**    * 啟用插槽    */   options:{     multipleSlots: true   }

在組件的wxml中可以包含 slot 節(jié)點(diǎn)紊册，用于承載組件使用者提供的wxml結(jié)構(gòu)撞反。
默認(rèn)情況下，一個組件的wxml中只能有一個slot。需要使用多slot時，可以在組件js中聲明啟用。

A.js
Component({  
 options: {    
 multipleSlots: true // 在組件定義時的選項(xiàng)中啟用多slot支持 
 },  
 properties: { /* ... */ },   methods: { /* ... */ } })

10.事件分類

事件分為冒泡事件和非冒泡事件：

1. 冒泡事件：當(dāng)一個組件上的事件被觸發(fā)后，該事件會向父節(jié)點(diǎn)傳遞。
2. 非冒泡事件：當(dāng)一個組件上的事件被觸發(fā)后设联，該事件不會向父節(jié)點(diǎn)傳遞艘包。事件綁定的寫法同組件的屬性，以key淌友、value的形式瑰抵。

· key以bind或catch開頭，然后跟上事件的類型，如bindtap授瘦、catchtouchstart丘侠。自基礎(chǔ)庫版本 1.5.0 起打肝，在非原生組件中，bind和catch后可以緊跟一個冒號楼吃，其含義不變亥贸，如bind:tap朴摊、catch:touchstart。
· value 是一個字符串韭寸，需要在對應(yīng)的Page 中定義同名的函數(shù)莫其。不然當(dāng)觸發(fā)事件的時候會報錯仪壮。

bind事件綁定不會阻止冒泡事件向上冒泡缚陷，catch事件綁定可以阻止冒泡事件向上冒泡硫痰。
如在下邊這個例子中窜护，點(diǎn)擊inner view 會先后調(diào)用handleTap3和handleTap2(因?yàn)閠ap事件會冒泡到middle view效斑，而middle view 阻止了tap 事件冒泡，不再向父節(jié)點(diǎn)傳遞)柱徙，點(diǎn)擊middle view 會觸發(fā)handleTap2缓屠，點(diǎn)擊outer view 會觸發(fā)handleTap1。

<view id="outer"bindtap="handleTap1">  
 outer view 
 <view id="middle"catchtap="handleTap2">   
  middle view   
 <view id="inner"bindtap="handleTap3">     
  inner view   
 </view>  
 </view>
 </view> 

組件間通信與事件(https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html)

自定義組件觸發(fā)事件時护侮，需要使用 triggerEvent 方法敌完，指定事件名、detail對象和事件選項(xiàng)

<!-- 在自定義組件中--> 

<button bindtap="onTap">點(diǎn)擊這個按鈕將觸發(fā)“myevent”事件</button> 

Component({  
 properties: {},   
methods: {   
  onTap: function(){     
  varmyEventDetail ={} // detail對象概行，提供給事件監(jiān)聽函數(shù)    
  varmyEventOption ={} // 觸發(fā)事件的選項(xiàng)     
  this.triggerEvent('myevent', myEventDetail, myEventOption)     }   } })

具體使用參見自定義modal文章對cancel和comfirm事件的處理（https://blog.csdn.net/solocoder/article/details/80696752）

11.如果當(dāng)前處于登錄界面（看不到tab），當(dāng)用戶登錄成功后才能進(jìn)入有tabBar的主頁面,使用方法

wx.switchTab({
   url:'/pages/home/index/index'
});

此處url需要使用絕對路徑
相對路徑：../../此類
絕對路徑：類似’/page/’形式弧岳，絕對路徑以“/”開頭凳忙，表示根目錄

12业踏；微信小程序App()方法與getApp()方法

App()注冊一個小程序，小程序的入口方法

App({
 onLaunch: function(options) {
   console.log("onLaunch");
  },
 onShow: function(options) {
     console.log("onShow");
     // Do something when show.
  },
 onHide: function() {
     console.log("onHide");
     // Do something when hide.
  },
 onError: function(msg) {
     console.log(msg)
  },
 test:function() {
   console.log("I am func from App.js");
  },
 globalData: {
   userInfo:null,
   helloFromApp:'Hello,I am From App.js'
  }
})

在其他子頁面如何使用test方法呢涧卵？
通過getApp獲取全局對象勤家，然后進(jìn)行全局變量和全局方法的使用。

var app = getApp();
console.log(app.globalData.helloFromApp); // 調(diào)用全局變量

app.test(); // 調(diào)用全局方法

注意：
· App() 必須在 app.js 中注冊柳恐，且不能注冊多個伐脖。
· 不要在定義于 App() 內(nèi)的函數(shù)中調(diào)用 getApp() ，使用 this 就可以拿到app 實(shí)例乐设。
· 不要在onLaunch 的時候調(diào)用 getCurrentPages()讼庇，此時page 還沒有生成

13: 關(guān)于：before ::before 和:after ::after的使用

::before用法：view::before，表示在該view組件的前面加入內(nèi)容 ::after用法：view::after近尚，表示在該view組件的后面加入內(nèi)容 這里是雙冒號蠕啄，不是單冒號。單冒號是CSS2的內(nèi)容戈锻，雙冒號是CSS3的內(nèi)容歼跟。當(dāng)然微信小程序也是兼容CSS2的寫法的
用法

          wxml
               <view class="container">
                <view class="price">{{price}}</view>
                </view>
         wxss
          .container {
                 width: auto;
                 margin: 30rpx;
                 background-color: #fff;
                 text-align: center;
                 }
                .price {
                position: relative;
                display: inline-block;
                font-size: 78rpx;
                color: red;
                }
            .price::before {
                content: "金額：￥";
               position: absolute;
               font-size: 40rpx;
               top: 30rpx;
               left: -160rpx;
               color: black;
            }
           .price::after {
               content: ".00 元";
               font-size: 30rpx;
               top: 40rpx;
               position: absolute;
               right: -90rpx;
               color: black;
               }
       js
           Page({
              onLoad: function() {
              this.setData({
              price: 100
               })
           })
       })

Snip20200325_3.png

14.tips:

如果在app.wxss文件里有樣式.styleA{…},那么這個樣式A就是一個全局的樣式，在其他頁面B的wxss樣式里格遭，如果有同名的樣式styleA哈街，那么在B的樣式里會擁有app.wxss文件樣式styleA的全部設(shè)置。需要注意拒迅。

15.修改一個頁面默認(rèn)背景顏色

直接在該頁面的page.wxss文件里設(shè)置page{background-color:red;}骚秦，

.banner_container{
width:10vw;
height:230vw;
background-color:#13b5f5
}
page{background-color:red}

16.padding ****就是內(nèi)邊距

padding: 5px; 帶一個參數(shù)，表示上下左右都是5px距離
padding: 5px 0; 帶兩個參數(shù)坪它，表示什么呢骤竹？表示上下都是5px，左右都是0px往毡，就是這里容易出錯蒙揣，切記切記！
padding: 5px 4px 3px 2px; 帶四個參數(shù)开瞭，表示上5px懒震，右4px，下3px嗤详，左2px

17.text文本中使用空格符

必須設(shè)置屬性decode="{{true}}"个扰，然后在需要使用的地方加?

<text class="applyTime" decode="{{true}}">{{'申請時間&nbsp;'+item.applyTime}}</text>

18:設(shè)置一個橢圓形按鈕

自帶的button設(shè)置高度一般的圓角顯示會有問題，設(shè)置view可以解決想要一個橢圓形按鈕的問題

.rejectBtn{
   display: flex;
   border: 0.2rpx solid #e4e4e4;
   width: 150rpx;
   height: 64rpx;
   line-height: 32px;
   border-radius: 32px;
   text-align: center;
   justify-content: center;
   align-items: center;
   font-size: 29rpx;
   margin-right: 21rpx;
   color: #666666;
}

19.需求：當(dāng)用戶名和密碼都輸入的情況下登錄按鈕才顯示可點(diǎn)擊葱色，不然是灰色的

<viewclass="login-button {{mobileNum===''||password===''?'':'active-button'}}"catch:tap="login">
        登錄
 </view>

20.關(guān)于js中的擴(kuò)展運(yùn)算符… 的使用

作用：將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列

1. 函數(shù)調(diào)用

l   function add(x, y) {
    return x + y;
   }
   var numbers = [4, 38];
   add(...numbers) // 42

2.通過push函數(shù)递宅，將一個數(shù)組添加到另一個數(shù)組的尾部

   var arr1 = [0, 1, 2];
   var arr2 = [3, 4, 5];
   arr1.push(...arr2);

3.合并數(shù)組

var moreArr = [‘3’];
ES5寫法：[‘1’,‘2’].concat(moreArr)
ES6寫法：[‘1’,‘2’,...moreArr];

4.擴(kuò)展運(yùn)算符將字符串轉(zhuǎn)為真正的數(shù)組

    [...'hello'] => [“h”,”e”,”l”,”l”,”o”]

21.路由

1.wx.switchTab(Object object): 跳轉(zhuǎn)到tabBar 頁面，并關(guān)閉其他所有非tabBar 頁面
url：需要跳轉(zhuǎn)的tabBar 頁面的路徑（需在app.json 的 tabBar 字段定義的頁面），路徑后不能帶參數(shù)办龄。
success : function 接口調(diào)用成功的回調(diào)函數(shù)
fail : function 接口調(diào)用失敗的回調(diào)函數(shù)
complete : function 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功烘绽、失敗都會執(zhí)行）

2wx.reLaunch(Object object) : 關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個頁面
url:需要跳轉(zhuǎn)的應(yīng)用內(nèi)頁面路徑俐填，路徑后可以帶參數(shù)安接。參數(shù)與路徑之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連英融，不同參數(shù)用&分隔盏檐；如'path?key=value&key2=value2
success : function 接口調(diào)用成功的回調(diào)函數(shù)
fail : function 接口調(diào)用失敗的回調(diào)函數(shù)
complete : function 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

3.wx.redirectTo(Object object):關(guān)閉當(dāng)前頁面驶悟，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面胡野。但是不允許跳轉(zhuǎn)到tabbar 頁面
url:同2
success : function 接口調(diào)用成功的回調(diào)函數(shù)
fail : function 接口調(diào)用失敗的回調(diào)函數(shù)
complete : function 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

4.wx.navigateTo(Object object) ：保留當(dāng)前頁面撩银，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面给涕。但是不能跳到tabbar 頁面。使用 wx.navigateBack 可以返回到原頁面额获。小程序中頁面棧最多十層够庙。
url:同2
success : function 接口調(diào)用成功的回調(diào)函數(shù)
fail : function 接口調(diào)用失敗的回調(diào)函數(shù)
complete : function 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

5.wx.navigateBack(Object object) ：關(guān)閉當(dāng)前頁面抄邀，返回上一頁面或多級頁面耘眨。可通過 getCurrentPages 獲取當(dāng)前的頁面棧境肾，決定需要返回幾層剔难。

參數(shù)

delta ：number ，返回的頁面數(shù)奥喻，如果delta 大于現(xiàn)有頁面數(shù)偶宫，則返回到首頁。
success : function 接口調(diào)用成功的回調(diào)函數(shù)
fail : function 接口調(diào)用失敗的回調(diào)函數(shù)
complete : function 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功环鲤、失敗都會執(zhí)行）

eg:

wx.navigateBack({   delta: 2})

Note:getCurrentPages()

獲取當(dāng)前頁面棧纯趋。數(shù)組中第一個元素為首頁，最后一個元素為當(dāng)前頁面冷离。
· 不要嘗試修改頁面棧吵冒，會導(dǎo)致路由以及頁面狀態(tài)錯誤。
不要在 App.onLaunch 的時候調(diào)用 getCurrentPages()西剥，此時 page 還沒有生成痹栖。
let pages = getCurrentPages(); //當(dāng)前頁面棧集合
使用場景：

1. 獲取當(dāng)前頁面相關(guān)信息

l 獲取方式一

let pages = getCurrentPages();
let cutentPage = pages[pages.length - 1];

l 獲取方式二
注：pop()方法用于刪除并返回數(shù)組的最后一個元素

let pages = getCurrentPages();
let cutentPage = pages.pop();

2.跨頁面賦值

let pages = getCurrentPages();
let prevPage = pages[pages.length - 2]; //上個頁面
prevPage.setData({
//直接給上個頁面賦值
})

3.頁面跳轉(zhuǎn)后自動刷新

wx.switchTab({ 
        url: '../index/index', 
        success: function (e) { 
           var page = getCurrentPages().pop(); //當(dāng)前頁面
            if (page == undefined || page == null) return; 
           page.onLoad(); //或者其它操作
        } 
})

22.注意點(diǎn)：

1.<block/>****并不是一個組件，它僅僅是一個包裝元素瞭空，不會在頁面中做任何渲染揪阿，只接受控制屬性疗我。
2.wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此南捂，如果需要頻繁切換的情景下碍粥，用 hidden 更好，如果在運(yùn)行時條件不大可能改變則 wx:if 較好黑毅。

2. 有時，組件希望接受外部傳入的樣式類钦讳。此時可以在 Component 中用 externalClasses 定義段定義若干個外部樣式類矿瘦。

/* 組件custom-component.js */
 Component({  
 externalClasses: ['my-class'] 
})

<!-- 頁面的WXML -->
 <custom-component my-class="red-text"/>
 <custom-component my-class="large-text"/>
 <!-- 以下寫法需要基礎(chǔ)庫版本2.7.1 以上--> 
<custom-component my-class="red-text large-text"/>

3. flex布局

flex-shrink屬性
當(dāng)項(xiàng)目在主軸方向上溢出時，通過設(shè)置項(xiàng)目收縮因子來壓縮項(xiàng)目適應(yīng)容器愿卒。屬性值為項(xiàng)目的收縮因子缚去，屬性值取非負(fù)數(shù)，默認(rèn)1
flex-grow屬性
當(dāng)項(xiàng)目在主軸方向上還有剩余空間時琼开，通過設(shè)置項(xiàng)目擴(kuò)張因子進(jìn)行剩余空間的分配易结。屬性值為項(xiàng)目的擴(kuò)張因子，屬性值取非負(fù)數(shù)柜候。默認(rèn)0
align-self屬性
設(shè)置項(xiàng)目在行中交叉軸方向上的對齊方式搞动，用于覆蓋容器的align-items，這么做可以對項(xiàng)目的對齊方式做特殊處理渣刷。默認(rèn)屬性值為auto鹦肿，繼承容器的align-items值，當(dāng)容器沒有設(shè)置align-items時辅柴，屬性值為stretch箩溃。

23：模板（template）

WXML提供模板（template），可以在模板中定義代碼片段碌嘀，然后在不同的地方調(diào)用涣旨。

a.   定義模板
 <template name="msgItem"> 
  <view>    
 <text> {{index}}: {{msg}} </text>   
  <text> Time: {{time}} </text>   </view> 
</template>

b.   使用模板
使用is 屬性，聲明需要的使用的模板股冗，然后將模板所需要的data 傳入霹陡，
Page({  data: {   
  item: {   
   index: 0,   
   msg: 'this is a template',    
  time: '2016-09-15'   
 }   } })
<template is="msgItem"data="{{...item}}"/>
note: is 屬性可以使用Mustache 語法，來動態(tài)決定具體需要渲染哪個模板：
<template name="odd"> 
  <view> odd </view>
 </template> 
<template name="even"> 
  <view> even </view>
 </template>
  <block wx:for="{{[1, 2, 3, 4, 5]}}">  
 <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
 </block>

24.引用

WXML提供兩種文件引用方式import和include

1. import
   import可以在該文件中使用目標(biāo)文件定義的template魁瞪，如：

在item.wxml 中定義了一個叫item的template：

<template name="item"> 
  <text>{{text}}</text>
 </template> 

在index.wxml 中引用了item.wxml穆律，就可以使用item模板：

<import src="item.wxml"/>
<template is="item"data="{{text: 'forbar'}}"/>

注：import 的作用域

import 有作用域的概念，即只會import 目標(biāo)文件中定義的template导俘，而不會import 目標(biāo)文件import 的template峦耘。
如：C import B，B import A旅薄，在C中可以使用B定義的template辅髓，在B中可以使用A定義的template泣崩，但是C不能使用A定義的template。

2. include
   include 可以將目標(biāo)文件除了 <template/> <wxs/> 外的整個代碼引入洛口，相當(dāng)于是拷貝到 include 位置矫付，

25．關(guān)于WXS文件

wxs是專門用于wxml頁面的，主要在視圖層調(diào)用函數(shù)
wxs和js不能互相直接調(diào)用第焰，有的事情买优，用wxs和js都能實(shí)現(xiàn)，但是你會發(fā)現(xiàn)用wxs****更方便挺举、直接杀赢。
（鏈接：http://www.reibang.com/p/bb0892e07d6f）

26.獲取用戶信息

使用wx.getUserInfo 接口直接彈出授權(quán)框的開發(fā)方式將逐步不再支持。從2018年4月30日開始湘纵，小程序與小游戲的體驗(yàn)版脂崔、開發(fā)版調(diào)用wx.getUserInfo 接口，將無法彈出授權(quán)詢問框梧喷，默認(rèn)調(diào)用失敗砌左。正式版暫不受影響。開發(fā)者可使用以下方式獲取或展示用戶信息：
1铺敌、使用button 組件汇歹，并將open-type 指定為getUserInfo 類型，獲取用戶基本信息

<button open-type="getUserInfo"lang="zh_CN"bindgetuserinfo="onGotUserInfo">獲取用戶信息</button>

onGotUserInfo: function(e) { 

   console.log(e.detail.errMsg)  

   console.log(e.detail.userInfo)     

   console.log(e.detail.rawData) 

  },

2.使用open-data 展示用戶基本信息

 <view class="userinfo">
 <view class="userinfo-avatar">    
 <open-data  type="userAvatarUrl"></open-data>  
 </view>  
  <open-data type="userNickName"></open-data>
 </view>
.userinfo{   
  position:relative;  
   width:750rpx;   
  height:320rpx;   
  color:white;    
  display:flex;    
  flex-direction:column;     
  align-items:center; 
  background-color:gray
  }    
  .userinfo-avatar{  
  overflow:hidden;   
  display:block;   
   width:160rpx;  
   height:160rpx;   
   margin:20rpx;    
   margin-top:50rpx;    
   border-radius:50%;     
   border:2pxsolid#fff;     
 }

27.微信小程序自定義組件Component的使用

參見（https://blog.csdn.net/qq_17470165/article/details/81211923）必看

28.小程序中that和this用法

微信小程序中偿凭，在wx.request({});方法調(diào)用成功或者失敗之后秤朗，有時候會需要獲取頁面初始化數(shù)據(jù)data的情況，這個時候笔喉，如果使用取视，this.data來獲取，會出現(xiàn)獲取不到的情況常挚，調(diào)試頁面也會報undefiend作谭。原因是，在javascript中奄毡，this代表著當(dāng)前對象折欠，會隨著程序的執(zhí)行過程中的上下文改變，在wx.request({});方法的回調(diào)函數(shù)中吼过，對象已經(jīng)發(fā)生改變锐秦，所以已經(jīng)不是wx.request({});方法對象了，data屬性也不存在了盗忱。

官方的解決辦法是酱床，復(fù)制一份當(dāng)前的對象，如下：

1. 方式一：

var that=this;//把this對象復(fù)制到臨時變量that
在success回調(diào)函數(shù)中使用that.data就能獲取到數(shù)據(jù)了趟佃。
loadData: function() {  
wx.request({
var that=this;
 url: 'test.php',      
  data: {a: 'a', b: 'b'}, 
  header: { 'content-type': 'application/json'},  
  success(res) { 
 that.setData({ toastHidden: false}) },  
 }) } 

2. 方式二
   還有另外一種方式扇谣，也很特別昧捷，是將success回調(diào)函數(shù)換一種聲明方式，(使用箭頭函數(shù)) 如下：

loadData: function() {  
wx.request({
url: 'test.php',      
  data: {a: 'a', b: 'b'}, 
  header: { 'content-type': 'application/json'},  
  success：(res) => { 
 this.setData({ toastHidden: false}) },  
 }) } 

29．關(guān)于占位符${}的用法

1.占位符就如同一個普通字符串一樣罐寨，可以插入到字符串中的任意位置靡挥。
通常將兩個字符串拼接我們會使用+

例如

1.
letaddress="青島市南區(qū)";
letstr="螞蟻部落位于"+address+"，網(wǎng)址是www.softwhy.com"
如果使用${}可以的到相同的效果
letstr=`螞蟻部落位于${address}鸯绿，網(wǎng)址是www.softwhy.com`;

2.letfunc=(url)=>{
  returnurl;
}
letstr = `本站的url地址是${func("www.softwhy.com")}`;
console.log(str); 
結(jié)果：本站的url地址是[www.softwhy.com](http://www.softwhy.com/)

3．letarr = ["螞", "蟻", "部", "落"];

letstr = `${arr}`;
console.log(str);
結(jié)果：螞,蟻,部,落

注：占位符中是數(shù)組跋破，但是這個數(shù)組所處的上下文環(huán)境是字符串。
那么就隱身調(diào)用toString方法將其轉(zhuǎn)換為字符串瓶蝴。

30.async-await 的使用

Async - 定義異步函數(shù)(async function someName(){...})

• 自動把函數(shù)轉(zhuǎn)換為Promise
• 當(dāng)調(diào)用異步函數(shù)時幔烛，函數(shù)返回值會被resolve 處理
• 異步函數(shù)內(nèi)部可以使用await
  Await - 暫停異步函數(shù)的執(zhí)行(var result = await someAsyncCall();)
• 當(dāng)使用在Promise 前面時，await 等待Promise 完成囊蓝，并返回Promise 的結(jié)果
• await 只能和Promise 一起使用，不能和callback 一起使用
• await 只能用在async 函數(shù)中
  更多參加鏈接：http://www.reibang.com/p/e622dee9de99

eg:
 asyncgetPhoneNumber({ detail }) {
    if(detail.iv && detail.encryptedData) {
      this.setData({ loading: false, loginLoading: true});
      try{
        const{ result } = awaitwx.cloud.callFunction({
          name: 'index',
          data: {
            code: this.noPageData.code,
            iv: detail.iv,
            encryptedData: detail.encryptedData,
            secret: app.globalData.secret
          }
        });
        if(result.purePhoneNumber) {
        }
      } catch(error) {
      }
    } else{
    }
  },

31做一個左右可切換的功能

test.js
Page({
  data: {
      swiperTitles:['待分配','已分配'],
      swiperCurrent: 0,
      animationData: null
  },
    switchSwiper ({ detail }) {
        this.animationData(this, detail.current);    
    },
    changeSwiper (e) {
        this.animationData(this, e.currentTarget.dataset.current);
    },
    animationData (that, index) {
        constanimation = wx.createAnimation({
            duration: 400,
            timingFunction: 'linear'
        });
        animation.translateX(`${index * 100}%`).step();
       that.setData({
            animationData: animation.export(),
            swiperCurrent: index
        });
},})
test.wxml
<viewclass="orders">
    <viewclass="nav-tab-box">
        <viewclass="nav-tab">
<viewclass="nav-tab-text {{swiperCurrent===0&&'nav-tab-active'}}"data-current="0"catch:tap="changeSwiper">
              {{swiperTitles[0]}}
            </view>
            <viewclass="nav-tab-text {{swiperCurrent===1&&'nav-tab-active'}}"data-current="1"catch:tap="changeSwiper">
                {{swiperTitles[1]}}
            </view>
        </view>
        <viewclass="nav-tab-underline">
            <viewclass="border-line"animation="{{animationData}}"></view>
        </view>
    </view>
    <swiperclass="swiper-box"current="{{swiperCurrent}}"bind:change="switchSwiper">
        <swiper-item>
        </swiper-item>
        <swiper-item>
        </swiper-item>
    </swiper>
</view>  
text.wxss
.orders{
    height:100%;
    overflow-y:hidden;
    background-color:yellow
}
.nav-tab-box{
    height:88.88rpx;
    background-color:#ffffff;
}
.nav-tab{
    display:flex;
    flex-direction:row;
    align-items:center;
    height:85rpx;
    font-size:27.75rpx;
    color:#8badc8;
}
.nav-tab-text{
    text-align:center;
    flex-grow:1;
}
.nav-tab-underline{
    width:750rpx;
    height:4rpx;
}
.nav-tab-underline> .border-line{
    height:inherit;
    width:375rpx;
    background-color:#03a9f4;
}
.nav-tab-active{
    color:#03a9f4;
}
.swiper-box{
    height:100vh;
}

效果圖