前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序中搜索文件,阅览pdf,分享文件链接,评论表情符号

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

作者头像
hotqin888
发布2018-12-13 16:29:29
9330
发布2018-12-13 16:29:29
举报
文章被收录于专栏:hotqin888的专栏hotqin888的专栏

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1372035

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

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

文章列表

文章正文

检索规范

分享文件链接

好友收到链接

发布文章和图片

评论和点赞

代码语言:javascript
复制
// 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);
      }
    })
  }
})
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018年11月15日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章列表
  • 文章正文
  • 检索规范
  • 分享文件链接
  • 好友收到链接
  • 发布文章和图片
  • 评论和点赞
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档