微信小程序學習筆記


一、文件結構解析

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

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

app.js文件:  全局js配置文件,這里定義的變量為全局變量,可在頁面內通過 getApp() 獲取

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

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

 

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

在小程序中,一般使用iPhone6的設計稿,iPhone6下 1px = 1rpx = 0.5pt

使用rpx,小程序會自動在不同的分辨率下進行轉換,簡單理解為我們適配屏幕的rem

pt 也稱為邏輯分辨率,pt的大小和屏幕尺寸有關系,簡單可以理解為長度和視覺單位

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

一個pt 可以由1個px構成,也可以是2個、3個。這個就是移動設備屏幕上的Reader倍數關系,如iPhone6、iPhone5的 @2x ; iPhone6 Plus的 @3x

iPhone6 上的一個pt就由2個px點構成,我們的設計稿一般是以px值進行設計

 

三、關於報錯問題解析

 

解決:對應js文件內部不能為空白文檔,必須添加 Page ({ })

 

四、小程序的頁面標簽

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

<view></view>    類似於div標簽,表示一個容器

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

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

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

 

 

 

 

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

請求回來的數據,使用 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)
  },
})

 

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

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

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

 

 

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

使用<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>

 

 

 

 

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

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

bind事件綁定不會阻止冒泡事件向上冒泡,catch事件綁定可以阻止冒泡事件向上冒泡。

如點擊事件: bind:tap

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

 

獲取點擊對象:

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

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

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

跳轉后可以返回:
 
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,
    })
  },

 

 

十、關於小程序的模板 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;
}

 

 

 十一、關於小程序的設置緩存

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

同步方法設置或修改: key表示緩存變量名,string/object表示緩存的內容,可以是 string/object 中的一種類型

wx.setStorageSync(key, string/object)

 

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

const value = wx.getStorageSync(key)

 

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

  wx.removeStorageSync(key)

 

同步方法刪除所有緩存:

wx.clearStorageSync()

 

  

 

 

 

 

 

 

 

 

 

 

 

 

swiper


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com