黑马优购uni-app

经验一：

由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。@escook/request-miniprogram 的官方文档进行安装、配置、使用https://www.npmjs.com/package/@escook/request-miniprogram最终，在项目的 main.js 入口文件中，通过如下的方式进行配置：import { $http } from '@escook/request-miniprogram'uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'// 请求开始之前做一些事情
$http.beforeRequest = function (options) {uni.showLoading({title: '数据加载中...',})
}// 请求完成之后做一些事情
$http.afterRequest = function () {uni.hideLoading()
}

经验二：

 封装 uni.$showMsg() 方法当数据请求失败之后，经常需要调用 uni.showToast({ /* 配置对象 */ }) 方法来提示用户。此时，可以在全局封装一个 uni.$showMsg() 方法，来简化 uni.showToast() 方法的调用。具体的改造步骤如下：1. 在 main.js 中，为 uni 对象挂载自定义的 $showMsg() 方法：// 封装的展示消息提示的方法
uni.$showMsg = function (title = '数据加载失败！', duration = 1500) {uni.showToast({title,duration,icon: 'none',})
}2. 今后，在需要提示消息的时候，直接调用 uni.$showMsg() 方法即可：async getSwiperList() {const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')if (res.meta.status !== 200) return uni.$showMsg()this.swiperList = res.message
}

经验三：

异步获取系统信息
uni.getSystemInfo(OBJECT);官网文档: https://uniapp.dcloud.net.cn/api/system/info.html#getsysteminfosync

经验四：

 <!-- 使用 uni-ui 提供的搜索组件 --><uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar>官方文档: https://uniapp.dcloud.net.cn/component/uniui/uni-search-bar.html

经验五：

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。uni.setStorageSync(KEY,DATA) 官方文档：https://uniapp.dcloud.net.cn/api/storage/storage.html#setstoragesync

经验六：


开启下拉刷新时，使用该方法uni.stopPullDownRefresh()停止当前页面下拉刷新。官方文档: https://uniapp.dcloud.net.cn/api/ui/pulldown.html#stoppulldownrefresh

经验七：

轮播图的预览效果uni.previewImage(OBJECT)预览图片。官方文档: https://uniapp.dcloud.net.cn/api/media/image.html#unipreviewimageobject

经验八：

在页面结构中，使用 rich-text 组件，将带有 HTML 标签的内容，渲染为小程序的页面结构：rich-text<rich-text :nodes="goods_info.goods_introduce"></rich-text>官方文档: https://uniapp.dcloud.net.cn/component/rich-text.html#rich-text

经验九：

uni-goods-nav 商品导航 商品导航组件主要用于电商类应用底部导航，可自定义加入购物车，购买等操作官方文档:https://ext.dcloud.net.cn/plugin?id=865补充：
<!-- fill 控制右侧按钮的样式 -->
<!-- options 左侧按钮的配置项 -->
<!-- buttonGroup 右侧按钮的配置项 -->
<!-- click 左侧按钮的点击事件处理函数 -->
<!-- buttonClick 右侧按钮的点击事件处理函数 -->

经验十：

uni.setTabBarBadge(OBJECT)为 tabBar 某一项的右上角添加文本。官方文档: https://uniapp.dcloud.net.cn/api/ui/tabbar.html#settabbarbadge

经验十一：

组件名：uni-number-box带加减按钮的数字输入框。<uni-number-box></uni-number-box>
<uni-number-box v-model="vModelValue" ></uni-number-box>
<uni-number-box :min="0" :max="9"></uni-number-box>
<uni-number-box @change="bindChange"></uni-number-box>官方文档: https://uniapp.dcloud.net.cn/component/uniui/uni-number-box.html#%E4%BB%8B%E7%BB%8D

经验十二:

uni-swipe-action通过滑动触发选项的容器官方文档: https://uniapp.dcloud.net.cn/component/uniui/uni-swipe-action.html#%E4%BB%8B%E7%BB%8D

经验十三:

获取用户收货地址。调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址，需要用户授权 scope.address。uni.chooseAddress();官方文档: https://uniapp.dcloud.net.cn/api/other/choose-address.html#chooseaddress

经验十四：

uni.showModal(OBJECT)显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。官方文档: https://uniapp.dcloud.net.cn/api/ui/prompt.html#showmodal

经验十五：

uni.getUserProfile(OBJECT)
获取用户信息。每次请求都会弹出授权窗口，用户同意后返回 userInfo。官方文档: https://uniapp.dcloud.net.cn/api/plugins/login.html#getuserprofileuni.login(OBJECT)官方文档: https://uniapp.dcloud.net.cn/api/plugins/login.html#login

经验十六：

uni.requestPayment(OBJECT)支付官方文档: https://uniapp.dcloud.net.cn/api/plugins/payment.html#requestpayment

黑马优购uni-app相关推荐

黑马优购_微信小程序
黑马优购_微信小程序项目介绍 2021年5月6日-2021年5月12日在校参加微信小程序培训,由黑马讲师授课,能够利用微信提供的组件和API实现轮播图.授权用户信息.上拉加载更多等功能,由于之前对u ...
黑马优购小程序项目详解
黑马优购小程序项目详解 1.准备工作先把wx.request封装好.然后配置路由.把底部的导航配置出来.就是我们的首页.分类.购物车.还有我的,在全局的app.json中配置. {"pag ...
黑马优购小程序之项目搭建
文章目录 1.1 新建项目 1.2 搭建目录结构 1.3 清理无用文件 1.4 搭建项目页面 1.5 搭建tabBar 1.6 初始化页面样式 1.6.1 定义主题颜色和字体 1.6.2 使用定义的主 ...
微信小程序黑马优购讲解
微信小程序黑马优购讲解 1.准备工作 1.首先拿到项目后做好项目搭建 2.搭建基础页面分类页面列表页内容详情页面我的页面意见反馈页面 1.准备工作 1.首先拿到项目后做好项目搭建 (1)搭建 ...
小程序项目——黑马优购
小程序项目--黑马优购 1. 起步 2. tabBar页面 3. 首页 3.1 创建home分支 3.2 配置网络请求 3.3 轮播图区域 3.3.1 获取轮播图的数据 3.3.2 渲染轮播图的UI结 ...
2020黑马程序员之黑马优购小程序
2020黑马优购小程序完成地址,原密地址:https://gitee.com/yangzongtai/uni-shop1.git
黑马优购商城首页的实现
文章目录 1.1效果图 1.2搜索框 1.2.1新建组件 1.2.2编写组件 1.2.3引用组件 1.2.4使用组件 1.2.5效果 1.3轮播图 1.3.1获取网络接口 1.3.1编写轮播图 1.4 ...
小程序黑马优购商城项目讲解
小程序优购商城项目讲解在我们开始之前我们需要配好该项目所需要的接口文档以及配好相应的页面,以免在开发过程中会出现遗漏的问题出现. 首先我们要知道优购是分为4部分的分别为首页/列表/购物车/我的 ...
uni-app 学习笔记黑马优购商城
https://www.escook.cn/docs-uni-shop/ 1.uni-app 和项目搭建 1.1 项目介绍 1.2 文档介绍项目接口文档 1.3 什么是 uni-app 就是基于 v ...
微信小程序黑马优购遇到的问题和心得
案列学习如果不想在consolo中输出可以在中为项目设置这个属性 Flex 如果一行放不下第二个可以让他们换行默认横向布局现在改为纵向布局 align-items: center; just ...

黑马优购uni-app

经验一：

经验二：

经验三：

经验四：

经验五：

经验六：

经验七：

经验八：

经验九：

经验十：

经验十一：

经验十二:

经验十三:

经验十四：

经验十五：

经验十六：

黑马优购uni-app相关推荐

最新文章

热门文章