多媒体 1月 2,2019

功能介绍

滚动到视频一半的位置，进行切换视频播放
记录所有视频的播放位置，再次切换回来的时候继续播放。
当播放视频滚出可见范围的时候，立刻停止播放（声音停止）。滚动停止的时候新的视频开始播放。
全屏播放。（这里存在一个坑，全屏的时候会立刻自动退出全屏）
基础上拉加载，上拉刷新（demo中未提现，配置下app.json即可实现）

代码解读

/* global getApp Page wx */
const app = getApp()

// 基础版的防抖函数
let timeout
function debounce (func, wait) {
  return function () {
    clearTimeout(timeout)
    timeout = setTimeout(func, wait)
  }
}

// 基础版的节流函数
let timeout2 = null
function throttle (func, wait) {
  return function () {
    if (!timeout2) {
      timeout2 = setTimeout(function () {
        clearTimeout(timeout2)
        timeout2 = null
        func()
      }, wait)
    }
  }
}

Page({
  data: {
    width: wx.getSystemInfoSync().windowWidth,
    height: wx.getSystemInfoSync().windowHeight,

    videoLoading: false,
    videoList: [],

    location: [],
    isLock: false,  // 当前栗子无用，如果有些弹窗控制不住背后的视频列表滚动的话，isLock的作用就发挥出来了。
    localIndex: 0,
    noPageScroll: false
  },
  info: {
    videoPlayDetail: {} // 存放所有视频的播放位置
  },
  onLoad (options) {
    this.getVideoList(1)
  },
  /**
   * 分页获取视频
   */
  getVideoList (initPage) {
    const { videoLoading, videoList } = this.data
    if (videoLoading) {
      return
    }
    this.setData({
      videoLoading: true
    })
    // 制造模拟数据
    let data = [{
      cover: 'https://wx4.sinaimg.cn/mw690/ec4d7780ly1fsvx1996xoj20da07in0t.jpg',
      src: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
      width: 480,
      height: 272,
      title: '腾讯大学视频',
      isPlay: false
    }]
    data = data.concat(data)
    data = data.concat(data)
    data = data.concat(data)

    console.log(data)
    // 模拟请求
    setTimeout(() => {
      this.setData({
        videoList: videoList.concat(this.formatVideoList(data)),
        videoLoading: false
      })
      // 给数据足够的渲染时间，之后进行视频位置的测量
      setTimeout(() => {
        this.getLocationInfo()
        if (initPage) { // 如果是首次进入，就自动播放第一个视频
          this.showVideoList(0)
        }
      }, 1000)
    }, 1000)
  },
  /**
   * 格式化视频列表
   * @param {Array} videoList 需要格式化的视频列表
   */
  formatVideoList (videoList) {
    const { width, height } = this.data
    return videoList.map(value => {
      let styleHight = width * value.height / value.width
      styleHight = styleHight > 0.7 * height ? 0.7 * height : styleHight
      return {
        ...value,
        styleHight: Math.floor(styleHight),
        currentTime: 0,
        isPlay: false
      }
    })
  },
  // 点击播放
  eventPlay (event) {
    const { index } = event.currentTarget.dataset
    this.showVideoList(index)
  },
  // 视频更新的时候不断的去记录播放的位置
  eventPlayupdate (event) {
    const { detail: { currentTime }, currentTarget: { dataset: { index } } } = event

    this.info.videoPlayDetail[index] = currentTime
  },
  // 到底加载更多
  onReachBottom () {
    this.getVideoList()
  },
  // 设置播放的视频
  showVideoList (index) {
    console.log(index)
    let { videoList } = this.data
    videoList = videoList.map(value => {
      value.isPlay = false
      return value
    })
    if (index >= 0 && videoList[index]) {
      videoList[index].isPlay = true
    }
    this.setData({
      videoList
    })
  },
  // 全屏播放，设置当前页面滚动无效，全屏的时候，会触发滚动事件。
  eventFullScreen (event) {
    console.log(event)
    const { fullScreen } = event.detail
    this.setData({
      noPageScroll: fullScreen
    })
  },
  onPageScroll ({ scrollTop }) {
    if (this.data.noPageScroll) {
      return
    }
    // 获取数据分别放置到各自的节流防抖函数中，防止调用的时候数据已近发生改变

    // 节流，每200毫秒触发一次
    throttle(() => {
      console.log('throttle')
      let { location, localIndex, videoList } = this.data
      let index = 0
      for (let i = 0; i < location.length; i++) {
        if (location[i].start <= scrollTop && location[i].end >= scrollTop) {
          index = i
          break
        }
      }

      if (localIndex !== index) {
        videoList[localIndex].currentTime = this.info.videoPlayDetail[localIndex]
        this.setData({
          videoList
        })
        this.showVideoList()
      }
    }, 200)()

    // 防抖，只触发一次
    debounce(() => {
      console.log('debounce')
      let { location, isLock } = this.data
      if (!isLock) {
        let index = 0
        for (let i = 0; i < location.length; i++) {
          if (location[i].start <= scrollTop && location[i].end >= scrollTop) {
            index = i
            break
          }
        }

        this.showVideoList(index)
        this.setData({
          localIndex: index
        })
      }
    }, 200)()
  },
  // 测量当前的所有视频的高度，计算出视频播放与否的位置
  getLocationInfo () {
    const { videoList } = this.data
    var query = wx.createSelectorQuery()
    for (let i = 0; i < videoList.length; i++) {
      query.select(`#video${i}`).boundingClientRect()
    }

    const length = videoList.length
    const location = []
    query.exec(res => {
      console.log(res)

      let start = 0
      let end = 0
      let lei = 0
      for (let i = 0; i < length; i++) {
        if (i === 0) {
          start = 0
          end = videoList[i]['styleHight'] / 2
        } else {
          start = end
          end = lei + videoList[i]['styleHight'] / 2
        }

        location.push({
          start: start,
          end: end
        })
        lei = lei + res[i].height + 10
      }
      this.setData({
        location
      })
    })
  }
})

github地址:https://github.com/kuckboy1994/mp_scroll_play_demo

作者 east

1月 2,2019

微信小程序版“美图秀秀”

在移动时代，我们大量的拍照需要进行修图，而小程序版的“美图秀秀”可以方便解决这个需求，无需下载相关app或发送到电脑，随心所欲美化我们的图片。

使用代码

下载并安装微信开发者工具，使用微信号扫码登录开发者工具。
打开微信开发者工具，点击“小程序项目”按钮，输入小程序 AppID，项目目录选择下载的代码目录，点击确定创建小程序项目。

功能实现

一、图片裁剪

裁剪界面由image组件和裁剪框组成。image组件用来显示用户载入的图片；裁剪框在用户点击裁剪框按钮后浮动显示在图片上，裁剪框的遮罩效果通过背景颜色透明以及盒阴影（box-shadow）实现。
在image组件上检测触摸事件，通过事件对象判断触摸点数，单点触摸时通过获取手指移动距离实现图片的自由拖动，两点触摸时，通过获取两点之间的距离计算图片缩放比例，实现图片自由缩放。
在裁剪框上检测触摸事件，通过获取手指移动距离实现裁剪框自由拖动；监测裁剪框右下圆点的触摸事件，通过获取手指移动距离计算裁剪框宽、高的增减，实现裁剪框的自由缩放功能。
用户裁剪完成（点击右上角√按钮后），根据保存的裁剪框宽、高以及图片缩放比例计算图片真实裁剪区域，根据计算好的区域将图片画在隐藏canvas上，得到裁剪后的图片。

二、添加文字

添加文字界面由image组件、text组件和input组件构成。image组件用来显示用户载入的图片。input组件使用绝对定位隐藏在界面之外（left:-9999px）。text组件用来动态演示用户对文字大小、颜色、样式的调整，当用户点击添加按钮后，text组件弹出。在text组件上监测tap事件，用户点击text组件时，使input组件获得焦点从而调出键盘。在text组件上绑定触摸事件，实现text组件的自由拖动。在input组件上绑定input事件，将text组件的内容与用户输入绑定。
用户添加文字完成（点击右上角√按钮后），根据保存的text组件定位，文字大小、颜色、样式。将文字写在隐藏canvas上（先画原图片，再写文字），得到添加文字后的图片。

三、涂鸦功能

涂鸦界面由canvas组件和image组件构成。在canvas上监测touchmove事件连续画线（ctx.moveTo，ctx.lineTo）实现涂鸦功能。线宽、颜色可以由用户在下方工具栏设置。
由于canvas组件在小程序中层级最高，因此采用动态调整canvas高度的方法显示底部工具菜单栏，即调出和隐藏工具栏时，动态改变canvas的高度。
为了实现橡皮擦和清除功能（不破坏原图），采用将canvas组件覆盖在image组件上，image组件加载涂鸦前的原图，这样使用橡皮檫时擦掉的区域会显示原图。涂鸦完成后（返回主菜单），先保存canvas得到涂鸦图片，然后在隐藏canvas上先绘制涂鸦前的原图，再绘制涂鸦效果图。就能得到完整的涂鸦后的图片了。

四、拼长图

拼长图界面由image组件构成。用户从系统相册选择图片时，将图片的临时路径保存到数组中，而image组件使用列表渲染（wx:for）将数组中的图片全部载入界面，实现拼接的演示效果。在image上绑定longtap事件，长按一张图片后，弹出删除该图片的确认框，确认后在数组中删除该图片的路径，实现删除的演示效果。
保存时，将数组中的图片依次画在隐藏canvas上，所有图片宽度保持一致，高度按图片比例缩放，每张图片的定位由图片的宽高、缩放比计算得到。这样就实现的拼长图的功能。

五、拼相框

拼相框界面由两个image组件和包裹它们的view组件构成。相框为部分区域透明的图片，加载相框的image组件覆盖在加载照片的组件之上，照片就会透过透明区域显示出来。在view组件上监测触摸事件，实现照片的自由拖动和缩放。相框保存宽度全显，而照片能够动态调整，就能实现拼相框的效果了。
保存时，根据照片和相框图片的缩放比例和定位关系，在隐藏canvas中先画照片，再画相框，就就能实现拼相框功能。

六、表情包制作

表情包素材保存在腾讯云存储，进入选择界面后根据链接加载显示缩略图，image使用懒加载，加快素材的渲染。用户选择一个表情素材后，使用wx.downloadFile下载该图片并保存为临时路径。之后的处理实现与添加文字功能相似。

七、保存图片

小程序的所有图片保存都使用隐藏的canvas组件（left:-9999px）完成，根据图片的定位、缩放比、裁剪以及添加的文字的效果等数据在隐藏canvas上作图，并导出临时路径以便进一步处理。
为了保证图片的质量（图片画在canvas上后像素不降低），隐藏canvas的宽高等于图片的实际宽高。即在画布上调用drawImage之前，使用wx.getImageInfo获取需要画的图片的真实宽高，进而调整隐藏canvas的宽高。
用户点击保存按钮后，进入图片预览界面（wx.previewImage），长按图片可选择保存本地相册或者发送给微信朋友。

github地址: https://github.com/nimoat/photo-edit

作者 east

1月 2,2019

婚礼邀请函小程序代码

  小程序制作婚礼邀请函，方便一键发送到朋友和微信群，无缝结合自己社交圈。比网页用户体验好。

项目说明

服务器：阿里云服务
域名：pengmaster.com
数据库：在服务器上装的mysql
后台地址：https://github.com/pengMaster/marry_server
后台统计地址：https://pengmaster.com/party/marry
项目中引用的网络资源若有侵权，请通知及时删除。该小程序为个人开发，一切解释权归作者所有，图片禁止传播。
功能简介：
- 新郎新娘图片展示
- 婚礼现场导航
- 点赞祝福，分享好友
- 身份切换，制作属于自己的请柬

生活需要仪式感

github下载地址:https://github.com/pengMaster/marry

作者 east

1月 2,2019

Github今日榜单小程序

做为一个程序员，日常工作就是上百度、google等搜索，或上github上找类似的开源项目。而提高自己编程技能一个重要途径就是学学github上面的优秀项目。本小程序就是可以方便查看最新github的今日榜单。

微信小程序：Github今日榜单

技术栈

Min Cli: 小程序开发框架，类VUE
MinUI: 小程序UI组件库
es6-promise：提供Promise支持
wx-promise-request：小程序异步网络请求
wemark: 小程序Markdown渲染库
Material Icons: 提供图标支持
Yarn || Npm: 包管理
Webpack、Babel: 打包构建
ES6: JS语法
LESS：CSS 预处理语言
GitHub API、QueryList: 提供数据支持

github下载地址: https://github.com/jae-jae/weapp-github-trending

作者 east

12月 25,2018

仿分答小程序代码

王思聪的一元试听引爆了分答。本小程序模仿分答，

功能：

flex布局

基本使用官方推荐的flex来写布局，结合margin和padding能实现大部分的样式要求。

动态刷新

tabBar的第一个菜单「收听」使用了微信提供的组件scroll-view可滚动视图区域，页面加载后从网络上拉取数据填入视图层同时写入Storage（应该就是html5中的localStorage），滚动到底部时触发更新事件，同时设置标志位防止重复触发。应用官方的加载提示动画。

tip：滚动视图组件的上下滚动用鼠标滚轮，使用鼠标拖动的话很容易触发下拉事件，哪怕并没有到达顶部。滚动视图组件内不要放与内容无关的元素

带参切换页面

点击某个问题进入问题的详情页，同时导航网址带有该问题的编号，具体数据优先从Storage抓取，查询不到就请求后台。同样的，点击个人头像或者个人简介bar进入个人详情页。（未完全完成）

template写视图层模板

找人页面的两个榜单均使用template渲染

github地址:https://github.com/davedavehong/fenda-mock

作者 east

12月 17,2018

高仿vivo商城小程序

最近微信小程序也是挺火的了，看了微信官方文档语法和vue.js有点相似，正好学过vue 也用vue写过一个商城项目，就尝试用小程序写个商城，一般来说你学过vue.js写个小程序那是很简单的，小程序和vue.js无非就是路由跳转、传参、传数据.

如果你想学vue.js可以来看看我用vue.js写的一个商城项目地址在这里
运行需要安装微信开发者工具，在开发者工具中打开该项目则可预览下载地址
另外：此程序会持续更新如果觉可以欢迎各位satr fork Dome地址在这里谢谢大家了~~~

作者 east

工具类 7月 19,2018

微信小程序示例 – 小相册

小相册是结合腾讯云对象存储服务（Cloud Object Service，简称COS）制作的一个微信小程序示例。在代码结构上包含如下两部分：

app: 小相册应用包代码，可直接在微信开发者工具中作为项目打开
server: 搭建的Node服务端代码，作为服务器和app通信，提供 CGI 接口示例用于拉取 COS 图片资源、上传图片到 COS、删除 COS 图片

小相册主要功能如下：

列出 COS 服务器中的图片列表
点击左上角上传图片图标，可以调用相机拍照或从手机相册选择图片，并将选中的图片上传到 COS 服务器中
轻按任意图片，可进入全屏图片预览模式，并可左右滑动切换预览图片
长按任意图片，可将其保存到本地，或从 COS 中删除

部署和运行

拿到了本小程序源码的朋友可以尝试自己运行起来。

整体架构

1. 准备域名和证书

在微信小程序中，所有的网路请求受到严格限制，不满足条件的域名和协议无法请求，具体包括：

只允许和在 MP 中配置好的域名进行通信，如果还没有域名，需要注册一个。
网络请求必须走 HTTPS 协议，所以你还需要为你的域名申请一个 SSL 证书。

腾讯云提供域名注册和证书申请服务，还没有域名或者证书的可以去使用

域名注册好之后，可以登录微信公众平台配置通信域名了。

2. Nginx 和 Node 代码部署

小相册服务要运行，需要进行以下几步：

部署 Nginx，Nginx 的安装和部署请大家自行搜索（注意需要把 SSL 模块也编译进去）
配置 Nginx 反向代理到 http://127.0.0.1:9993
Node 运行环境，可以安装 Node V6.6.0
部署 server 目录的代码到服务器上，如 /data/release/qcloud-applet-album
使用 npm install 安装依赖模块
使用 npm install pm2 -g 安装 pm2

上述环境配置比较麻烦，剪刀石头布的服务器运行代码和配置已经打包成腾讯云 CVM 镜像，推荐大家直接使用。

镜像部署完成之后，云主机上就有运行 WebSocket 服务的基本环境、代码和配置了。

腾讯云用户可以免费领取礼包，体验腾讯云小程序解决方案。

镜像已包含「剪刀石头布」和「小相册」两个小程序的服务器环境与代码，需要体验两个小程序的朋友无需重复部署

3. 配置 HTTPS

镜像中已经部署了 nginx，需要在 /etc/nginx/conf.d 下修改配置中的域名、证书、私钥。

配置完成后，即可启动 nginx。

nginx

4. 域名解析

我们还需要添加域名记录解析到我们的云服务器上，这样才可以使用域名进行 HTTPS 服务。

在腾讯云注册的域名，可以直接使用云解析控制台来添加主机记录，直接选择上面购买的 CVM。

解析生效后，我们在浏览器使用域名就可以进行 HTTPS 访问。

5. 开通和配置 COS

小相册示例的图片资源是存储在 COS 上的，要使用 COS 服务，需要登录 COS 管理控制台，然后在其中完成以下操作：

开通 COS 服务分配得到唯一的APP ID
使用密钥管理生成一对SecretID和SecretKey（用于调用 COS API）
在 Bucket 列表中创建公有读私有写访问权限、CDN加速的 bucket（存储图片的目标容器）
在创建的 bucket 容器中创建文件夹，命名为photos，图片将会上传存储到该目录下

6. 启动小相册示例 Node 服务

在镜像中，小相册示例的 Node 服务代码已部署在目录 /data/release/qcloud-applet-album 下：

进入该目录：

cd /data/release/qcloud-applet-album

在该目录下有个名为config.js的配置文件（如下所示），按注释修改对应的 COS 配置：

module.exports = {
    // Node 监听的端口号
    port: '9993',
    ROUTE_BASE_PATH: '/applet',

    cosAppId: '填写开通 COS 时分配的 APP ID',
    cosSecretId: '填写密钥 SecretID',
    cosSecretKey: '填写密钥 SecretKey',
    cosFileBucket: '填写创建的公有读私有写的bucket名称',
};

代码运行需要临时目录，在部署目录下创建一个临时目录 tmp。

mkdir tmp

小相册示例使用pm2管理 Node 进程，执行以下命令启动 Node 服务：

pm2 start process.json

7. 微信小程序服务器配置

进入微信公众平台管理后台设置服务器配置，配置类似如下设置：

注意：需要将 www.qcloud.la 设置为上面申请的域名，将 downloadFile 合法域名设置为在 COS 管理控制台中自己创建的 bucket 的相应 CDN 加速访问地址，如下图所示：

8. 启动小相册 Demo

在微信开发者工具将小相册应用包源码添加为项目，并把源文件config.js中的通讯域名修改成上面申请的域名。

然后点击调试即可打开小相册 Demo 开始体验。

这里有个问题。截止目前为止，微信小程序提供的上传和下载 API 无法在调试工具中正常工作，需要用手机微信扫码预览体验。

主要功能实现

上传图片

上传图片使用了微信小程序提供的wx.chooseImage(OBJECT)获取需要上传的文件路径，然后调用上传文件接口wx.request(OBJECT)发送 HTTPS POST 请求到自己指定的后台服务器。和传统表单文件上传一样，请求头Content-Type也是multipart/form-data。后台服务器收到请求后，使用 npm 模块 multiparty 解析 multipart/form-data 请求，将解析后的数据保存为指定目录下的临时文件。拿到临时文件的路径后，就可直接调用 COS SDK 提供的文件上传 API 进行图片存储，最后得到图片的存储路径及访问地址（存储的图片路径也可以直接在 COS 管理控制台看到）。

获取图片列表

调用列举目录下文件&目录 API可以获取到在 COS 服务端指定 bucket 和该 bucket 指定路径下存储的图片。

下载和保存图片

指定图片的访问地址，然后调用微信小程序提供的 wx.downloadFile(OBJECT) 和 wx.saveFile(OBJECT) 接口可以直接将图片下载和保存本地。这里要注意图片访问地址的域名需要和服务器配置的 downloadFile 合法域名一致，否则无法下载。

删除图片

删除图片也十分简单，直接调用文件删除 API 就可以将存储在 COS 服务端的图片删除。

git地址:https://github.com/CFETeam/weapp-demo-album

作者 east

标签归档开源项目