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

注：該文章用于記錄或學習交流

前言

微信小程序項目初始化配置準備，包括項目創(chuàng)建，基礎路徑配置，組件庫安裝，接口請求封裝，部分實用組件封裝等

一、初始項目創(chuàng)建

1.微信小程序開發(fā)者工具創(chuàng)建初始項目

• 創(chuàng)建初始項目后，對項目文件結構重新梳理
  
  注：目錄結構根據(jù)個人需求創(chuàng)建，assets和static文件夾的區(qū)別詳見assets與static的區(qū)別

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

在app.json中配置resolveAlias路徑規(guī)則屬性

// app.json

{
  "pages": [
    "src/pages/index/index",
    "src/pages/home/home"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  // 路徑規(guī)則配置，需以/*結尾
  "resolveAlias": {
    "~/*": "/*",
    "@utils/*": "utils/*"
  },
  "style": "v2", // 可刪除，因為該配置表示啟用新版組件樣式，將會導致以后引入組件庫的樣式錯亂
  "sitemapLocation": "sitemap.json"
}

根據(jù)需求配置完成后可在文件中直接使用，例如：

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"
    ]
  }
}

配置完成后，清一下緩存，不放心的可以重啟一下開發(fā)者工具，即可在寫代碼的時候自由使用less了

二、基礎地址配置

在開發(fā)時，需要統(tǒng)一配置很多基本url，接口的，圖片等服務器資源的url等，我們在configs文件夾中創(chuàng)建config.js文件進行統(tǒng)一配置

// config.js

const base_url = 'https://api.apiopen.top' // 基礎地址
const dev_url = '' // 開發(fā)地址
const prod_url = '' // 發(fā)布地址

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進行請求難免會出現(xiàn)很多冗余代碼。加上平時開發(fā)web比較多，習慣了axios的使用方式，現(xiàn)對微信原生的request進行仿axios的二次封裝，簡化和統(tǒng)一管理小程序與后端接口的請求方式。

• 若想引入axios，可參考小程序中axios的使用 等文章，可能需要同時引入 axios 和 axios-miniprogram-adapter 小程序適配器搭配使用才行，筆者喜歡保持庫的簡潔，故在此處只對微信原生的request作出簡單封裝，滿足簡單的日常需求即可。

在utils文件夾下創(chuàng)建request.js文件，在這里封裝wx.request

// utils/request.js

// 引入基礎路徑配置
import config from '@configs/config'

/**
 * 封裝一個基礎路徑的 request 請求，并導出
 * @param {*} options: {
 *    url: 請求路徑，由基礎路徑+url拼接而成
 *    aurl: 請求完整路徑，優(yōu)先級大于 url,
 *    method: 請求方式,
 *    data: 請求參數(shù),
 * }
 */
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) {
          // 成功數(shù)據(jù)
          resolve(res.data);
        } else {
          // 失敗信息
          console.log(res.errMsg);
        }
      },
      fail(res) {
        // 失敗
        reject(res);
      }
    })
  })
}

export default request

然后在根目錄創(chuàng)建api文件夾，在其中創(chuàng)建一個接口文件，如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('接口數(shù)據(jù)：', res);
})

打印數(shù)據(jù)內容：

該接口為開放接口，隨機獲取一首詩句，僅限用于開放測試等

注：微信小程序接入接口前需要去微信公眾平臺開啟api白名單，否則會報request不在合法域名內之類的錯

• 打開微信公眾平臺
  
  首頁這里點擊開發(fā)設置 會跳轉到： 開發(fā) / 開發(fā)管理 / 開發(fā)設置，翻到下面的服務器域名即可配置request合法域名
  
  還有可能會遇到這種報錯
  
  只需要在本地設置里面勾選上不校驗域名和證書就好了
  

配置完成之后去發(fā)送request請求就能正確請求到數(shù)據(jù)啦~

持續(xù)更新中…文章來源地址http://www.zghlxwxcb.cn/news/detail-403695.html

到了這里，關于微信小程序項目初始化配置的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！