微信小程序開發筆記

前言：

　　因為前段時間一直在做關於微信小程序方面的項目，作為一名后端的攻城獅而言做一些簡單的前端頁面數據操作和管理還是比較容易快上手的，當然前提是要理解微信小程序的基本語法和請求原理。該篇博客主要記錄的是在編寫微信小程序時使用比較頻繁，實用的一些方法和一些基本原理的概括。個人覺得把這些方法掌握好了，開發一個小型的微信小程序那是綽綽有余的啦。當然我這里並沒有深入的對一些語言進行詳細的概述，純屬個人總結，假如需要詳細的微信小程序語法文檔請移駕到：[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;來代表當前方法的上下文對象：

為什么要這樣做呢？

　　在javascript語言中，this代表着當前的對象，而this在微信小程序中隨着執行的上下文隨時會變化。所以當在一個方法里面直接使用this的話會找不到這個方法中所指定的對象值，因為對應的上下文中的data值已經改變了。自然就沒有了data屬性，也沒有了data.itemLists屬性了。解決的辦法就是復制一份當前的對象。

 

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 bindtap  middle 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>

條件渲染（wx:if）:

wx:if
在框架中，使用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊：

<view wx:if="{{condition}}">True</view>
也可以用 wx:elif 和 wx:else 來添加一個 else 塊：

<view wx:if="{{length > 5}}">1</view>
<view wx:elif="{{length > 2}}">2</view>
<view wx:else>3</view>
block wx:if
因為 wx:if 是一個控制屬性，需要將它添加到一個標簽上。如果要一次性判斷多個組件標簽，可以使用一個 <block/> 標簽將多個組件包裝起來，並在上邊使用 wx:if 控制屬性。

<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>

文本復制：

< text selectable=’true’ >< text/>  只有文本內容在text內才可以復制，在外面的不能被復制

總結：

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