微信小程式開發(技術篇)
技術篇,有些是我自己學的,有些是我們公司的全棧大神教的,還有些就是各種百度的。
會持續更新,每天寫一點。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2017/11/17
1、表單控制元件需要使用者填寫資訊,點選提交,當資訊為空時,頂部跳出提示,側邊出現警告圖示。
效果如下:程式碼如下: wxml 1、首先在頂部加入條件渲染的<view>元件,用的樣式是引入的weui的,渲染條件是showTopTips為true是顯示,顯示的內容是{{warn_text}}。
<view class="weui-toptips weui-toptips_warn"wx:if="{{showTopTips}}"> {{warn_text}}</view>
2、在<input>元件後插入需要條件渲染的警告圖示<icon>,外面用<view>套起來。樣式同樣是weui的,渲染條件是is_warn1為true。<view class="weui-cell__ft" style="display:inline-block;border:none;" wx:if="{{is_warn1}}">
<icon type="warn"size="23" color="#E64340"></icon>
</view>
頁面的js
3、在當前頁面的js的data里加入參與頁面渲染的資料,設定為false,初始狀態,頂部的提示框是不顯示的。
data: {
showTopTips: false
}
4、編寫提交按鈕的函式以及頂部提示框的函式 //點選提交按鈕呼叫的函式formSubmit: function (e){
var that = this
var idInfo = console.log(e); //格式化資料
if(e.detail.value.true_name.length == 0){ //判斷使用者是否填了內容
that.showTopTips('請輸入您的真實姓名'); //如果沒有填,則呼叫showTopTips函式,並傳遞引數“請輸入您的真實姓名”
that.setData({ is_warn1: true }) //同時,設定is_warn1的值為true,使警告圖示被渲染顯示
return false; //返回false阻止程式碼往下執行
} else { //如果使用者填了內容
that.setData({ is_warn1: false }) ; //則設定is_warn1的值為false,使警告圖示不被渲染顯示
var true_name = e.detail.value.true_name; } //同時申明變數true_name並賦值
//原理同上
if (e.detail.value.idcard.length == 0) {
that.showTopTips('請輸入您的身份證號碼');
that.setData({ is_warn2: true })
return false;
} else if (e.detail.value.idcard.length != 15 && e.detail.value.idcard.length != 18){ //這裡簡單判斷了下身份證位數,如果不是15位也不是18位,則輸入不正確
that.showTopTips('請輸入正確的身份證號碼');
that.setData({ is_warn2: true })
return false;
} else {
that.setData({ is_warn2: false })
var idcard = e.detail.value.idcard
}
},
//showTopTips函式,引數msg,上面寫了
showTopTips: function (msg) {
var that = this;
console.log(msg);
this.setData({
showTopTips: true, //當呼叫這個函式時,就把showTopTips渲染條件的值設定為true,使顯示頂部的紅色提示
warn_text: msg
});
setTimeout(function () { //設定了定時器,3秒後不顯示頂部的紅色提示框
that.setData({
showTopTips: false
});
}, 3000);
}
====================================================================================================================================2017/11/17
2、資料提交後儲存並顯示資料:比如使用者填寫了身份證號碼,提交退出頁面後,下次進能看到上次填的號碼
效果如下:這是再次進入頁面後顯示的使用wx.setStorageSync(KEY,DATA) API實現
wxml: <image class="id-bgimg1" mode="aspectFit" src="{{imagesrc2}}"></image> //綁定了image的src為{{imagesrc2}}頁面js檔案:
data: {
imagesrc2:"images/background.jpg" //先給圖片一個路徑,此為預設顯示的圖片,也可以為空
}
chooseImage2: function () { //可以隨便寫個button,綁上這個事件函式,這個函式寫完後,如果使用者選擇了他手機系統相簿的照片,
//那個照片就是替換掉原來我們預設的照片,但是下次進入頁面還是會顯示我們預設的照片
var that = this
wx.chooseImage({ //用微信的選擇圖片API,呼叫系統相簿和相機
success: function (res) { //如果呼叫系統相簿/相機成功
var tempFilePaths =res.tempFilePaths //申明一個變數,賦值為呼叫成功返回的結果裡圖片的臨時路徑
wx.uploadFile({ //下面這個是上傳圖片到伺服器的API
url: '後端給的介面',
filePath: tempFilePaths[0],
name: 'photo2',
success: function (res) {
console.log(res)
console.log("連線伺服器成功!")
},
fail: function () {
consolo.log("連線伺服器失敗!")
}
})
wx.saveFile({ //儲存圖片到微信上
tempFilePath: tempFilePaths[0], //取陣列的第一個
success: function (res) { //儲存成功是的回撥函式
var savedFilePath =res.savedFilePath //申明一個變數並賦值
that.setData({imagesrc2:savedFilePath}) //給資料賦值
}
})
}
})
}
所以,當點選提交按鈕時,我們需要把這個照片存起來formSubmit: function (e){
wx.setStorageSync('imagesrc2',that.data.imagesrc2);
}
最後在頁面的onload生命週期函式裡再把存起來的資料取出來用:onLoad: function (options){
varimagesrc2 = wx.getStorageSync('imagesrc2');
this.setData({
imagesrc2: imagesrc2
})
}
====================================================================================================================================
2017/12/20
今天在做一個企業微官網的小程式,首頁想要實現按需載入的視覺效果(滾動條拖動到哪,那兒的元素動態地出現在頁面裡)。 試了下scroll-view元件的bindScroll方法,設定了總高度了,但是不知道為什麼監聽不到scrollTop的值,有知道的,可以評論告訴我哦,非常感謝! 後來時用了頁面的生命週期函式onPageScroll寫的。 1、方法一 錯誤的思路:將渲染層需要實現按需載入動態出現的元素的id設定為變數,頁面js檔案中初始值為空。然後在onPageScroll函式裡判斷res.scrollTop的值是否大於某個數,後動態地改變id的值。 發現:雖然能成功賦值,但是渲染層裡面的id值始終為空。 結果:失敗 2、方法二 正確的思路:將渲染層需要實現按需載入動態出現的元素設定為條件渲染,直接判斷scrollTop的值是否大於某個數,大於則動態顯示,小於則不現實。 結果:成功 原始碼如下: wxml部分<image wx:if="{{scrollTop>200}}" src="images/imgurl4.jpg"></image> //這個200需要按照實際需求寫
wxss部分
@keyframes slideInFromLeft {
0% {left: -1000rpx;}
100% {left: 0;}
} //圖片從左往右滑入頁面的動畫
image {
height: 370rpx;
margin-bottom: 40rpx;
width: 100%;
position: relative;
animation: slideInFromLeft 4s ease-in-out forwards; //呼叫上面的動畫
}
js部分
onPageScroll:function(res){
console.log(res.scrollTop); //後臺打印出來看看滾動條距離頂部的高度
this.setData({
scrollTop: res.scrollTop
})
}