做微信小程式專案時積累的知識
1. 如何根據文字,圖片內容定義背景顏色的寬度 ,只需要在他們的外面包一層 行內塊級元素就可以了 display:inline-block
2. 複製微信好的時候,api會有一個預設彈出的提示“內容已複製”,想要修改顯示內容
//複製微訊號碼 handlerAddFriend(e){ console.log(e) wx.setClipboardData({ data:e.currentTarget.dataset.wechat,/*這裡輸入你需要使用者被複制的內容*/ success:function(res){ wx.showToast({ title:'微訊號複製成功', }) wx.getClipboardData({//這個api是把拿到的資料放到電腦系統中的 success:function(res){ console.log(res.data)//data } }) } }) },
3.阻止Picker元件的bindchange事件 可以通過disabled控制 通過有沒有資料來藉助disabled來實現效果
4.文字標籤過長,但是又不知道文字具體長度,想要以三個點省略
overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; word-break:break-all;
5.關於web-view元件的使用(這個元件的作用是引入外部網路路徑的頁面), 首先單獨定義一個頁面存放web-view元件 ,src屬性中存放路徑,然後在其他頁面想要進來的地方定義方法跳轉,首次如果不成功,關閉開發工具重啟就可以了
6.在使用flex佈局的時候,讓文字和圖片顯示在一行內,有時文字過長可能會造成圖片被擠壓
flex-grow:0;//擴張為0
flex-shrink:0;//收縮為0
7.穿插一個datalist標籤的使用(html5標籤)
<input type="type" name="className" id="className" value="" list="classes"/> <datalist id="classes"> <option value ="計算機"></option> <option value ="計算機資訊管理"></option> <option value ="語文"></option> <option value ="漢語言文化"></option> </datalist> //datalist是html5中的標籤,他必須與input一起使用,input中的list屬性結果與datalist中的id屬性結果一樣,他與select標籤的不同是他不僅可以選擇,而且還可以根據使用者輸入的文字進行模糊查詢顯示 <select name="groups"> <option value="1">武術社團</option> <option value="2">舞蹈社團</option> </select>
8. catchtouchmove="true"加在自定義模態框的最外層,就可以禁止滾動模態框的時候,背景頁面也滾動的效果.但是他在模擬器中顯示不出來,可以在手機上預覽
9.padding和border使用時,如果不想讓他影響到width和height的值,需要用box-sizing:border-box實現怪異盒模型
10.設計美感 外邊圖形的圓角60px -外邊圖形的圓角40px =兩者之間的邊距20px
<view class="outer"> <view class="wrap"> <view class="inner"></view> </view> </view>
.outer{ width: 300px; height: 300px; background-color: cadetblue; border-radius: 60px; } .wrap{ padding: 20px; } .inner{ width: calc(300px - 40px); box-sizing: border-box; background-color: coral; height:calc(300px - 40px) ; border-radius: 40px; }
11.判斷使用者是否在資料庫中被刪除,可以在app.js中的onLaunch中進行介面的判斷,因為在小程式初始化的時候會執行他,
12.wx.navigateTo 和wx.navigateBack 的使用
wx.navigateTo在跳轉到其他頁面的時候,會保留本頁面,
wx.navigateBack可以通過getCurrentPages()獲取當前頁面棧(是個陣列),可以通過頁面棧的下標 (頁面棧.length-數字) ,獲取到其他頁面棧,進而通過 頁面棧.setData({}) 修改其他頁面棧的值