uni-app 是一个使用 Vue.js

(opens new window)

开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台

创建项目

下载sass插件

image

新建项目 选择uni-ui项目

iShot2022-04-15_10.51.53

配置微信小程序APPID

iShot_2022-09-20_21.06.50

配置微信小程序运行路径

软件偏好设置

iShot2022-04-15_11.03.18

微信小程序配置

安全中打开服务窗口

iShot2022-04-15_11.04.28

创建页面

page右键创建页面

iShot2022-04-15_11.21.40

创建Tabbar

image

发送请求

官网

安装

npm install @escook/request-miniprogram

导入

// 按需导入 $http 对象
import { $http } from '@escook/request-miniprogram'

// 将按需导入的 $http 挂载到 wx 顶级对象之上,方便全局调用
wx.$http = $http

// 在 uni-app 项目中,可以把 $http 挂载到 uni 顶级对象之上,方便全局调用
uni.$http = $http

使用

支持的请求方法

// 发起 GET 请求,data 是可选的参数对象
$http.get(url, data?)

// 发起 POST 请求,data 是可选的参数对象
$http.post(url, data?)

// 发起 PUT 请求,data 是可选的参数对象
$http.put(url, data?)

// 发起 DELETE 请求,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;
//console.log(this.goodsinfo);
}else{
uni.$showtota();
}
}

配置请求根路径

$http.baseUrl = 'https://www.example.com'

请求拦截器

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
// do somethimg...
}

例 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 () {
// do something...
}

例如,隐藏 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();
// //返回请求后的res.data数据
// return res.data;
}

vue使用

//获取轮播图
async getswipr() {
let {
data: res
} = await uni.$http.get('home/swiperdata');
if (res.meta.status === 200) { //成功
this.swiprelist = res.message;
//console.log(this.swiprelist);
} else { //错误
uni.$showtota()
}
},

配置程序分包

把 tabBar 相关的 4 个⻚面放到主包中,其它⻚面(例如:商品详情⻚、商品列表⻚)放到分包中。在 uni-app 项目中,配置分包的步骤如下:

创建文件夹

在项目目录下创建subpkg文件夹

配置json

在pages.json下面配置 这个节点需要和pages同级

"subPackages": [{
"root": "subpkg",
"pages": []
}],

创建页面

在subpkg右键创建页面

iShot2022-04-15_11.21.40

创建完成后 在配置中自动会有配置

本地储存

let cate=uni.getStorageSync('cate');

uni.setStorageSync('cate',res.message);

组件

创建组件

image

iShot2022-04-19_10.35.24

使用组件

image

父传值

item是父信息 
<goodsitem :goods="item"></goodsitem>

子组件

props: {
//一个商品 goods是父传子的属性名
goods: {
type: Object,
default: {}
}
},

Iphone头部适配

navigationStylecustom 时,可以通过 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"; /* Project id */
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"; /* Project id */
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",
}
}