微信小程式開發筆記

摘要： 前言： 因為前段時間一直在做關於微信小程式方面的專案，作為一名後端的攻城獅而言做一些簡單的前端頁面資料操作和管理還是比較容易快上手的，當然前提是要理解微信小程式的基本語法和請求原理。該篇部落格主要記錄的是在編寫微信小程式時使用比較頻繁，實用的一些方法和一些基本原理的概括。個人覺得把這些方...

前言：

因為前段時間一直在做關於微信小程式方面的專案，作為一名後端的攻城獅而言做一些簡單的前端頁面資料操作和管理還是比較容易快上手的，當然前提是要理解微信小程式的基本語法和請求原理。該篇部落格主要記錄的是在編寫微信小程式時使用比較頻繁，實用的一些方法和一些基本原理的概括。個人覺得把這些方法掌握好了，開發一個小型的微信小程式那是綽綽有餘的啦。當然我這裡並沒有深入的對一些語言進行詳細的概述，純屬個人總結，假如需要詳細的微信小程式語法文件請移駕到：[ https://developers.weixin.qq.com/miniprogram/dev/ ]

知識點：

一、向後端請求資料方法：

wx.request({})

wx.request({
url: 'https://xxx.com/api/GetData', //這裡填寫你的介面路徑,注意一定要在微信小程式中授權過得https數字加密域名
method: 'get',//請求方式
header: { //介面口返回的資料是什麼型別，這裡就體現了微信小程式的強大，直接給你解析資料，再也不用去尋找各種方法去解析json，xml等資料了
'Content-Type': 'application/json'
},
data: {//請求資料
name: ''
},
success: function (res) {
 if (res.statusCode == 200) {//statusCode==200表示請求成功，有資料返回
 //這裡就是請求成功後，進行一些函式操作
 console.log(res.data)//// 伺服器回包內容
console.warn(res)
}},
fail: function (res) {
wx.showToast({ title: '系統錯誤' })
},
complete: () => {
wx.hideLoading();
} //complete介面執行後的回撥函式，無論成功失敗都會呼叫
});

二、通過憑證進而換取使用者登入態資訊：

wx.login({})

wx.login({
success(res) {
if (res.code) {
// 發起網路請求
wx.request({
url: 'https://test.com/onLogin',
data: {
 code: res.code
},
method: 'post',
header:{'Content-Type':'application/json'},
success:function(res)
{
 //得到使用者openid
console.log(res.openid);
}
})
} else {
console.log('登入失敗！' + res.errMsg)
}
}
})

三、小程式中三種變數宣告方式（var,let,const）:

var：全域性變數
let： 塊級變數，又稱之為區域性變數
const：塊級作用域，當時它屬於不變的常量

四、小程式應用生命週期：【詳細概括： https://www.jianshu.com/p/0078507e14d3 】

小程式初始化完成後，頁面首次載入觸發onLoad，只會觸發一次。
當小程式進入到後臺，先執行頁面onHide方法再執行應用onHide方法。
當小程式從後臺進入到前臺，先執行應用onShow方法再執行頁面onShow方法。

data Object 頁面的初始資料 
onLoad Function 生命週期函式--監聽頁面載入，首次進入會執行此方法進行資料載入，一個頁面只會載入一次 
onReady Function 生命週期函式--監聽頁面初次渲染完成 
onShow Function 生命週期函式--監聽頁面顯示，資料顯示，每次開啟頁面都會載入一次 
onHide Function 生命週期函式--監聽頁面隱藏 
onUnload Function 生命週期函式--監聽頁面解除安裝

五、模組引入方式（require或者是import):

// 用 import 或者 require 引入模組 
1.import util from '../../../util/util.js'
2.var Promise = require('../../../plugin/promise.js')

六、對應方法中通過定義var that=this;來代表當前方法的上下文物件：

var that=this;//把this物件複製到臨時變數that.

console.log(that.data.itemLists[res.tapIndex]);//使用that.data 屬性

七、小程式快取的那些事:

1.wx.setStorageSync(string key, any data)

2.wx.setStorage(Object object)

//本地快取
wx.setStorage({
key: "cartResult",
data: cartResult
})

//小程式本地快取
wx.setStorageSync(string key, any data)

//通過key獲取快取中的物件值：
 wx.getStorage({
key: 'cartResult',
success: res => {
if (res.data.length > 0){
this.setData({
cartResult: true
});}
},
})


//清空對應快取：
wx.removeStorageSync('cartResult')


//清空小程式快取
wx.clearStorageSync()

八、微信小程式列表渲染：

wx：for 控制屬性繫結一個數組，
wx:for-item :當前陣列變數名
wx:for-index 當前陣列下標的一個變數名
wx:key:如果列表中專案的位置會動態改變或者有新的專案新增到列表中，並且希望列表中的專案保持自己的特徵和狀態（如 <input/> 
中的輸入內容，<switch/> 的選中狀態），需要使用 wx:key 來指定列表中專案的唯一的識別符號。

//微信wxml列表迴圈：
<view wx:for="{{items}}" wx:for-index="index" wx:for-item="item">
{{index+1}}、{{item.title}}
</view>

//js中
page({
data:{
items:[{title:'小明'},{title:'小紅'}]
}
})

九、小程式js中的陣列 forEach 資料遍歷：

data:{
objIndex:[{name:'小明'},{name:'小紅'},{name:'小姚'}]
}

//定義容器
let ContentArray=[];
//索引資料拼接
objIndex.forEach(function(item, index) {

ContentArray.push({name:item})

});

十、小程式js中的陣列 for 資料遍歷：

let dList=res.data.list;
let array=[];
for(var i in dList)
{
//陣列拼接
array.push({
id:dList[i].Id,
menu_logo: dList[i].CoverImgId,
menu_name: dList[i].CategoryName,
price: dList[i].SalesPrice
});
}

十一、微信小程式模組化(向外暴露介面)：

第一種方式：
fucntion sayGoodbye()
{
//相應邏輯
}

//向外暴露
1.module.exports{
 sayGoodbye:sayGoodbye 
}
2.exports.sayHello=sayHello;

第二種方式：
//直接全部模組化
export default={
function sayHello(name) {
console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}

};

十二、小程式事件方法【bindtab,catchtap,bindconfirm,bindfocus,bindblur,bindchange,bindinput】：

首先bindtab（相當於js中的onclick 點選事件）和catchtap的區別：

我們都知道bindtap和catchtap都是當用戶點選該元件的時候會在該頁面對應的Page中找到相應的事件處理函式。但是bind事件繫結不會阻止冒泡事件向上冒泡，catch事件繫結可以阻止冒泡事件向上冒泡。

<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
 
Page({
handleTap1:function(event){//點選輸出outer view bindtap
console.log("outer view bindtap")
},
handleTap2: function (event) {//點選輸出middle view
console.log("middle view catchtap")
},
handleTap3: function (event) {//點選輸出inner view bindtapmiddle view catchtap
console.log("inner view bindtap")
},
})

bindconfirm 是點選小鍵盤上的搜尋按鈕就觸發要執行的方法
bindfocus: 指當我們的輸入框獲得焦點時觸發，也就是滑鼠或者手指點選到輸入框時。
bindblur: 指輸入框失去焦點是觸發，也就是當我們敲擊回車或手機上的完成又或者是點選螢幕上的空白處時觸發。 
bindchange: 這個事件官方文件中沒有寫，它的效果和bindblur一樣，至於看名字我們可能覺得bindchange在輸入框中的內容不改變時不會觸發，但是親測即使內容不改變，bindchange事件也一樣會觸發。 
bindinput: 每輸入一個字元都會進行一次檢索，通常用於實時檢索。但是這種方法對資料庫的要求較高。
在bindblur或bindchange事件中我們通過event.detail.value獲得swiper中的事件，左右滑動的時候，滑動結束會出發這個事件。

十三、小程式陣列的那些事（push，push.apply,concat）：

push 遇到陣列引數時，把整個陣列引數作為一個元素；
concat 則是拆開陣列引數，一個元素一個元素地加進去。
push 直接改變當前陣列；concat 不改變當前陣列。
//在原陣列的同時，新增增加一個新的資料，如js中的append
goods.push.apply(goods, data); //將頁面上面的陣列和最新獲取到的陣列進行合併

十四、通過bindtab點選事件，傳值：

//其中data-id為自定義屬性值，可以按照自己的引數名稱進行定義

<button bindtab='getcoupons' data-id='{{id}}' data-index='{{index}}'>領取</button>

 //js中:
 getcoupons(even){
 //直接看輸出
 console.log(even);
 const id=even.currentarget.id;
 或者even.target.dataset.id
 }

十五、超連結傳值：

<navigator url='/page/index?id'>調轉</navigator>

//頁面監聽，資料載入事件
onload:function(options)
{
console.log(options.id)
}

十六、小程式頁面調轉的那些事：

wx.switchTab 跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面
wx.reLaunch 關閉所有頁面，開啟到應用內的某個頁面
wx.redirectTo 關閉當前頁面，跳轉到應用內的某個頁面
wx.navigateTo 保留當前頁面，跳轉到應用內的某個頁面
wx.navigateBack 關閉當前頁面，返回上一頁面或多級頁面

十七、小程式自定義調轉地址和背景圖片的轉發，分享：

/**
* 使用者單擊右上角分享
*/
onShareAppMessage: function() {
let title = "你好"; //標題
let path = "pages/home/home?fartherPhone="+app.globalData.Phone; //頁面路徑
let imageUrl ='https://ad.yoweller.com/images/webimg/banner.jpg';//自定義圖片地址
return {
title: title,
path: path,
imageUrl: imageUrl
}
}

十八、小程式三目運算：

<view class="set-default">
<icon class="icon" type="{{item.isDefault == true ? 'success_circle' : 'circle'}}"/>
<text>預設地址</text>
</view>

<text class="viewpager-title {{current == 0 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="0">{{provinceName}}</text>

十九、小程式常用的彈窗提示：

//loading載入
wx.showToast({
title: '載入中',
icon:'loading',
duration:10000
)}


//操作成功彈窗
wx.showToast({
title:'成功',
icon:'success',
duration:2000
})

//confirm 提示框
wx.showModal({
title: '提示',
content: '這是一個模態視窗',
showCancel:false,//關閉取消按鈕
success:function(res){
if(res.confirm){
console.log('彈框後點取消')
}else{
console.log('彈框後點取消')
}
}
})

二十、微信小程式form表單的那些事：

<form bindsubmit='submit' bindreset='reset'> 
<button formtype='submit'>submit</button>//提交
<button formtype='reset'>reset</button>//重置
</form>

//首先使用form-type='submit'提交表單中的value資料時，需要在表單主鍵上加上name用作key
page({
submit:function(e)
{

}
})

二十一、清空對應Input文字框中的值：

//js
Page({
data: {
userInput: '',//定義文字框中的值
},
clearInput: function () {
this.setData({
userInput: ''
});
},
//通過檢索input文字框改變事件進行及時賦值
bindKeyInput: function(e) {
this.setData({
userInput: e.detail.value
});
}
})

//wxml中
<input value="{{userInput}}" bindinput="bindKeyInput"></input>
<view bindtap="clearInput">點選清除輸入框</view>

總結：

其實接觸新得技術並不可怕，可怕的是你自己不知道該怎麼去認識它。認識一門新語言的第一步是先主動去了解它的一些習性和特點。上面有一部分是來自於比較好的部落格和微信小程式API文件，然後我根據自己的想法和心得做了註釋和改變讓自己加深一遍印象。