技術篇,有些是我自己學的,有些是我們公司的全棧大神教的,還有些就是各種百度的。
會持續更新,每天寫一點。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2017/11/17
1、表單控件需要用戶填寫信息,點擊提交,當信息爲空時,頂部跳出提示,側邊出現警告圖標。
<view class="weui-toptips weui-toptips_warn"wx:if="{{showTopTips}}"> {{warn_text}}</view>
<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
}
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實現
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: function (options){
varimagesrc2 = wx.getStorageSync('imagesrc2');
this.setData({
imagesrc2: imagesrc2
})
}
2017/12/20
今天在做一個企業微官網的小程序,首頁想要實現按需加載的視覺效果(滾動條拖動到哪,那兒的元素動態地出現在頁面裏)。<image wx:if="{{scrollTop>200}}" src="images/imgurl4.jpg"></image> //這個200需要按照實際需求寫
@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
})
}