day4

网络请求官方文档 API

• 需要先设置域名，个人服务器可以在右上角详情处-本地设置中勾选不校验，即可通过IP地址访问
• 在生命周期函数里执行

    // 1.发送最简单的get请求
    onload:function(options) {
        wx.request({
            url: 'http://123.207.32.32:8000/recommend',
            success: function(res) {
                console.log(res)
            }
        })
    }
    
   // 2.get请求,并且携带参数
   wx.request({
     url: 'http://123.207.32.32:8000/home/data',
     data: {
       type: 'sell',
       page: 1
     },
     success: function (res) {
       console.log(res)
     }
   })

   // 3.post请求,并且携带参数
   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)
     }
   })

工具函数请求封装

• 为什么要封装？

  • 降低网络请求和wx.request的耦合度
  • 传统的调用方法已经被淘汰，现在多使用axios.get(url,options),promise方法进行请求，通过then(res => {})获取成功的结果，通过catch(err => {})获取失败的结果

• 在页面逻辑层(home.js)引入封装函数的逻辑层，需要使用相对路径

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

• 在页面的逻辑层(home.js)调用

  
      onLoad: function (options) {
          // 2.使用封装的request发送网络请求
          // Promise最大的好处就是防止出现回调地狱
          request({
              url: 'http://123.207.32.32:8000/recommend'
          }).then(res => {
              console.log(res)
          }).catch(err => {
              console.log(err)
          })
      },
  

• 在网络请求文件中定义工具类通过promise方法把结果传到页面

  
      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

页面分享官方文档

• 使用右上角的三点转发
• 自定义转发按钮open-type='share'

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

• 调用相关API设置转发显示的图片和文字

  
      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({
        // 对象: 小程序关闭掉
        globalData: {
            token: ''
        },
        onLaunch: function () {
            // 1.先从缓冲中取出token
            const token = wx.getStorageSync(TOKEN)

            // 2.判断token是否有值
            if (token && token.length !== 0) { // 已经有token,验证token是否过期
                this.check_token(token) // 验证token是否过期
            } else { // 没有token, 进行登录操作
                this.login()
            }
        },
        check_token(token) {
            console.log('执行了验证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('执行了登录操作')
            wx.login({
            // code只有5分钟的有效期
                success: (res) => {
                // 1.获取code
                const code = res.code;

                // 2.将code发送给我们的服务器
                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)
                }
            })
        }
    })
    }
})