微信小程式開發（技術篇）
技術篇，有些是我自己學的，有些是我們公司的全棧大神教的，還有些就是各種百度的。
會持續更新，每天寫一點。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
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需要按照實際需求寫@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
})
｝