公司需要在内网的情况下，也可以访问手机端，H5就是最佳的选择了。于是，我选择了用uniapp来开发这个H5，结果，遇到无数的坑，废话不多说，我们来时进入主题吧
说明
初次使用UIAPP这个框架的时候，发现这个编辑软件貌似不太稳定，如果，大家碰到一些没有代码问题，缺显示错误或无法显示，这个时候需要关闭软件并且重启，可能就好了。但是，也有碰到那种明明刚才好好的，可能是配置的时候添加了一些东西，导致显示错乱，可能重启也效果，这个时候需要新建一个项目，把就项目的东西针对性的copy过去。这些都是我爬过无数的坑，得出来的 "经验"
先看下项目的架构
项目结构目录.png
环境配置
因为，公司目前还没有正规的测试环境，所以，我就搭配了一个开发环境与生成环境，测试环境同理
1、开发环境 .env.development
测试环境.png
2、生成环境 .env.production
生成环境.png
跨域配置 vue.config.js
跨域配置.png
服务配置 service
const baseURL = process.env.NODE_ENV === 'production' ? window.httpUrl : process.env.VUE_APP_BASE_API
function requestPromise (method, api, data, header = {
'content-type': 'application/json' // 默认值
}) {
return new Promise((resolve, reject) => {
console.log(baseURL, method, api, data, header)
uni.request({
url: baseURL+api, //仅为示例，并非真实接口地址。
data: data,
method: method,
header: header,
success: (res) => {
console.log(res.data)
uni.hideLoading()
let data = res.data, code = res.data.code, msg = res.data.msg
if (!code) {
resolve(data)
} else {
uni.showLoading({
title: msg
})
}
},
fail: (res) => {
console.log(res)
}
})
})
}
export const get_ = (api, data = null, header = null) => {
console.log(api, data, header)
return requestPromise('GET', api, data, header)
}
export function post_ (api, data = null, header = null){
return requestPromise('post', api, data, header)
}
api配置
import {get_, post_} from '@/service/request.js';
// 上传图片, 个人
export function uploadCanvasImage (jid, grqz, data) {
let url = `xxxxxxxxxxxxxx&jid=${jid}&&grqz=${grqz}`
console.log(url, data)
return get_(url, data)
}
这里我使用的是导航栏自定义的用法，自己新建一个导航在这里不展开细说了，官网上有详细的介绍
为什么我会选择用cli来新建项目的呢？因为，我觉得这个cli新建的项目虽然比软件新建的项目复杂不少，但是，它的灵活性是软件新建项目无法比拟的。
各位配置好了之后，可以启动一个界面看下效果，如果，有什么问题的小伙伴，欢迎点赞并评论区留言，一起讨论共同进步
