微信小程序项目初始化配置

微信小程序项目初始化配置

注：该文章用于记录或学习交流

---

---

前言

微信小程序项目初始化配置准备，包括项目创建，基础路径配置，组件库安装，接口请求封装，部分实用组件封装等

---

一、初始项目创建

1.微信小程序开发者工具创建初始项目

• 创建初始项目后，对项目文件结构重新梳理
  
  注：目录结构根据个人需求创建，assets和static文件夹的区别详见assets与static的区别

2.微信小程序全局路径配置

在app.json中配置resolveAlias路径规则属性

// app.json

{
  "pages": [
    "src/pages/index/index",
    "src/pages/home/home"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  // 路径规则配置，需以/*结尾
  "resolveAlias": {
    "~/*": "/*",
    "@utils/*": "utils/*"
  },
  "style": "v2", // 可删除，因为该配置表示启用新版组件样式，将会导致以后引入组件库的样式错乱
  "sitemapLocation": "sitemap.json"
}

根据需求配置完成后可在文件中直接使用，例如：

import { formatTime } from '~/utils/util' // ~表示根路径
import { formatTime } from '@utils/util' // @指定路径

3.微信小程序引入 less、sass、ts

微信小程序引入less、sass、ts无需任何第三方工具，官方原生即可支持，详情移步官方文档: 原生支持 TypeScript

此处我暂且只引入less，在project.config.json文件中配置

// project.config.json

{
  "description": "项目配置文件",
  "packOptions": {
    "ignore": [],
    "include": []
  },
  "setting": {
  	...
  	// 配置 less、sass、ts
  	"useCompilerPlugins": [
      "less"
    ]
  }
}

配置完成后，清一下缓存，不放心的可以重启一下开发者工具，即可在写代码的时候自由使用less了

二、基础地址配置

在开发时，需要统一配置很多基本url，接口的，图片等服务器资源的url等，我们在configs文件夹中创建config.js文件进行统一配置

// config.js

const base_url = 'https://api.apiopen.top' // 基础地址
const dev_url = '' // 开发地址
const prod_url = '' // 发布地址

const config = {
  baseUrl: base_url,
  imgUrl: `${base_url}/userfiles/images/`,
  tempUrl: `${base_url}/userfiles/temp/`,
  apiUrl: `${base_url}/api/`,
  appid: 'wx417856313e7d****'
}

export default config // 或者以module.exports的方式导出，再按需导入

// 以module.exports的方式导出
module.exports = {
  baseUrl: base_url,
  imgUrl: `${base_url}/userfiles/images/`,
  tempUrl: `${base_url}/userfiles/temp/`,
  apiUrl: `${base_url}/api/`,
  appid: 'wx417856313e7d****'
}

配置完成后，在需要的地方导入该config.js文件即可
或者以按需导入的方式

import config from '~/configs/config'
console.log(config.baseUrl);

import { baseUrl } from '~/configs/config'

三、微信小程序 request 封装 (仿axios)

在对接接口的时候，使用微信原生的request进行请求难免会出现很多冗余代码。加上平时开发web比较多，习惯了axios的使用方式，现对微信原生的request进行仿axios的二次封装，简化和统一管理小程序与后端接口的请求方式。

• 若想引入axios，可参考小程序中axios的使用 等文章，可能需要同时引入 axios 和 axios-miniprogram-adapter 小程序适配器搭配使用才行，笔者喜欢保持库的简洁，故在此处只对微信原生的request作出简单封装，满足简单的日常需求即可。

在utils文件夹下创建request.js文件，在这里封装wx.request

// utils/request.js

// 引入基础路径配置
import config from '@configs/config'

/**
 * 封装一个基础路径的 request 请求，并导出
 * @param {*} options: {
 *    url: 请求路径，由基础路径+url拼接而成
 *    aurl: 请求完整路径，优先级大于 url,
 *    method: 请求方式,
 *    data: 请求参数,
 * }
 */
const request = (options) => {
  // 用 Promise 做链式调用封装
  return new Promise((resolve, reject) => {
    // 此处可以做加载 loading 或提示动画等操作
    wx.request({
      // 若直接给完整路径 aurl 则直接使用完整路径，否则使用标准的基础路径 apiUrl + 请求路径 url 拼接
      url: options.aurl || config.apiUrl + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: {
      	// 默认，一般不用改
        'content-type': "application/x-www-form-urlencoded"
      },
      responseType: options.responseType || "",
      timeout: 16000,
      success(res) {
        // 此处可以做关闭 loading 或提示动画等操作
        if (res.statusCode === 200) {
          // 成功数据
          resolve(res.data);
        } else {
          // 失败信息
          console.log(res.errMsg);
        }
      },
      fail(res) {
        // 失败
        reject(res);
      }
    })
  })
}

export default request

然后在根目录创建api文件夹，在其中创建一个接口文件，如test.js，再引入request.js文件，写一个getData方法

// api/test.js

import request from '~/utils/request.js'

export function getData(data) {
  return request({
    url: 'sentences', // config.apiUrl + url 拼接，完整路径为：https://api.apiopen.top/sentences
    method: 'get',
    data: data
  })
}

在项目文件中引入并使用

import { getData } from '~/api/test.js'

...

getData().then((res) => {
   console.log('接口数据：', res);
})

打印数据内容：

该接口为开放接口，随机获取一首诗句，仅限用于开放测试等

注：微信小程序接入接口前需要去微信公众平台开启api白名单，否则会报request不在合法域名内之类的错

• 打开微信公众平台
  
  首页这里点击开发设置 会跳转到： 开发 / 开发管理 / 开发设置，翻到下面的服务器域名即可配置request合法域名
  
  还有可能会遇到这种报错
  
  只需要在本地设置里面勾选上不校验域名和证书就好了
  

配置完成之后去发送request请求就能正确请求到数据啦~

持续更新中…