黑马优购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#getuserprofile


uni.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