这是我参与「第四届青训营」笔记创作活动的第13天

小程序的介绍

运行在某个APP里面，比如微信：没有跨平台限制
微信小程序
- Wechat Mini Program 是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一搜即可使用

发展历史

概念区分

1 小程序

运行在某个APP里面，比如微信

2 webapp

运行在浏览器上，没有跨平台限制

3 混合app

运行在终端上，有跨平台限制，内部运行的是webapp

4 原生app

运行在终端上，有跨平台限制，内部运行的是机器码01

开发

官网注册登录

mp.weixin.qq.com/

工具下载

在个人主页中点击文档
进入新页面后点击工具，点击微信开发者工具
选择与自己电脑合适的版本进行下载

编程式路由

只能跳转非tabbar 有返回 wx.navigateTo({url: '/pages/test/test'})

只能跳转非tabbar 无返回wx.redirectTo({url: '/pages/test/test'})

能跳转所有页面无返回关闭当前页面wx.switchTab({url: '/pages/index/index'})

能跳转所有页面无返回关闭所有页面wx.reLaunch({url: '/pages/index/index'})

请求的三种封装

简单式封装

base.js

const baseUrl='http://jsonplaceholder.typicode.com/'
module.exports=(url,data,method)=>{
   return new Promise((resolve,reject)=>{
     wx.showLoading({
       title: 'loading',
       mask: true,
       success: (res) => {},
       fail: (res) => {},
       complete: (res) => {
         wx.hideLoading()
       },
     })
     wx.request({
       url: baseUrl+url,
       data: data,
       method,
       success:resolve,
       fail:reject,
       complete: (res) => {},
     })
   })
}

完全式封装

有加载的效果

const app = getApp()
  const request = (url, options) => {
     // 请求之前提示加载中
    wx.showLoading({title: '加载中...'})
    return new Promise((resolve, reject) => {
      wx.request({
        url: `${app.globalData.baseURL}${url}`,
        // url: host + url,
        method: options.method,
        data: options.method === 'GET' ? options.data : JSON.stringify(options.data),
        header: {
          'Content-Type': 'application/json; charset=UTF-8',
          'x-token': 'x-token'  // 看自己是否需要
        },
        success: resolve,
        fail: reject,
        // success(request) {
        //   // console.log(request)
        //   if (request.statusCode === 200) {
        //     resolve(request.data)
        //   } else {
        //     reject(request.data)
        //   }
        // },
        // fail(error) {
        //   reject(error.data)
        // }
        complete() {
        	wx.hideLoading()
      	}
      })
    })
  }

  const get = (url, options = {}) => {
    return request(url, { method: 'GET', data: options })
  }

  const post = (url, options) => {
    return request(url, { method: 'POST', data: options })
  }

  const put = (url, options) => {
    return request(url, { method: 'PUT', data: options })
  }

  // 不能声明DELETE（关键字）
  const remove = (url, options) => {
    return request(url, { method: 'DELETE', data: options })
  }

  module.exports = {
    get,
    post,
    put,
    remove
  }

外部式封装

第一步:在pages安装flyionpm i flyio -S
第二步:将node_modules/flyio 复制到项目工程目录下
第三步:严格按照前两步操作否则出现模块找不到错误
封装文件如下:

import Fly from '../flyio/dist/npm/wx'
const fly = new Fly()
const host = 'http://jsonplaceholder.typicode.com/'
// 添加请求拦截器
fly.interceptors.request.use(
  (request) => {
    wx.showLoading({
      title: '加载中',
      mask: true
    })
    console.log(request)
    // request.headers["X-Tag"] = "flyio";
    // request.headers['content-type']= 'application/json';
    request.headers = {
      'X-Tag': 'flyio',
      'content-type': 'application/json'
    }
    let authParams = {
    // 公共参数
      'categoryType': 'SaleGoodsType@sim',
      'streamNo': 'wxapp153570682909641893',
      'reqSource': 'MALL_H5',
      'appid': 'string',
      'timestamp': new Date().getTime(),
      'sign': 'string'
    }

    request.body && Object.keys(request.body).forEach((val) => {
      if (request.body[val] === '') {
        delete request.body[val]
      };
    })
    request.body = {
      ...request.body,
      ...authParams
    }
    return request
  })

// 添加响应拦截器
fly.interceptors.response.use((response) => {
  wx.hideLoading()
  return response.data// 请求成功之后将返回值返回
},
(err) => {
  // 请求出错，根据返回状态码判断出错原因
  console.log(err)
  wx.hideLoading()
  if (err) {
    return '请求失败'
  };
}
)

fly.config.baseURL = host

export default fly

小程序开发入门|青训营笔记