项目完整代码:juejin.cn/spost/72455…
gitee:gitee.com/zhu12/banlu
一、不管是开发原生的小程序还是uniapp开发小程序
你在公司开发项目,前提:
1. appid ==》 公司给你
wxc82730a0fc15e28a
2. 开发者身份 ==》 公司给你添加
明天晚上之前,把自己的微信号,
二、uniapp ui组件 ===>uView
如果采用npm安装方式在 小程序端不生效
4.1 采用插件的形式安装:https://ext.dcloud.net.cn/plugin?id=1593
4.2 配置一下:https://www.uviewui.com/components/downloadSetting.html
1. 引入uView主JS库:
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
2. 在项目根目录的`uni.scss`中引入此文件:
@import '@/uni_modules/uview-ui/theme.scss';
3. 配置easycom组件模式:在项目根目录的`pages.json`中进行
如果您是通过uni_modules形式引入uView,可以忽略此配置
"easycom": {
"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
},
三、请求的二次封装、api解耦、处理跨域问题==》代理
3.1 新建utils/request.js :
具体封装在这里:https://juejin.cn/editor/drafts/7245536612627693629
官网:https://www.uviewui.com/js/http.html
3.2 main.js引入request.js
// 引入请求封装,将app参数传递到配置中
require('./utils/request.js')(app)
3.3 在utils/api/goods.js 弄api解耦:
const http = uni.$u.http
// post请求,获取菜单
// export const postMenu = (data) => http.post('/ebapi/public_api/index', data)
// 商品分页
export const goodsPage = (data) => http.get('/mall/goods/page', {params:data});
//商品详情
export const getGoods = (data) => http.get(`/mall/goods/get/${data}`);
在 pages/index/index.vue使用请求接口数据:
import { goodsPage,getGoods } from '@/utils/api/goods.js';
3.4 小程序怎么处理跨域问题==》不校验url
***注意:上线不行
总结跨域问题
1. 开发阶段:
小程序: 没有跨域问题 需要 “不校验url”
H5 : 浏览器需要设置代理来解决跨域问题==》类似于vue==〉proxy : server 在根目录新建vue.config.js
module.exports = {
devServer:{
proxy:{
'/':{ "target":'http://uat.banlu.xuexiluxian.cn',
"changeOrigin":true
}
}
}
}
条件编译使用场景:处理跨域问题的时候,H5端:baseURL,小程序要走,
所以给utils/request.js加入条件编译判断
// 初始化请求配置
uni.$u.http.setConfig((config) => {
// #ifdef MP-WEIXIN
config.baseURL = 'http://uat.banlu.xuexiluxian.cn'; /* 根域名 */
// #endif
return config
})
2.上线阶段:
必须在微信小程序后台管理开发者管理中 配置合法的服务器域名 “request合法域名” 就可以了,并且必须是https开头 如下图
四、自定义头部 : pages.json中pages
"style": {
"navigationStyle": "custom" //代表自定义头部
}
五、在非有dom的生命周期中拿到dom怎么办?
“异步” ==》 promise、$nextTick原理就是返回了异步
补充:在uniapp中:
onload ==> vue 的 create
onReady ==> vue 的 mounted
小程序线上跨域: