網(wǎng)絡(luò)請求官方文檔 API

• 需要先設(shè)置域名，個人服務(wù)器可以在右上角詳情處-本地設(shè)置中勾選不校驗埃撵，即可通過IP地址訪問
• 在生命周期函數(shù)里執(zhí)行

    // 1.發(fā)送最簡單的get請求
    onload:function(options) {
        wx.request({
            url: 'http://123.207.32.32:8000/recommend',
            success: function(res) {
                console.log(res)
            }
        })
    }
    
   // 2.get請求,并且攜帶參數(shù)
   wx.request({
     url: 'http://123.207.32.32:8000/home/data',
     data: {
       type: 'sell',
       page: 1
     },
     success: function (res) {
       console.log(res)
     }
   })

   // 3.post請求,并且攜帶參數(shù)
   wx.request({
     url: 'http://httpbin.org/post',
     method: 'post',
     data: {
       name: 'coderwhy',
       age: 18
     },
     success: function(res) {
       console.log(res)
     },
     fail: function(err) {
       console.log(err)
     }
   })

工具函數(shù)請求封裝

• 為什么要封裝榜配？

  • 降低網(wǎng)絡(luò)請求和wx.request的耦合度
  • 傳統(tǒng)的調(diào)用方法已經(jīng)被淘汰，現(xiàn)在多使用axios.get(url,options),promise方法進行請求，通過then(res => {})獲取成功的結(jié)果贞远，通過catch(err => {})獲取失敗的結(jié)果

• 在頁面邏輯層(home.js)引入封裝函數(shù)的邏輯層，需要使用相對路徑

      import request from '../../service/network.js'
  

• 在頁面的邏輯層(home.js)調(diào)用

  
      onLoad: function (options) {
          // 2.使用封裝的request發(fā)送網(wǎng)絡(luò)請求
          // Promise最大的好處就是防止出現(xiàn)回調(diào)地獄
          request({
              url: 'http://123.207.32.32:8000/recommend'
          }).then(res => {
              console.log(res)
          }).catch(err => {
              console.log(err)
          })
      },
  

• 在網(wǎng)絡(luò)請求文件中定義工具類通過promise方法把結(jié)果傳到頁面

  
      export default function request(options) {
          return new Promise((resolve, reject) => {
          wx.request({
              url: options.url,
              method: options.method || 'get',
              data: options.data || {},
              success: resolve,
              fail: reject
          })
          })
      }
  

彈窗官方文檔

小程序展示彈窗.png

頁面分享官方文檔

• 使用右上角的三點轉(zhuǎn)發(fā)
• 自定義轉(zhuǎn)發(fā)按鈕open-type='share'

      <button size='mini' open-type='share'>分享</button>
  

• 調(diào)用相關(guān)API設(shè)置轉(zhuǎn)發(fā)顯示的圖片和文字

  
      onShareAppMessage: function(options) {
          return {
              title: '你好啊,李銀河',
              path: '/pages/about/about',
              imageUrl: 'http://s3.mogucdn.com/mlcdn/c45406/170915_0a93207ci28kelh617k4hh62l65lb_640x960.jpg'
          }
      }
  

小程序的登錄流程官方文檔

小程序登錄.png

• new一個變量token
• 先判斷是否有緩存的token
• 如果有笨忌，判斷token的長度以及是否過期
• 如果沒有就進行登錄操作

    
    const TOKEN = 'token'

    App({
        // 對象: 小程序關(guān)閉掉
        globalData: {
            token: ''
        },
        onLaunch: function () {
            // 1.先從緩沖中取出token
            const token = wx.getStorageSync(TOKEN)

            // 2.判斷token是否有值
            if (token && token.length !== 0) { // 已經(jīng)有token,驗證token是否過期
                this.check_token(token) // 驗證token是否過期
            } else { // 沒有token, 進行登錄操作
                this.login()
            }
        },
        check_token(token) {
            console.log('執(zhí)行了驗證token操作')
            wx.request({
                url: 'http://123.207.32.32:3000/auth',
                method: 'post',
                header: {
                    token
                },
                success: (res) => {
                    if (!res.data.errCode) {
                        console.log('token有效')
                        this.globalData.token = token;
                    } else {
                        this.login()
                    }
                },
                fail: function(err) {
                    console.log(err)
                }
            })
        },
        login() {
            console.log('執(zhí)行了登錄操作')
            wx.login({
            // code只有5分鐘的有效期
                success: (res) => {
                // 1.獲取code
                const code = res.code;

                // 2.將code發(fā)送給我們的服務(wù)器
                wx.request({
                    url: 'http://123.207.32.32:3000/login',
                    method: 'post',
                data: {
                    code
                },
                success: (res) => {
                    // 1.取出token
                    const token = res.data.token;

                    // 2.將token保存在globalData中
                    this.globalData.token = token;

                    // 3.進行本地存儲
                    wx.setStorageSync(TOKEN, token)
                }
            })
        }
    })
    }
})