博客

一，配置网络请求

1. 下载@escook/request-miniprogram
   
   官网地址
   
2. 命令

npm  init -y // 初始化包
npm install @escook/request-miniprogram // 安装命令

3. 在main.js中引入

import { $http } from '@escook/request-miniprogram'
// 在 uni-app 项目中，可以把 $http 挂载到 uni 顶级对象之上，方便全局调用
uni.$http = $http
// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
   uni.showLoading({
      title:'数据加载中。。。'
   })
}
// 请求完成之后做一些事情
$http.afterRequest = function () {
  uni.hideLoading()
}

二，封装的展示消息提示的方法

    // 在main.js封装
uni.$showMsg = function(title = '数据加载失败！', duration = 1500) {
  uni.showToast({
    title,
    duration,
    icon: "none"
  })
}

// 使用
   if (meta.status !== 200) return uni.$showMsg()

三，uni-app图片请求会报您的连接不是私密连接的错误

         //  由于图片会发送请求，连接不是私密连接  ,需要用replace方法把路径上的dev替换成web 
         // replace() 方法返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern是字符串，则仅替换第一个匹配项。原字符串不会改变。
         // 示例代码
			const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';
			
			console.log(p.replace('dog', 'monkey'));
			// expected output: "The quick brown fox jumps over the lazy monkey. If the dog reacted, was it really lazy?"
			const regex = /Dog/i;
			console.log(p.replace(regex, 'ferret'));
			// expected output: "The quick brown fox jumps over the lazy ferret. If the dog reacted, was it really lazy?"
        // 实际使用
         <image class="cate-lv3-item-image" :src="item3.cat_icon.replace('dev','web')"></image>

四，吸顶效果

1，搜索框固定不随着屏幕上移

2，通过如下的样式实现吸顶的效果 css：

	.search-box {
		  // 设置定位效果为“吸顶”
		  position: sticky;
		  // 吸顶的“位置”
		  top: 0;
		  // 提高层级，防止被轮播图覆盖
		  z-index: 999;
		}

五，uni-app-search搜索框使用

		<uni-search-bar  :radius="100" placeholder="请输入内容" @input="input" cancelButton="none"></uni-search-bar>

六，搜索框防抖

 // 开启防抖
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          // 将输入的值赋给 this.kw
          this.kw = val
        }, 500)

七，搜索关键字加特殊样式

  // 处理数据,关键字加红 message 是服务器返回的数据的数组
      setSuggestHightLight(message){
        // 书写正则规则
         const reg = new RegExp(this.kw,'gi')
         // 把关键字通过span加红
         const hightLight = `<span style="color:#c00000 ;fontSize:16px"><b>${this.kw}</b></span>`
         // 通过forEach遍历数组 替换 关键字
         message.forEach((item)=>{
           // 重新赋值给item.goods_name
           item.goods_name = item.goods_name.replace(reg,hightLight)
         })
         // 把处理好的数据赋值给 this.searchListData数组
           this.searchListData = message
      }

八，搜索历史去重

     // 保存搜索关键词为历史记录
      setSearchHistory() {
          // this.historyList.push(this.kw)
          // 1. 将 Array 数组转化为 Set 对象
          const set = new Set(this.historyList)
          // 2. 调用 Set 对象的 delete 方法，移除对应的元素
          set.delete(this.kw)
          // 3. 调用 Set 对象的 add 方法，向 Set 中添加元素
          set.add(this.kw)
          // 4. 将 Set 对象转化为 Array 数组
          this.historyList = Array.from(set)
           // 翻转数组
          this.historyList = this.historyList.reverse()
        }

九，点击商品详情页的轮播图，大图预览

    // 点击大图预览 ,调用 uni.previewImage() 方法预览
      preview(i) {
        uni.previewImage({
          // 预览时，默认显示图片的索引
          current: i,
          // 所有图片 url 地址的数组，
          urls: this.detailObj.pics.map(x => x.pics_big)
        })
      }

十，为tabBar设置徽标

1，在页面刚显示出来的时候，立即调用 setBadge 方法，为 tabBar 设置数字徽标：

onShow() {
   // 在页面刚展示的时候，设置数字徽标
   this.setBadge()
}

2，在 methods 节点中，声明 setBadge 方法如下，通过 uni.setTabBarBadge() 为 tabBar 设置数字徽标：

methods: {
   setBadge() {
      // 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
      uni.setTabBarBadge({
         index: 2, // 索引
         text: this.total + '' // 注意：text 的值必须是字符串，不能是数字
      })
   }
}

十一，小程序提供的chooseAddress()方法不显示张三地址页面

1. 在manifest.json文件中，找到mp-weixin节点，添加上

   "requiredPrivateInfos": [

         "chooseLocation",

         "getLocation", 

         "chooseAddress"

         ]

十二，uni.showModal()

1. 显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。
2. 示例：

uni.showModal({
	title: '提示',
	content: '这是一个模态弹窗',
	success: function (res) {
		if (res.confirm) {
			console.log('用户点击确定');
		} else if (res.cancel) {
			console.log('用户点击取消');
		}
	}
});

十三，uni.openSetting()

1. 调起客户端小程序设置界面，返回用户设置的操作结果。

uni.openSetting({
  success(res) {
    console.log(res.authSetting)
  }
});

十四，展示倒计时的提示消息

// 展示倒计时的提示消息
showTips(n) {
  // 调用 uni.showToast() 方法，展示提示消息
  uni.showToast({
    // 不展示任何图标
    icon: 'none',
    // 提示的消息
    title: '请登录后再结算！' + n + ' 秒后自动跳转到登录页',
    // 为页面添加透明遮罩，防止点击穿透
    mask: true,
    // 1.5 秒后自动消失
    duration: 1500
  })
}

十五，文本溢出，超过会用三个点代替

 /* 单行文本溢出，用省略号代替 */
  /* display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */

  /* 多行 文本溢出，用省略号代替*/
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;  /* 设置对齐模式 */ 
  -webkit-line-clamp: 2; /* 设置多行的行数 */