uni-app 是一个使用 Vue.js
(opens new window)
开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台
创建项目
下载sass插件

新建项目 选择uni-ui项目

配置微信小程序APPID

配置微信小程序运行路径
软件偏好设置

微信小程序配置
安全中打开服务窗口

创建页面
page右键创建页面

创建Tabbar

发送请求
官网
安装
npm install @escook/request-miniprogram
|
导入
import { $http } from '@escook/request-miniprogram'
wx.$http = $http
uni.$http = $http
|
使用
支持的请求方法
$http.get(url, data?)
$http.post(url, data?)
$http.put(url, data?)
$http.delete(url, data?)
参数示例请求
async getgoodsinfo(goodsid){ let {data:res}=await uni.$http.get('goods/detail',{ goods_id:goodsid }); if(res.meta.status===200){ this.goodsinfo=res.message; }else{ uni.$showtota(); } }
|
配置请求根路径
$http.baseUrl = 'https://www.example.com'
|
请求拦截器
$http.beforeRequest = function (options) { }
|
例 1,展示 loading 效果:
$http.beforeRequest = function (options) { wx.showLoading({ title: '数据加载中...', }) }
|
例 2,自定义 header 请求头:
$http.beforeRequest = function (options) { if (options.url.indexOf('/home/catitems') !== -1) { options.header = { 'X-Test': 'AAA', } } }
|
响应拦截器
$http.afterRequest = function () { }
|
例如,隐藏 loading 效果:
$http.afterRequest = function () { wx.hideLoading() }
|
示例
main.js
import { $http } from '@escook/request-miniprogram'
uni.$http = $http uni.$showtota
$http.baseUrl = 'https://api-hmugo-web.itheima.net/api/public/v1/'
$http.beforeRequest = function (options){ uni.showLoading({ title:'正在加载...', mask:true }) }
$http.afterRequest = function (res) { uni.hideLoading(); }
|
vue使用
async getswipr() { let { data: res } = await uni.$http.get('home/swiperdata'); if (res.meta.status === 200) { this.swiprelist = res.message; } else { uni.$showtota() } },
|
配置程序分包
把 tabBar 相关的 4 个⻚面放到主包中,其它⻚面(例如:商品详情⻚、商品列表⻚)放到分包中。在 uni-app 项目中,配置分包的步骤如下:
创建文件夹
在项目目录下创建subpkg文件夹
配置json
在pages.json下面配置 这个节点需要和pages同级
"subPackages": [{ "root": "subpkg", "pages": [] }],
|
创建页面
在subpkg右键创建页面

创建完成后 在配置中自动会有配置
本地储存
取
let cate=uni.getStorageSync('cate');
|
放
uni.setStorageSync('cate',res.message);
|
组件
创建组件


使用组件

父传值
item是父信息 <goodsitem :goods="item"></goodsitem>
|
子组件
props: { goods: { type: Object, default: {} } },
|
Iphone头部适配
当 navigationStyle为 custom 时,可以通过 statusBarHeight 获取状态栏高度,单位为 px。
```css .content{ padding-top: var(--status-bar-height); }
|
点击跳转
如:“…/first/first”,“/pages/first/first”,注意不能加 .vue 后缀 参考
<navigator url="../signup/signup" open-type="navigate">注册账户</navigator>
|
返回上一页
//返回上一也页面 back:function(){ uni.navigateBack({ delta: 1 }); }
|
方法跳转
//跳转到搜索 gosearch(){ uni.navigateTo({ url: '../search/search' }); }
|
修改默认导航栏的文字和图标并触发事件
假设我需要在默认的导航栏设置一个更多的点击,需要在阿里图标库中找到合适的图标,然后修改iconfont.css
app-titlenview-buttons app-plus
假设默认如下
@font-face { font-family: "iconfont"; src: url('iconfont.ttf?t=1687597157231') format('truetype'); }
.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.icon-gengduo:before { content: "\ec1c"; }
|
需要在 content中添加u ,如下
官方说明:按钮上显示的文字。使用字体图标时 unicode 字符表示必须 ‘\u’ 开头,如 “\ue123”(注意不能写成"\e123")。
@font-face { font-family: "iconfont"; src: url('iconfont.ttf?t=1687597157231') format('truetype'); }
.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.icon-gengduo:before { content: "\uec1c"; }
|
修改pages.json ,假设给userhome页面添加
text就是 上面修改加 u的内容
{ "path" : "pages/userhome/userhome", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false, "app-plus": { "titleNView": { "buttons": [ { "text": "\uec1c", "fontSrc": "/static/iconfont/iconfont.ttf", "color": "#000", "width":"auto" } ] } } } }
|
点击
onNavigationBarButtonTap: function(e) { console.log(e) }
|
修改默认导航的背景颜色
{ "path" : "pages/userdetails/userdetails", "style" : { "navigationBarBackgroundColor": "#ffffff", } }
|