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


经验四:

 

  

官方文档: 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



官方文档: https://uniapp.dcloud.net.cn/component/rich-text.html#rich-text

经验九:

uni-goods-nav 商品导航 

商品导航组件主要用于电商类应用底部导航,可自定义加入购物车,购买等操作

官方文档:https://ext.dcloud.net.cn/plugin?id=865


补充:






经验十:

uni.setTabBarBadge(OBJECT)

为 tabBar 某一项的右上角添加文本。

官方文档: https://uniapp.dcloud.net.cn/api/ui/tabbar.html#settabbarbadge

经验十一:

组件名: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

你可能感兴趣的:(uni-app)