小程序中搜索文件,阅览pdf,分享文件链接,评论表情符号

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/84111389

 小程序主要是作为客户端展示数据,我们在工程上的应用比如:现场设代,检索图纸,查阅规范,查阅监理纪要等。

然后像百度网盘那样,发送文件链接给好友或群,别人可以通过链接直接打开。效果如下:

文章列表

文章正文

检索规范

分享文件链接

好友收到链接

发布文章和图片

评论和点赞

// detail js
//引入本地json数据,这里引入的就是第一步定义的json数据
const app = getApp()
var util = require('../../utils/util.js');
let wxparse = require("../../wxParse/wxParse.js");
Page({
  data: {
    dkheight: 300,
    dkcontent: "",
    leassonTilte: '',
    time: '',
    id: '',
    liked: true,
    inputVal: '',
    hidden: true,
    //画布
    canvasHidden: true, //设置画板的显示与隐藏,画板不隐藏会影响页面正常显示
    shareImgPath: '', //用于储存canvas生成的图片

    page: 2,
    page_size: 10,
    isShowLoadmore: false,
    isShowNoDatasTips: false,
    endloading: false,
    focus: false,

    open: true,

    shop: [],
    shop_item: {},
    shop_num: {},
    //  发表评论
    releaseFocus: true,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    console.log(options)
    this.setData({
      Id: options.id,
      Title: options.title,
      actIndex: options.actIndex
    })
    if (options.actindex=='standard'){
      this.setData({
        Title: options.numtitle,
      })
    }
    // 获得高度
    let winPage = this;
    wx.getSystemInfo({
      success: function(res) {
        let winHeight = res.windowHeight;
        // console.log(winHeight);
        winPage.setData({
          dkheight: winHeight - winHeight * 0.05 - 80
        })
      }
    });
    var that = this;
    //获取用户设备信息,屏幕宽度
    wx.getSystemInfo({
      success: res => {
        that.setData({
          screenWidth: res.screenWidth
        })
        // console.log(that.data.screenWidth)
      }
    })
    // 登录
    // wx.login({
    //   success: res => {
    //     // 发送 res.code 到后台换取 openId, sessionKey, unionId
    //     if (res.code) {
    //       var getData = wx.request({
    //         url: 'https://。。。/v1/wx/getwxarticle/' + options.id,
    //         header: {
    //           "Content-Type": "application/x-www-form-urlencoded"
    //         },
    //         data: {
    //           code: res.code,
    //           app_version: 1.1, //阅览版用的
    //         },
    //         // header: {
    //         //   'content-type': 'application/json' // 默认值
    //         // },
    //         success: function(res) {
    //           that.setData({
    //             dkcontent: res.data.html,
    //             leassonTilte: res.data.title,
    //             time: res.data.time,
    //             author: res.data.author,
    //             views: res.data.Views,
    //             likeNum: res.data.likeNum,
    //             liked: res.data.liked,
    //             comment: res.data.comment,
    //             commentNum: res.data.commentNum,
    //           })

    // 生成画布
    // let promise1 = new Promise(function(resolve, reject) {
    //   wx.getImageInfo({
    //     src: res.data.imgUrl,
    //     success: function(res1) {
    //       // console.log(res1)
    //       resolve(res1);
    //     }
    //   })
    // });
    // let promise2 = new Promise(function(resolve, reject) {
    //   wx.getImageInfo({
    //     src: '../../images/qrcode.jpg',
    //     success: function(res1) {
    //       // console.log(res1)
    //       resolve(res1);
    //     }
    //   })
    // });
    // Promise.all([
    //   promise2
    // ]).then(res1 => {
    // console.log(res1)
    // const ctx = wx.createCanvasContext('shareImg')
    //主要就是计算好各个图文的位置
    // var unit = that.data.screenWidth / 375
    // ctx.setFillStyle('white');
    // ctx.fillRect(0, 0, 600, 880);
    // ctx.drawImage(res1[0].path, 50, 200, 400, 400)
    // ctx.drawImage('../../' + res1[1].path, 350, 610, 160, 160)
    // ctx.drawImage(imgurl, 50, 200, 400, 400)
    // ctx.drawImage(bgImgPath, 350, 610, 160, 160)

    // ctx.setFontSize(28)
    // ctx.setFillStyle('#6F6F6F')
    // ctx.fillText('来自小程序 - 珠三角设代', 30, 660)

    // ctx.setFontSize(30)
    // ctx.setFillStyle('#111111')
    // ctx.fillText('快来围观和发布日志', 30, 710)

    // ctx.setFontSize(22)
    // ctx.fillText('长按扫码进入小程序查看', 30, 750)

    // ctx.setFillStyle('#6F6F6F')
    // ctx.fillText('Author:' + res.data.author, 545 / 2, 100)
    // ctx.setTextAlign('center')
    // ctx.setFontSize(24)
    // ctx.setFillStyle('#111111')
    // ctx.fillText(res.data.title, 545 / 2, 50)
    // ctx.fillText(res.data.word, 545 / 2, 160)
    //   ctx.fillText('……', 60, 190)
    //   ctx.stroke()
    //   ctx.draw()
    // })
    //         }
    //       })
    //     }
    //   }
    // })
    // 查看是否授权
    wx.getSetting({
      success(res) {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function(res) {
              // console.log(res.userInfo)
            }
          })
        }
      }
    })
  },

  bindGetUserInfo(e) {
    console.log(e.detail.userInfo)
  },

  onShareAppMessage: function() {
    // console.log(this.data.id)
    // var that = this;
    return {
      // desc: '最具人气的小程序开发联盟!',
      title: '珠三角设代-分享文件链接',
      path: 'pages/pdfview/pdfview?id=' + this.data.Id + '&title=' + this.data.Title+'&actIndex=' + this.data.actIndex
    }
  },

  //点赞切换
  onUpTap: function(event) {
    var that = this;
    var liked = that.data.liked;
    var likeNum = that.data.likeNum; //当前赞数
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        if (res.code) {
          //发起网络请求
          wx.request({
            url: "https://。。。/v1/wx/addwxlike/" + that.data.id,
            header: {
              "Content-Type": "application/x-www-form-urlencoded"
            },
            method: "POST",
            data: {
              code: res.code,
              liked: liked,
              app_version: 1.2,
            },
            success: function(res) {
              if (!liked) {
                // views: ++this.data.views,
                likeNum++;
                liked = true;
              } else {
                --likeNum;
                liked = false;
              }
              // break;
              that.setData({
                liked: liked,
                likeNum: likeNum,
              })
              // console.log(that.data.views)
              wx.showToast({
                title: that.data.liked ? "点赞成功" : "点赞取消",
                duration: 1000,
                icon: "sucess",
                make: true
              })
            }
          })
        }
      },
    })
  },

  //收藏切换
  onCollectionTap: function(event) {
    //dbpost对象已在onLoad函数中被保存到了this变量中,无需再次实例化
    var newData = this.dbPost.collect();
    //重新绑定数据,注意,不要将整个newData全部作为setData的参数,应当有选择的更新部分数据
    this.setData({
      'post.collectionSataus': newData.collectionStatus,
      'post.collectionNum': newData.collectionNum
    })
    //交互反馈
    wx.showToast({
      title: newData.collectionStatus ? "收藏成功" : "收藏取消",
      duration: 1000,
      icon: "sucess",
      make: true
    })
  },

  // 评论分页加载
  reviewpage: function(e) {
    var that = this;
    var id = this.data.id;
    console.log('qqqqqq')
    console.log(id)
    console.log('-=-=-=')
    var page = this.data.page;
    wx.request({
      url: link.reviewpage,
      method: 'POST',
      data: {
        id: id,
        page: that.data.page,
        page_size: that.data.page_size
      },
      header: {
        'appid': '。。。GJx',
        'mbcore-access-token': wx.getStorageSync('access_token'),
        'mbcore-auth-token': wx.getStorageSync('auth_token')
      },
      success: function(res) {
        console.log(res)
        console.log('→')
        if (res.data.code == 1) {
          var datas = res.data.result.comments;
          if (res.data.result.more_data == 0) {
            that.setData({
              isShowLoadmore: true,
              isShowNoDatasTips: true,
              endloading: true,
            })

          } else {
            console.log('走到这了')
            that.setData({
              release: that.data.release.concat(datas)
            })
            if (datas.length < that.data.page_size) {
              console.log('已经加载完了')
              that.setData({
                isShowLoadmore: false,
                isShowNoDatasTips: false,
              })
            }
          }
          that.setData({
            page: page + 1
          })
        } else {
          console.log('code等于0啊!')
          that.setData({
            isShowLoadmore: false,
            isShowNoDatasTips: false,
          })
        }
      }
    })
  },

  // 发表评论显示/隐藏
  bindrelease: function(e) {
    // console.log(e)
    this.setData({
      releaseFocus: false,
      releaseValue: '', //清空输入框
      focus: true,
    })
    // console.log(this.data.releaseFocus)
  },

  catchhide: function() {
    this.setData({
      releaseFocus: true
    })
    // console.log(this.data.releaseFocus)
  },
  //删除评论
  binddelete1: function(e) {
    var that = this;
    if (wx.getStorageSync('auth_token')) {
      // 判断用户是否登录
      wx.showModal({
        title: '提示',
        content: '确定撤销吗',
        success: function(res) {
          if (res.confirm) {
            console.log('用户点击确定')
            wx.request({
              url: link.binddelete,
              method: 'POST',
              header: {
                'appid': '。。。GJx',
                'mbcore-access-token': wx.getStorageSync('access_token'),
                'mbcore-auth-token': wx.getStorageSync('auth_token')
              },
              data: {
                id: e.currentTarget.dataset.id
              },
              success: function(res) {
                console.log(res)
                var dataid = e.currentTarget.dataset.id;
                var index = e.currentTarget.dataset.index
                // 评论总数 
                var conment_length = res.data.result
                var release = that.data.release;
                release.splice(index, 1)
                that.setData({
                  release: release,
                  releaselength: conment_length
                })
              }
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    } else {
      //去注册登录
      this.userInfoReadyCallback()
    }
  },

  // 登录后才可以发表评论
  // 点击发表评论
  formSubmit1: function(e) {
    console.log(wx.getStorageSync('auth_token'));
    var that = this;
    var id = this.data.id;
    var textareaValue = e.detail.value.input
    console.log(textareaValue)
    if (wx.getStorageSync('auth_token')) {
      if (e.detail.value.input == '') {
        wx.showToast({
          title: '请输入内容',
          icon: 'none'
        })
      } else {
        wx.request({
          url: link.formSubmit,
          data: {
            content: textareaValue,
            msgid: id,
          },
          method: 'POST',
          header: {
            'appid': '。。。GJx',
            'mbcore-access-token': wx.getStorageSync('access_token'),
            'mbcore-auth-token': wx.getStorageSync('auth_token')
          },
          success: function(res) {
            console.log(res)
            console.log('-----')
            console.log(res.data.code)
            if (res.data.code == 0) {
              wx.showToast({
                title: '请输入内容',
                icon: 'none'
              })
            } else {
              //var that = this;
              var textarea_item = {};
              var textareaValue = res.data.result.content;
              var name = res.data.result.username;
              var time = res.data.result.publish_time;
              var avatar = res.data.result.avatar;
              var id = res.data.result.id;
              var like = res.data.result.likes_count;
              var isme = res.data.result.is_me;
              var comments_count = res.data.result.comments_count
              //console.log(release);
              //console.log(that);
              var release = that.data.release;
              textarea_item.content = textareaValue;
              textarea_item.username = name;
              textarea_item.publish_time = time;
              textarea_item.avatar = avatar;
              textarea_item.id = id;
              textarea_item.likes_count = like;
              textarea_item.is_me = isme;
              release.push(textarea_item);
              that.setData({
                release: release,
                releaseFocus: true, //隐藏输入框
                releaseValue: '', //清空输入框内容
                releaselength: comments_count //更新页面发表评论总数
              })
            }
          }
        })
      }
    } else {
      this.userInfoReadyCallback()
    }
  },

  //获取用户信息后加上code 去请求auth- token
  userInfoReadyCallback: function(calback) {
    var that = this;
    //console.log(app.globalData.userInfo);
    util.login().then((res) => {
      //console.log("----------");
      return util.getUserAuthRequest(link.authtoken, {
        code: res.code
      })
    }).then(function(res) {
      //如果needBind 是true 则需要本地缓存paramBind验证手机号时用
      console.log(res.data.result.needBind);
      if (res.data.result.needBind) {
        //为新用户,提示去绑定手机号页面
        var paramBind = wx.getStorageSync('paramBind') || '';
        paramBind = res.data.result.paramBind;
        wx.setStorageSync('paramBind', paramBind);
        wx.showModal({
          title: '提示',
          content: '您尚未登录,点击确定去往手机登录页面,点击取消将无法购买',
          success: function(res) {
            if (res.confirm) {
              wx.navigateTo({
                url: '/pages/bindphone/bindphone'
              })
            } else if (res.cancel) {
              console.log("我点击了取消按钮");
              wx.switchTab({
                url: '/pages/index/index'
              })
            }
          }
        });
        // wx.navigateTo({
        //   url: '/pages/bindphone/bindphone'
        // })
      } else {
        //为老用户,可以正常登录,并本地存储auth_token
        var auth_token = wx.getStorageSync('auth_token') || '';
        auth_token = res.data.result.auth_token;
        wx.setStorageSync('auth_token', auth_token);
        //console.log(wx.getStorageSync('auth_token'));
        if (calback) {
          calback();
        }
      }
    })
  },

  // 添加留言
  formSubmit(e) {
    // console.log(e)
    // console.log(this.data.id)
    var that = this
    if (e.detail.value.input == '') {
      // if (this.data.releaseValue == '') {
      wx.showToast({
        title: '请留言',
      })
      return false;
    }
    var list = this.data.comment;
    // 必须是在用户已经授权的情况下调用
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
          // wx.getUserInfo({
          // success: res => {
          wx.getUserInfo({
            success: function(res) {
              var userInfo = res.userInfo
              var nickName = userInfo.nickName
              var avatarUrl = userInfo.avatarUrl
              var gender = userInfo.gender //性别 0:未知、1:男、2:女
              var province = userInfo.province
              var city = userInfo.city
              var country = userInfo.country
              // console.log(e.detail.value.input)
              // console.log(this.data)
              var a = list ? list : []
              // 调用函数时,传入new Date()参数,返回值是日期和时间  
              var time = util.formatTime(new Date());

              // 登录
              wx.login({
                success: res => {
                  // 发送 res.code 到后台换取 openId, sessionKey, unionId
                  if (res.code) {
                    //发起网络请求
                    wx.request({
                      url: "https://。。。/v1/wx/addwxrelease/" + that.data.id,
                      header: {
                        "Content-Type": "application/x-www-form-urlencoded"
                      },
                      method: "POST",
                      data: {
                        code: res.code,
                        content: e.detail.value.input,
                        username: nickName,
                        publish_time: time,
                        avatar: avatarUrl,
                        app_version: 1.2,
                      },
                      // header: {
                      //   'appid': '。。。GJx',
                      //   'mbcore-access-token': wx.getStorageSync('access_token'),
                      //   'mbcore-auth-token': wx.getStorageSync('auth_token')
                      // },
                      success: function(res) {
                        // 再通过setData更改Page()里面的data,动态更新页面的数据  
                        a.push({
                          content: e.detail.value.input, //this.data.releaseValue
                          username: nickName,
                          is_me: true,
                          publish_time: time,
                          // likes_count: 5,
                          avatar: avatarUrl,
                        })
                        wx.setStorage({
                          key: 'info',
                          data: a,
                        })
                        that.setData({
                          comment: a,
                          releaseValue: '',
                          releaseFocus: true, //隐藏输入框
                          // releaselength: comments_count //更新页面发表评论总数
                        })
                        // console.log(avatarUrl)
                      }
                    })
                  }
                }
              })
            },
          })
        }
      }
    })
  },

  changeinputVal(e) {
    console.log(e.detail)
    this.setData({
      releaseValue: e.detail.value
    })
  },

  // 删除留言
  binddelete(e) {
    var that = this
    var index = e.currentTarget.dataset.index //e.target.dataset.id;
    // console.log(e)
    var comment = that.data.comment
    wx.showModal({
      title: '提示',
      content: '是否删除该条数据',
      success: function(res) {
        if (res.confirm) {

          //发起网络请求
          wx.request({
            url: "https://。。。/v1/wx/deletewxrelease/" + e.currentTarget.dataset.id,
            method: "POST",
            success: function(res) {
              comment.splice(index, 1);
              that.setData({
                comment: comment
              })
              // console.log(that.data.comment)
              wx.showToast({
                title: '删除成功',
              })
            }
          })
        }
      }
    })
  },

  /**
   * 生成分享图
   */
  share: function() {
    var that = this
    //获取用户设备信息设备像素比
    // wx.getSystemInfo({
    //   success: res => {
    //     that.setData({
    //       pixelRatio: res.pixelRatio
    //     })
    //     console.log(that.data.pixelRatio)
    //   }
    // })
    // 本质上就是生成一个更大的图片,因为手机的屏幕设备的像素比现在一般都是超过2的。实际上我们只需要在使用wx.canvasToTempFilePath的时候,设置参数destWidth和destHeight(输出的宽度和高度)为width和height的2倍以上即可。
    wx.showLoading({
      title: '努力生成中...'
    })
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 545,
      height: 771,
      destWidth: 545 * 2,
      destHeight: 771 * 2,
      canvasId: 'shareImg',
      success: function(res) {
        // console.log(res.tempFilePath);
        that.setData({
          prurl: res.tempFilePath,
          hidden: false
        })
        wx.hideLoading()
      },
      fail: function(res) {
        console.log(res)
      }
    })
  },

  /**
   * 保存到相册
   */
  save: function() {
    var that = this
    //生产环境时 记得这里要加入获取相册授权的代码
    wx.saveImageToPhotosAlbum({
      filePath: that.data.prurl,
      success(res) {
        wx.showModal({
          content: '图片已保存到相册,赶紧晒一下吧~',
          showCancel: false,
          confirmText: '好哒',
          confirmColor: '#72B9C3',
          success: function(res) {
            if (res.confirm) {
              // console.log('用户点击确定');
              that.setData({
                hidden: true
              })
            }
          }
        })
      }
    })
  },

  //预览pdf文件
  downloadFile: function(e) {
    console.log(e)
    var that = this;
    // console.log(that.data.actIndex)
    if (that.data.actIndex=='standard') {
      that.setData({
        downloadurl: 'https://。。。/v1/wx/wxstandardpdf/' + e.currentTarget.dataset.id,
      });
    } else {
      that.setData({
        downloadurl: 'https://。。。/v1/wx/wxpdf/' + e.currentTarget.dataset.id,
      });
    };

    wx.downloadFile({
      url: that.data.downloadurl,
      success: function(res) {
        console.log(res)
        const filePath = res.tempFilePath //返回的文件临时地址,用于后面打开本地预览所用
        wx.openDocument({
          filePath: filePath,
          fileType: 'pdf',
          success: function(res) {
            console.log('打开成功');
          },
          fail: function(res) {
            console.log(res);
          }
        })
      },
      fail: function(res) {
        console.log(res);
      }
    })
  }
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏猿人谷

使用鼠标

C语言Windows程序设计 -> 第十一天 -> 使用鼠标 鼠标的使用同样是通过获取Windows鼠标消息来获取用户当前的鼠标状态的。 一、鼠标的介绍 ...

225100
来自专栏数据小魔方

DIY你的菜单和工具栏,订制属于你自己的工作界面!

DIY你的菜单工具栏 订制自己的专属工作界面! 今天是小魔方的第二篇推送,教程是昨晚熬夜写的,但是平台限制订阅号每天只能发送一篇推送,所以才拖到现在! 平时我...

30280
来自专栏Lambda

Bootstrap笔记

Bootstrap简介什么是Bootstrap?框架:库 lib libraryjQuery作为一个框架来讲,提供一套比较便捷的操作DOM的方式把大家都需要的功...

27190
来自专栏猿人谷

Cocoa编程中视图控制器与视图类详解

iPhone编程规则是:一个窗口,多个视图。UIView是iPhone屏幕上很多控件的基础类。每个iPhone用户界面都是由显示在UIWindow(这其实也是个...

25650
来自专栏菩提树下的杨过

Flash/Flex学习笔记(17):按键捕获

先来看简单的单个按键捕获: package { import flash.display.Sprite; import fl.controls.Label...

26590
来自专栏散尽浮华

Html之初体验

概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言。相当于定义统一的一套规则,大...

258100
来自专栏梧雨北辰的开发录

iOS屏幕旋转及其基本适配方法

前段时间抽空总结了一下iOS视频播放的基本用法,发现这其中还有一个我们无法绕过的问题,那就是播放界面的旋转与适配。的确,视频播放与游戏类型的App经常会遇到这个...

1.6K50
来自专栏我分享我快乐

浏览器兼容

先来说说什么是浏览器兼容? 对于很多初学者来说先要知道目前主流的浏览器有IE6、IE8、Mozilla、 FireFox、Opera、Safari、Chrome...

418120
来自专栏全栈架构

看微信小程序 wx.canvasToTempFilePath 方法之巨坑的解决之道

当然这个项目是可以用的,但是生成不了图片,打开 tempFilePath直接报错,发现了什么原因了吗?

33910
来自专栏快乐八哥

jQuery UI Datepicker使用介绍

本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件。jQuery UI带的Datepicker,日历控...

29850

扫码关注云+社区

领取腾讯云代金券