學習微信小程序及知識佔及v-if與v-show差異

注意點：

1、接口調用方式：

getOpenid: function () {
  var that = this;
  return new Promise(function (resolve, reject) {
    wx.login({
      success: function (res) {
        //code 獲取用戶信息的憑證
        //調用接口獲取登陸憑證（code）。經過憑證進而換取用戶登陸態信息，
        // 包括用戶的惟一標識（openid）及本次登陸的會話密鑰（session_key）等。
        // 用戶數據的加解密通信須要依賴會話密鑰完成。
        if (res.code) {
          //請求獲取用戶openid
          wx.request({
            url: that.globalData.ctxUrl + "/wx/onLogin",
            data: { "code": res.code },
            method: 'POST',
            header: {
              'content-type': 'application/x-www-form-urlencoded'
            },
            success: function (res) {
              wx.setStorageSync("useropenid", res.data.body.openid);
              wx.setStorageSync("platformId", res.data.body.platformId);
              var res = {
                status: 200,
                data: res.data.body.openid
              }
              // 在外面調用app.getOpenid時就會將res傳到then方法的第一個參數裏面
              resolve(res);
            }
          });
        } else {
          console.log('獲取用戶登陸態失敗！' + res.errMsg)
          reject('error');
        }
      }
    })
  });
}
先在app.js文件裏寫一個公共方法調wx.login接口獲取code,而後將這個code傳後後端，後端會經過這個code調用微信接口，而後返回userid和platformId,而後存到緩存裏，
在調其它接口的時候就須要傳這個userid和platformId等。

app.getOpenid().then(function(res) {
  if (res.status == 200) {
    var userId1 = wx.getStorageSync("useropenid");
    var platformId1 = wx.getStorageSync('platformId');
    that.setData({
        userId: wx.getStorageSync("useropenid"),
        platformId: wx.getStorageSync('platformId')
      }),

      wx.request({
        url: app.globalData.ctxUrl + '/wx/partOfHomeDetails',
        data: {
          "userId": userId1,
          "platformId": platformId1,
          "photo": photo,
          "userName": userName
        },
        method: 'POST',
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: function (result) {
          wx.setStorageSync("userid", result.data.body[0].userId);
          that.setData({
            list: result.data.body
          })
        }
      })


小程序調接口經過token的方法以下：

每次推送觸發以前都會檢查一下是否過時，若是過時，從新執行一下後端的 getAccessToken 的方法去獲取
code換openId的話
小程序每次打開的時候都執行一下onLogin的方法拿code
而後把這個code傳給後端，後端返回openid等值，後端再把相關的openId+session_key生成一個Token再返回給小程序(也就是你再調一個接口它返給你token)
而後小程序的全部請求把這個Token帶上訪問就能夠了
相關的話能夠去了解下JWT

以上是微信小程序如何調用後端接口的實例

2、能夠用block標籤上加判斷條件，block自己不會顯示在頁面上

 

3、v-if與hidden屬性區別，hidden每一次要渲染，標籤會存在，可是至關於設置了display:none,

 而v-if只有條件知足才渲染，不然不渲染，若是不渲染標籤是不會顯示在頁面上的

v-if vs v-show

v-if 是「真正」的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。

v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。

相比之下，v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。

通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。

 

四，用wx:for-item能夠改變遍歷時取值時不用item.id了，能夠用i.id了

 

 

5、template模板

 

 

 5,

 

 

 

 6、知識點網站

https://github.com/CruxF/WXsmallProgram

https://github.com/CruxF/WXsmallProgram

 

https://wendux.github.io/dist/#/doc/flyio/wx

須要瞭解的網站：

https://www.v2ex.com/t/519999?p=1

一個mpvue項目中基於flyio實現的可更新cookie的攔截器

https://juejin.im/post/5c11d2b0e51d4514b3526a62

瞭解下flyio(fly.js)

 

7、

一、上線流程：

(微信小程序若是用原生的開發，上線時先將全部代碼保證最新代碼後點小程序的右上角的上線，須要輸入版本號啥的，在管理員的版本管理裏就會有你剛提交的那個版本了，而後管理員會點提交審覈，審覈經過後下面就會出現打包發佈的按鈕，管理員就能夠發佈了)

須要，build以後點上傳，而後在小程序管理後臺的版本管理那裏提交審覈，審覈經過了就能夠發佈上線了

上小程序的編輯器裏能夠看到上傳那個按

在微信小程序的官網裏有版本管理，能夠點開看下

某一個賬號可讓多我的管理，能夠在成員管理裏添加成員的微信號

 

2：若是想讓其它人使用本身的項目，可讓另外一方在新建項目裏點進去，而後會出來這樣的條碼，而後你掃下另外一方就能夠進來你的項目了

 

8、用token調後端接口

 

也能夠用cookie去操做和更新token的:

cookie既能夠在響應攔截器里根據後端提示過時再請求而後更新也行，也能夠本身在本地校驗是否過時，直接在請求發起前就更新cookie

 

9、比較重要的幾個api調用的微信接口

wx.login():： 調用接口獲取登陸憑證（code）。

經過憑證進而換取用戶登陸態信息，包括用戶的惟一標識（openid）及本次登陸的會話密鑰（session_key）等。

code

string

用戶登陸憑證（有效期五分鐘）。開發者須要在開發者服務器後臺調用 code2Session，使用 code 換取 openid 和 session_key 等信息

wx.getAccountInfoSync():獲取當前賬號信息，用它能夠取到appid

const accountInfo = wx.getAccountInfoSync() console.log(accountInfo.miniProgram.appId) // 小程序 appId console.log(accountInfo.plugin.appId) // 插件 appId console.log(accountInfo.plugin.version) // 插件版本號， 'a.b.c' 這樣的形式

wx.canIUse():判斷小程序的API，回調，參數，組件等是否在當前版本可用。

使用 ${API}.${method}.${param}.${options} 或者 ${component}.${attribute}.${option} 方式來調用
${API}.${method}.${param}.${options}${component}.${attribute}.${option}

wx.canIUse('button.open-type.getUserInfo')

wx.authorize:提早向用戶發起受權請求。

調用後會馬上彈窗詢問用戶是否贊成受權小程序使用某項功能或獲取用戶的某些數據，但不會實際調用對應接口。若是用戶以前已經贊成受權，則不會出現彈窗，直接返回成功。

注意：下面的scope下有不少屬性分別表明不一樣的受權，最後調用的方法要與scope下的屬性相對應，如微信運動受權，就調scope下的微信運動屬性，受權成功後再調運動的方法

// 能夠經過 wx.getSetting 先查詢一下用戶是否受權了 "scope.record" 這個 scope wx.getSetting({ success(res) { if (!res.authSetting['scope.record']) { wx.authorize({ scope: 'scope.record', success() { // 用戶已經贊成小程序使用錄音功能，後續調用 wx.startRecord 接口不會彈窗詢問 wx.startRecord() } }) } } })

wx.getSetting():獲取用戶的當前設置。返回值中只會出現小程序已經向用戶請求過的權限。

(就是查看它的受權信息，哪些功能受權了，哪些功能沒受權，若是已經受權了，就直接調用經受權的方法，若是沒有受權就調用wx.authorize()進行受權，受權後再調用功能方法)

wx.getSetting({
  success: res => {
    if (res.authSetting['scope.userInfo']) {
      //scope它下面有不少屬性分別表明不一樣的權限，這裏的scope.userInfo是指調用戶信息的權限
      // 已經受權，能夠直接調用 getUserInfo 獲取頭像暱稱，不會彈框
      wx.getUserInfo({
        success: res => {
          // 能夠將 res 發送給後臺解碼出 unionId
          this.globalData.userInfo = res.userInfo
          wx.setStorageSync("userPhoto", res.userInfo.avatarUrl)
          wx.setStorageSync('nickName', res.userInfo.nickName);
          // 因爲 getUserInfo 是網絡請求，可能會在 Page.onLoad 以後才返回
          // 因此此處加入 callback 以防止這種狀況
          if (this.userInfoReadyCallback) {
            this.userInfoReadyCallback(res)
          }
        }
      })
    }
  }
})
wx.setNavigationBarTitle:爲每一個頁面設置title文件

 wx.getUserInfto:獲取用戶信息

例如:像下面這樣點擊  「獲取用戶信息」 按鈕

在這個按鈕裏綁上getuserinfo方法，在getuser裏就能夠取到用戶信息了

 

 

這時點擊獲取用戶信息按鈕時就會調getuser方法，裏面的事件對象下面就會返回用戶相關信息了

 

 

 

 

 

十：標籤組件，經常使用的標籤
image:里加上mode這個屬性後就是寬度固定，高度自動

scroll-view:這個標籤組件能夠用在滾動到底端時加載下一頁的功能,要給page｛height:100%｝

這裏的loading是控制下拉刷新連續觸發的功能

list.push這塊作的目的是下拉刷新後以前的數據還要