一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    uni-app小程序开发记录

    技术 92 2022-08-03 16:16

    前言:最近在用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
              });
              // 以下就可自定义操作了~
            }
          });
    

    文章评论

    评论列表(0