微信小程序项目初始化配置
注：该文章用于记录或学习交流
前言
微信小程序项目初始化配置准备，包括项目创建，基础路径配置，组件库安装，接口请求封装，部分实用组件封装等
一、初始项目创建
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不在合法域名内之类的错文章来源：https://www.toymoban.com/news/detail-403695.html
- 打开微信公众平台
首页这里点击开发设置 会跳转到： 开发 / 开发管理 / 开发设置，翻到下面的服务器域名即可配置request合法域名
还有可能会遇到这种报错
只需要在本地设置里面勾选上不校验域名和证书就好了
配置完成之后去发送request请求就能正确请求到数据啦~
持续更新中…文章来源地址https://www.toymoban.com/news/detail-403695.html
到了这里，关于微信小程序项目初始化配置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
