小程序技术栈整合

我想再眯会

已于 2022-07-29 11:16:57 修改

阅读量1.9k

点赞数 1

文章标签：小程序 vue.js 前端

于 2022-07-29 10:39:16 首次发布

本文链接：https://blog.csdn.net/qq_63223641/article/details/126050785

版权

本文介绍了如何整合小程序技术栈，包括使用mpvue进行配置，集成 vant-weapp UI框架，配置flyio进行网络请求，并通过Promise封装小程序的网络请求，提供了两种不同的实现方式。

摘要由CSDN通过智能技术生成

小程序技术栈整合

一、 mpvue配置

全局安装 vue-cli

  npm install --global vue-cli@2.9.6
  
  如果已经装了这个 2.9.6 可以不装了
  
  npm install @vue/cli-init -g

创建一个基于 mpvue-quickstart 模板的新项目

新手一路回车选择默认就可以了

  vue init mpvue/mpvue-quickstart my-project

二、 mpvue中配置 vant-weapp

下载 vant-weapp 资源

  git clone https://github.com/youzan/vant-weapp.git

将dist目录下的所有文件复制到你项目的/static/vant/目录下

注意打开微信开发者工具中的ES6转ES5功能

在需要引入的页面目录下的main.json文件中

  {
   
    "usingComponents": {
   
      "van-button": "/static/vant/button/index",
    }
  }

使用

  <van-button>测试</van-button>

三、 mpvue中配置 flyio

安装 flyio

  yarn add flyio -S

新建文件 src/api/fly.js

import Fly from 'flyio/dist/npm/wx'
const fly = new Fly()
const host = 'http://127.0.0.1:5000/'
// 添加请求拦截器
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()