小程序技术栈整合

小程序技术栈整合

一、 mpvue配置

1. 全局安装 vue-cli

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

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

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

  vue init mpvue/mpvue-quickstart my-project

二、 mpvue中配置 vant-weapp

1. 下载 vant-weapp 资源

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

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

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

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

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

4. 使用

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

三、 mpvue中配置 flyio

1. 安装 flyio

  yarn add flyio -S  

2. 新建文件 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()