微信小程序學習筆記
一、文件結構解析
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 指的是事件觸發的對象
九、關於小程序事件中的頁面跳轉
跳轉后不能返回：
go: function(){ // wx.navigateTo({ // url: '../post/post', // }) wx.redirectTo({ url: '../post/post', }) },
wx.navigateTo({ url: '', // 跳轉路勁 success: function() {}, // 跳轉成功執行方法 fail: function() {}, // 跳轉失敗執行方法 complete: function() {} // 無論成功與否都執行的方法 })
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; }
在需要使用模板的頁面引入該模板：
<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>
@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
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。