前言：最近在用uni-app学习并开发一些小应用，

顺便记录下开发和学习过程中遇到的一些坑，方便以后避免

1.uni-swiper-dot 轮播图

设置默认值的坑：需要在swiper上设置current

默认值才生效

完整代码：

    <uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
      <swiper class="swiper-box" @change="paperChange" :current="current">
        <swiper-item v-for="(item ,index) in info" :key="index">
          <view class="swiper-item">
            <img class="paperImg" :src="item.cover_image" alt />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

2.APP取消顶部导航栏

在page.json中的pages中添加 即可

    {
      "path": "pages/detail/detail",
      "style": {
        "app-plus": {
          //app配置自定义导航
          "titleNView": false //app禁止使用原生导航
        }
      }
    },

3.小程序取消顶部的导航条

在page.json中的pages中添加 即可

      "path": "pages/detail/detail",
      "style": {
      "navigationStyle":"custom"  
      }

效果图在下面：图片的效果很好

4.uni-app 小程序下载图片

正常来讲 首先要授权

    downImg() {
      let that = this;
      //获取相册授权
      uni.getSetting({
        success(res) {
          if (!res.authSetting["scope.writePhotosAlbum"]) {
            uni.authorize({
              scope: "scope.writePhotosAlbum",
              success() {
                //这里是用户同意授权后的回调
                that.saveImgToLocal();
              },
              fail(err) {
                console.log(err);
                //这里是用户拒绝授权后的回调
                uni.showToast({
                  title: "授权失败"
                });
              }
            });
          } else {
            //用户已经授权过了
            that.saveImgToLocal();
          }
        }
      });
    },

授权之后的方法：saveImgToLocal

    saveImgToLocal() {
      uni.showModal({
        title: "提示",
        content: "确定保存到相册吗",
        success: res => {
          if (res.confirm) {
            uni.downloadFile({
              // this.imgDetail, //图片地址
              url: "https://biaoblog.cn:5000/uploads/test1.jpg",
              success: res => {
                if (res.statusCode === 200) {
                  uni.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success: function() {
                      uni.showToast({
                        title: "保存成功",
                        icon: "none"
                      });
                    },
                    fail: function(err) {
                      console.log(err);
                      alert(err);
                      uni.showToast({
                        title: "保存失败",
                        icon: "none"
                      });
                    }
                  });
                }
              }
            });
          } else if (res.cancel) {
          }
        }
      });
    },

需要注意的是，

这里的下载图片 需要在微信公众平台设置 域名 白名单

否则 上面的代码只能在微信开发者工具中正常work

无法真机模拟

然后又一个坑 域名是需要https的

我们之前没有搞过证书，

所以需要搞一下https证书

关于https证书的配置 可以参考我的这篇文章 https之ssl证书配置前端+后端（koa）

5.uni-app 小程序 触底加载

之前用了自己封装的触底原生发生 浏览器触底判断（添加防抖）

但是不能在小程序中触发 所以搜了一下文档：

两步轻松实现：

第一步：

首先，在page.json的style下设置

  "pages": [
    //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/home/home",
      "style": {
        "navigationBarTitleText": "",
        //触底触发相关配置
        "enablePullDownRefresh": true, //设置参数为true
        "onReachBottomDistance": 20 //距离底部多远时触发 单位为px
      }
    },

第二步：

在home页面下 添加钩子：（跟mounted同级）

  onReachBottom() {
    console.log("已触底");
  },

然后就OK了 下课！

6.uni-app 小程序 分享功能（分享朋友圈和分享页）

分享朋友圈：

  // 分享到朋友圈

  onShareTimeline() {
    return {
      title: "游走在你指尖的壁纸，指尖壁纸",
      path: "/pages/home/home",
      imageUrl: "/static/imgs/logo2.jpeg"
    };
  },

首先分享分两种形式

第一种右上角菜单分享

第二种按钮分享（必须是用户点击触发）

按钮触发：

 <button open-type="share">分享</button>

然后是右上角触发：这个钩子跟mounted同级 可以判断分享是从按钮还是右上角

以及可以自定义一些参数

  onShareAppMessage(res) {
    if (res.from === "button") {
      // 来自页面内分享按钮
      console.log(res.target);
      return {
        title: "x",
        path: "/pages/home/home",
        imageUrl: "/static/imgs/logo2.jpeg"
      };
    }
    return {
      title: "x",
      path: "/pages/home/home",
      imageUrl: "/static/imgs/logo2.jpeg"
    };
  },

有个问题 在自定义分享按钮的时候 它一直有个边框 很丑 取消不掉

除了设置：border-color,background,out-line以外 还需要给按钮的伪类的border设置为none

#shareBtn {
  background: transparent;
  font-size: 12px;
  color: white;
  line-height: normal;
  padding: 0;
  border: none;
  height: 40px;
  position: absolute;
  width: 57px;
  line-height: 61px;
  top: 3px;
  background-color: transparent;
  border-color: transparent;
  outline: none;
}

#shareBtn::after {
  border: none;
}

7.uni-app 小程序下拉刷新功能

第一步跟下拉触底加载一样 在page配置中添加：enablePullDownRefresh

然后第二步在页面中添加钩子：(跟mounted同级)

  onPullDownRefresh() {
    console.log("下拉刷新");
    setTimeout(() => {
      uni.stopPullDownRefresh(); // 关闭下拉刷新
    }, 500);
  }

8.uni-app 小程序获取用户唯一标实 openid

主要是因为 我们要做一个收藏的功能，这个收藏的功能需要获得用户的唯一标实，才能进行存储

废话不多说：

第一步：

wx.login 先获取一些必要参数：

第二步：通过接口：https://api.weixin.qq.com/sns/jscode2session 获取openid

需要注意的是，这块的pai官网是不允许在小程序中直接调用的

我们的解决方案就是把这个接口 写在我们的后台，然后前端调用即可

     wx.login({
            success: res => {
              // 发送 res.code 到后台换取 openId, sessionKey
              if (res.code) {
                console.log(res);
                // this.debug = res.code;
                //https://api.weixin.qq.com/sns/jscode2session这个接口不能在微信小程序内使用
                //解决方案就是单独写一个后端接口来处理
                wx.request({
                  url: "https://api.weixin.qq.com/sns/jscode2session", //微信服务器获取appid的网址 不用变
                  method: "post", //必须是post方法
                  data: {
                    js_code: res.code,
                    appid: "xxx", //仅为实例appid
                    secret: "xxx", //仅为实例secret
                    grant_type: "authorization_code" //不变
                  },
                  header: {
                    "content-type": "application/x-www-form-urlencoded"
                  },
                  success: response => {
                    console.log(
                      "response.data.openid:::",
                      response.data.openid
                    );

                    userInfo = {
                      ...userInfo,
                      app_openid: response.data.openid,
                      sessionKey: response.data.session_key
                    };
                    this.debug = JSON.stringify(userInfo);
                    uni.setStorage({
                      key: "userInfo",
                      data: userInfo,
                      success: () => {
                        this.userInfo = userInfo;
                      }
                    });
                  },
                  fail: err => {
                    // this.debug = "jscode2session ERR::::" + JSON.stringify(err);
                  }
                });
              } else {
                this.debug = "登陆失败";
                console.log("登陆失败");
              }
            }
          });

9.uni-app 通过navigateBack 返回上上一级 并传递参数

需求就是需要在详情页面执行某个操作

然后回到上一级页面，把执行过操作的某个数据 从上一级的列表中过滤掉 而不是重新获取数据

因为这个列表页面 存在滚动分页，重新请求数据就很繁琐且体验很差

第一步：在返回的页面通过getCurrentPages获取上一级页面 然后setData

       // 返回上一级时 把removeCollectId传递给收藏页
        var pages = getCurrentPages();
        // console.log(pages);
        var prevPage = pages[pages.length - 2]; //上一个页面
        // console.log(prevPage);
        //直接调用上一个页面的setData()方法，把数据存到上一个页面中去
        prevPage.setData({
          removeCollectId: this.removeCollectId
        });
        uni.navigateBack("/pages/home/home");

第二步在返回的页面中，接受这个参数

  onShow: function(option) {
    let pages = getCurrentPages();
    let currPage = pages[pages.length - 1]; //当前页面
    let removeCollectId = currPage.data.removeCollectId;
    if (removeCollectId) {
         //做一些事情
     }
      },

最终取消这个方案了 因为返回上一步的回调监听不到 所以很麻烦

最终采用了 缓存的方法解决

10.uni-app 分享详情页面回退

有时候我们的详情页面是直接分享出去的，

那么我们在开发中 一般都使用navigateBack 返回上一级

但是如果分享的是详情页面 就不存在上一级

我们需要通过 switchTab来跳转到tab首页

uni.switchTab({
          url: "/pages/home/home"
        });

那么为何判断是否分享呢？很简单

只需要在分享页面的时候 加一个参数进去

然后在页面的onload里面获取这个参数就知道是否是分享了

然后根据这个标实 来进行不同的跳转方式

以下是详情页面的分享钩子：

  onShareAppMessage(res) {
    let detail = JSON.stringify(this.detail);
    if (res.from === "button") {
      // 来自页面内分享按钮
      console.log(res.target);
      return {
        title: "游走在你指尖的壁纸，指尖壁纸",
        path: `/pages/detail/detail?share=true`
        // imageUrl: this.imgDetail
      };
    }
    return {
      title: "游走在你指尖的壁纸，指尖壁纸",
      path: `/pages/detail/detail?share=true`
      // imageUrl: this.imgDetail
    };
  },

11.uni-app 复制内容：

      uni.setClipboardData({
        data: "shinibiaoge",
        success: function() {
          // 重点~做笔记
          // 在success中加入uni.hideToast()可以解决
          uni.showToast({
            title: "微信号已复制",
            duration: 1000
          });
          // 以下就可自定义操作了~
        }
      });