分类 小程序 下的文章

前言

微信小程序的坑
想要配置request安全域名,登陆测试号后台一片空白

解决

根据官方小程序社区的回答

1,第一步先登陆小程序官方社区 https://developers.weixin.qq.com/community/develop/mixflow
2,第二步再登陆测试号后台 https://developers.weixin.qq.com/sandbox
小程序测试号后台没数据.png

前言

  • 初学小程序,很多搞不懂
  • VUE也不是很熟
  • 小程序页面onLoad的时候拿不到app.js中的全局变量

解决办法

由于异步的关系, 常常页面在onLoad的时候拿不到全局变量的值, 所以可以用setTimeout延迟1s来解决

//你的page页面index.js
page({
  data:{
    userInfo:null
  },
  onLoad: function() {
    var that = this
    wx.showLoading({
      title: '加载中',
    })
    setTimeout(function() {
      that.setData({
        userInfo: getApp().globalData.userInfo
      })
      wx.hideLoading()
    }, 1000)

  }
})

文章转自SilentLovelv: https://juejin.im/post/5d1ad313e51d45105d63a561 (有部分修改)

1、前言

  • 微信小程序基础
  • 长写VUE的朋友可能对axios情有独钟
  • `wx.requet的二次封装
  • api的集中管理和使用

2、配置baseUrl

一般情况下,项目中的baseUrl域名前缀、登录的code、用户信息等都是配置在app.js

//app.js
App({
  onLaunch: function () {
    wx.login({
      success: res => {
        if (res.code) {
          this.globalData.loginCode = res.code   // 获取的code码,以进一步换取用户信息
          // res: {
          //   code: "061Zltjh1sXj6s0z96hh1Z1njh1Zltj5"
          //   errMsg: "login:ok"
          // }
        } else {
          console.log('登录失败!' + res.errMsg)
        }
      }
    })
  },
  globalData: {
    userInfo: null,
    loginCode: null,
    baseUrl: 'https://...'
  }
})

3、封装wx.request

在小程序目录下建立utils文件夹,并在文件夹下创建request.js文件

// request.js
const request = options => {
  return new Promise((resolve, reject) => {
    const { data, method } = options
    if(data && method !== 'get') {
      options.data = JSON.stringify(data)
    }
    wx.request({
      header: { 'Content-Type': 'application/json' },
      ...options,
      success: function(res) {
        if(res.data.code === 2000) {
          resolve(res.data)
        } else {
          reject(res.data)
        }
      },
      fail: function(res) {
        reject(res.data)
      }
    })
  })
}
export default request

4、api的集中管理和使用

  1. 在小程序目录下建立api文件夹,并在文件夹下创建user.js文件(文件名推荐按模块命名)
  2. 用过axios的朋友接下来应该会感觉很熟悉
// user.js
import request from '../utils/request.js'
// baseUrl也可拼接在request.js中,当有多个鉴权模块,放在这里更灵活
const baseUrl = getApp().globalData.baseUrl

export function apiLogin(data) {
  return request({
    url: `${baseUrl}/user/login`,
    method: 'post',
    data
  })
}

export function apiGetUserInfo() {
  return request({
    url: `${baseUrl}/user/userInfo`,
    method: 'get'
  })
}

export function apiModifyUserPassword(data) {
  return request({
    url: `${baseUrl}/user/modifyPassword`,
    method: 'put',
    data
  })
}

export function apiLogout() {
  return request({
    url: `${baseUrl}/user/logout`,
    method: 'delete'
  })
}
  1. 在页面中使用
// pages/login/login.js
import { apiLogin } from '../../api/user.js'
Page({
  onLoad: function (options) {
    this.login()
  },
  login() {
    apiLogin({
      // api params
    }).then(res => {
      // handle success
    }).catch(error => {
      // handle error
    })
  }
})

5、尾言

  1. 由于涉及到ES6语法,需要在本地设置中开启ES6转ES5
  2. 小程序开发过程中应注意this指向性问题
  3. 转载文章,有问题和作者交流