HBuilderX uni-app项目运行到微信开发者工具

新建项目

目录结构

把项目运行到微信开发者工具

取消控制台警告信息

红框位置添加:"checkSiteMap":false

在原生小程序开发者工具中是在project.config.json 文件中

使用git管理项目

1. 在项目根目录中新建 .gitignore 忽略文件 , 并配置如下:

/node_modules

/unpackage/dist\

注意:此时我们忽略了 unpackage 目录中仅有的 dist 目录 , 因此默认情况下 , unpackage 目录不会被 git 追踪

此时, 为了让 git 能够正常追踪 unpackage 目录 , 按照惯例 , 我们可以在 unpackage 目录下创建一个叫做 .gitkeep 的文件进行占位

 

 

配置网络请求

由于平台的限制 , 小程序项目中不支持 axios , 而且原生的 wx.request() API 功能较为简单, 不支持拦截器等全局定制的功能 ,  因此 建议在uni-app 项目中 使用@escook/request-miniprogram 第三方包发起网络数据请求

npm install @escook/request-miniprogram

最终 在项目的 main.js 入口文件中 通过如下的方式进行配置:

import { $http } from '@escook/request-miniprogram'

uni.$http = $http
// 配置请求根路径
$http.baseUrl = ''
// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  // 自定义header请求头
  if (options.url.indexOf('/home/catitems') !== -1) {
    options.header = {
      xxx: 'xxx'
    }
  }
  uni.showLoading({
    title: '数据加载中...'
  })
}

// 请求完成之后做一些事情
$http.afterRequest = function () {
  uni.hideLoading()
}