微信小程序學習筆記

1、文件結構解析

pages文件夾： 書寫各個頁面代碼以及組件。內部js文件書寫js ;  wxml文件爲HTML ;   wxss文件爲css樣式 ； json文件爲配置當前頁面的默認項，如title等

utils文件夾：  書寫做用在全局的js共用方法等

app.js文件：  全局js配置文件，這裏定義的變量爲全局變量，可在頁面內經過 getApp() 獲取

app.json文件：  全局默認配置項，如路由、小程序的狀態欄、導航條、標題、窗口背景色。

app.wxss文件： 全局css樣式文件

 

2、簡單談談移動設備的分辨率與rpx

在小程序中，通常使用iPhone6的設計稿，iPhone6下 1px = 1rpx = 0.5pt

使用rpx，小程序會自動在不一樣的分辨率下進行轉換，簡單理解爲咱們適配屏幕的rem

pt 也稱爲邏輯分辨率，pt的大小和屏幕尺寸有關係，簡單能夠理解爲長度和視覺單位

px 指物理分辨率，和屏幕尺寸沒有關係，表示一個點

一個pt 能夠由1個px構成，也能夠是2個、3個。這個就是移動設備屏幕上的Reader倍數關係，如iPhone六、iPhone5的 @2x ; iPhone6 Plus的 @3x

iPhone6 上的一個pt就由2個px點構成，咱們的設計稿通常是以px值進行設計

 

3、關於報錯問題解析

 

解決：對應js文件內部不能爲空白文檔，必須添加 Page ({ })

 

4、小程序的頁面標籤

標籤中的自定義屬性必須以 data- 開頭

<view></view>    相似於div標籤，表示一個容器

<image src='/'><image>   相似於 <img> 標籤，表示一張圖片   /表示根目錄   不指定寬高的狀況下默認寬度300px、高度225px

<text></text>    相似於<span></span>標籤，表示行內文本    只有被該標籤包圍的文本才能被長按選中    text標籤能夠嵌套text標籤   會直接解析轉義字符

<swiper><swiper>   圖片輪播    樣式和屬性做用在 swiper標籤上

 

 

 

 

 5、關於小程序的數據賦值

請求回來的數據，使用 this.setData() 方法，傳入須要賦值到data數據的變量

 小程序老是會讀取data對象裏的數據來進行頁面的數據綁定，這個動做是在onLoad事件以後執行的

var data = '獲取到的數據'

this.setData(data)

 

若是獲取到的數據是一個數組，那麼須要傳入一個對象

this.setData({ local_key: data});    // 這樣在data裏面就至關於有一個數組local_key

 

 另外一種賦值方式：在onLoad事件之中

this.data.變量名 = 獲取到的數據

  定義在app.js中的變量爲全局變量，經過getApp() 獲取

 

const golbalData = getApp()

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    isPlayMusic:true
  },

  like:function() {
    console.log(golbalData.isPlay)
  },
})

 

6、關於小程序的顯示隱藏  

  wx:if = ‘值’   相似於vue中的 v-if

 <image src='/images/b.jpg' wx:if="true"></image>

 

 

7、關於小程序的循環輸出

使用<block></block>標籤將循環的內容包裹

wx:for = '{{ 循環數組 }}'   wx:for-item = '循環的值'   wx:key = 'key值'   wx:for-index = '下標'

 循環的值默認是 item , 這裏的 wx:for-item也能夠省略不寫，  wx:for-index 默認是 index

 

 var local_key = [1,2,3,4,5,6,7]

<block wx:for="{{local_key}}" wx:for-item="item" wx:key="unique">
    <view  class='list'>
      {{item}}
    </view>
</block>

 

 

 

 

8、關於小程序的事件綁定

須要在各個事件類型的前面加上  bind 或 catch

bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定能夠阻止冒泡事件向上冒泡。

如點擊事件： bind：tap

<text class='gofont' bind:tap="go">開啓小程序之旅</text>

 

獲取點擊對象：

event.currentTarget   指的是事件捕獲的組件對象  （即定義了方法的對象）

 event.target            指的是事件觸發的對象

9、關於小程序事件中的頁面跳轉

跳轉後能夠返回：

 

wx.navigateTo({

url: '跳轉頁面相對路徑',

})

 

跳轉後不能返回：

wx.redirectTo({

url: ' 跳轉頁面相對路徑 ',

})

 

 

跳轉到有tab切換的頁面：

 

wx.switchTab({

url: '../post/post',

})

 

 

 

 go: function(){
    // wx.navigateTo({
    //   url: '../post/post',
    // })

    wx.redirectTo({
      url: '../post/post',
    })
  },

 

兩種跳轉的完整寫法：

 

    wx.navigateTo({
      url: '',                             // 跳轉路勁
      success: function() {},    // 跳轉成功執行方法
      fail: function() {},           // 跳轉失敗執行方法
      complete: function() {}   // 不管成功與否都執行的方法
    })

 

帶參數的方式：直接在url路徑後面進行拼接 帶過去的參數可經過生命週期 onLoad 方法進行獲取

  goDetail:function(event){
    const id = event.currentTarget.dataset.postid

    wx.navigateTo({
      url: '../detail/detail?id='+id,
    })
  },

 

 

10、關於小程序的模板 template 

相似於vue的模塊化，區別在於不可以在模板中定義Js

須要依次定義和引入wxml文件和wxss文件, 注意引入標籤後面的結尾 / 必須加上

定義一個模板：

wxml文件：使用 <template name="模板名字"> </template>

<template name="postItem">
   <view  class='list'>
      <image src='/images/1.png' class='top-img'></image>
      <text class='name'>{{item.title}}</text> 
   </view>
</template>

wxss文件：

/* 文章列表 */
.list {
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  background-color: white;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
  padding: 10rpx 20rpx;
}

 

在須要使用模板的頁面引入該模板：

 

wxml文件中引入模板的wxml文件：使用 <import src="絕對路徑/相對路徑" />

使用模板位置使用 　　　　　　　　 <template is="模板的名字" data="傳遞的數據" /> 傳遞的值若是是默認的 item, 能夠簡寫爲 data = {{... item}} 則模板裏面能夠直接使用變量名，不須要 item . 變量名

 

<import src="/template/post/post-item-template" />
<view>
  <swiper indicator-dots="true" autoplay="true" interval="5000">
    <swiper-item>
      <image src='/images/a.jpg'></image>
    </swiper-item>
    <swiper-item>
       <image src='/images/b.jpg'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/c.jpg'></image>
    </swiper-item>
  </swiper>
  <!-- 文章列表 -->
  <block wx:for="{{local_key}}" wx:for-item="item" wx:key="unique">
    <template is="postItem" data="{{item}}"/>
  </block>
    
</view>

 

wxss文件中引入模板的wxss文件：使用 @import '相對路徑/絕對路徑'

 

 

@import '/template/post/post-item-template';

swiper {
  width: 100%;
  height: 500rpx;
}

swiper image{
  width: 100%;
  height: 500rpx;
}

 

 

 11、關於小程序的設置緩存

小程序的緩存最多不能超過7M

同步方法設置或修改：　key表示緩存變量名，string/object表示緩存的內容，能夠是 string/object 中的一種類型

wx.setStorageSync(key, string/object)

 

同步方法獲取緩存：key表示緩存變量名,獲取後賦值給變量

const value = wx.getStorageSync(key)

 

同步方法刪除指定緩存：key表示緩存變量名

  wx.removeStorageSync(key)

 

同步方法刪除全部緩存：

wx.clearStorageSync()

 

  

 

 

 

 

 

 

 

 

 

 

 

 

swiper