/**
* 创建uni-app项目
* HBuilder -> 文件 -> 新建项目 -> uni-ui项目 -> 创建
*
* hbuilder中配置微信开发工具
* 1. 工具 -> 设置 -> 运行配置 -> 小程序运行配置 -> 传入小程序在电脑中的安装地址(eg: D:\Software\微信web开发者工具\微信开发者工具.exe)
* 2. 打开微信开发工具 -> 设置 -> 安全设置 -> 开启服务端口
*
* uniapp中网络请求
* @escook/request-miniprogram: 因为小程序中无法使用axios, 而wx.request有局限,因此使用此包
* 1. 项目下打开终端,npm init -y
* 2. 安装 npm install @escook/request-miniprogram
* 3. main.js引入
* import { $http } from '@escook/request-miniprogram'
* uni.$http = $http
* $http.baseURL = 'https://www.baidu.com' // 请求根路径
* 拦截器配置(加载动画等)
* $http.beforeRequest = function(options) {
uni.showLoading({
title: '加载中...'
})
}
$http.afterRequest = function() {
uni.hideLoading()
}
* 4. 页面使用
* async getData() {
* let res = await uni.$http.get('url地址')
* }
*
* uniapp中配置代理(以h5为例)
* 1. manifest.json中添加配置
* "h5": {
"devServer": {
"port": 8080,
"proxy": {
"/api": {
"target": "代理地址",
"changeOrigin": true,
"pathRewrite": {
"/api": ""
}
}
}
}
},
*
* uniapp配置小程序分包
* 1. 根路径下创建分包文件夹 以 packageA为例
* 2. 在pagckageA上右键新建页面,取名goods_detail
* 3. pages.json中配置,与pages同级
* "subPackages": [
{
"root":"packageA",
"pages": [
{
"path":"goods_detail/goods_detail",
"style": {}
}
]
}
]
*
* 自定义封装uni.$showMsg()
* 1. main.js中增加配置
* uni.$showMsg = function(title = '数据加载成功', duration = 1500) {
uni.showToast({
title,
duration,
icon: 'none'
})
}
2. 页面中使用
uni.$showMsg('加载成功啦!!')
*
* uni-app中(上拉加载更多 | 下拉刷新) 配置, 分包中也是同样配置
* 1. pages.json -> pages[] -> style{} -> "onReachBottomDistance": 150
* "style" :
{
"navigationBarTitleText": "首页",
"enablePullDownRefresh": false, // 下拉刷新
"onReachBottomDistance": 150 // 上拉加载更多
}
2. 页面中 onReachBottom() | onPullDownRefresh() 函数实现代码逻辑
onReachBottom() {
console.log('触发了上拉加载')
},
onPullDownRefresh() {
console.log('触发了下拉刷新')
}
*
*/
uniapp开发知识点
最新推荐文章于 2024-04-18 10:01:19 发布