微信小程序 拍照和相机选择详解
前言：
小程序中获取图片可通过两种方式得到，第一种是直接打开微信内部自己的样式，第一格就是相机拍照，后面是图片，第二种是d框提示用户是要拍照还是从相册选择，下面一一来看。
选择相册要用到wx.chooseImage(OBJECT)函数，具体参数如下：
直接来看打开相机相册的代码：
Page({ data: { tempFilePaths: '' }, onLoad: function () { }, chooseimage: function () { var that = this wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { // 返答乱回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 that.setData({ tempFilePaths: res.tempFilePaths }) } }) }, })
方法一效果图如下：
个人认为第二种用户体验要好一点，效果如下：
点击获取d框提示，代码如下：
Page({ data: { tempFilePaths: '' }, onLoad: function () { }, chooseimage: function () { var that = this wx.showActionSheet({ itemList: ['从相册中选择', '拍照'], itemColor: "#CED63A", success: function (res) { if (!res.cancel) { if (res.tapIndex == 0) { that.chooseWxImage('album') } else if (res.tapIndex == 1) { that.chooseWxImage('camera') } } } }) }, chooseWxImage: function (type) { var that = this wx.chooseImage({ sizeType: ['original', 'compressed'], sourceType: [type], success: function (res) { console.log(res) that.setData({ 清孙档 tempFilePaths: res.tempFilePaths[0], }) } }) } })
文件的临时路径，在小程序本次启动期间可以正常使用，如需持久保存，需在主动调用 wx.saveFile，凯桥在小程序下次启动时才能访问得到。
布局文件：
<button style="margin:30rpx" bindtap="chooseimage">获取图片</button> <image src="{{tempFilePaths }}" catchTap="chooseImageTap" mode="aspectFit" style="width: 100%height: 450rpx" />
主要步骤
获取用户头像
图片模板
图片合成
一、获取用户头像
制作自定如段亏义头像的第一步就是先选择图片。在【海豚趣图】的交互设计中，用户有三种选择图片的方式：微信头像、本地相册和相机拍摄。获取用户头像的燃岁产品设计如下图所示：
1、由于微信官方不再支持通过 wx.getUserInfo 接口来获取用户信息，我们必须通过使用 button 组件并将 open-type 指定为 getUserInfo 类型来获取或展示用户信息。
为优化用户体验，使用 wx.getUserInfo 接口直接d出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法d出授权询问框，默认调用失败。正式版暂不受影响。上图中d出底部菜单的交互方式无法通过 wx.showActionSheet 来实现（因为该接口只能指定字符串文本，不能使用 button, navigator 等组件）。
因此，只能通过自定义 actionSheet 组件来实现以上功能。
mmp-action-sheet 组件
以下是 mmp-action-sheet 组件的代码。
index.wxml
<view hidden="{{!actionShow}}" class="mask {{mask}}"渣神 bindtap="actionHide"> <view class="actionSheet animated {{animation}}"><slot></slot>
<button class="close" bindtap="actionHide">{{closeText}}</button>
</view></view>
2、通过 slot 在 action-sheet 中插入自定义的内容，比如 button、navigator 等。
index.wxss
.mask{ position: fixed top: 0 left: 0 width:100% height: 100% background: rgba(0, 0, 0, 0.5) z-index: 999}.actionSheet{ width: 100% position: absolute top: 100% z-index: 1000 overflow: hidden
}.actionSheet button,.actionSheet navigator{ color: #000 text-align: center background: #fff border-radius: 0 line-height: 3.5 font-size: 32rpx border-bottom: 1rpx solid rgb(236, 236, 236) opacity: 1
}.actionSheet button:active,.actionSheet navigator:active{ color:#000 background: rgb(236, 236, 236)
}.actionSheet button::after,.actionSheet navigator::after{ border: none border-radius: 0
}.actionSheet .close{ border-bottom: none border-bottom: 50rpx solid #fff border-top: 16rpx solid rgb(236, 236, 236)
}.animated { animation-timing-function: ease-out animation-duration: 0.2s animation-fill-mode: both
}@keyframes fadeInBottom {from{ transform: translate3d(0, 0, 0)
} to { transform: translate3d(0, -100%, 0)
}
}.fadeInBottom { animation-name: fadeInBottom
}@keyframes fadeOutBottom {from{ transform: translate3d(0, -100%, 0)
} to { transform: translate3d(0, 0, 0)
}
}.fadeOutBottom { animation-name: fadeOutBottom
}@keyframes fadeIn {from{ opacity: 0
} to { opacity: 1
}
}.fadeIn { animation-name: fadeIn
}@keyframes fadeOut {from{ opacity: 1
} to { opacity: 0
}
}.fadeOut { animation-name: fadeOut
}
index.js
Component({ properties: { actionSheetStatus: { type: Boolean, value: false,observer(newVal) {
if (newVal) {
this.setData({ actionSheetStatus: true, animationMask: 'fadeIn', animationSheet: 'fadeInBottom'
})
} else { this.setData({ actionSheetStatus: false, animationMask: 'fadeOut', animationSheet: 'fadeOutBottom'
})
}
}
}, closeText: { type: String, value: '取消'
}
}, data: { animationMask: 'fadeIn', animationSheet: 'fadeInBottom'
}, methods: {
closeActionSheet() {
this.setData({ animationMask: 'fadeOut', animationSheet: 'fadeOutBottom'
})
setTimeout(() =>{
this.setData({actionSheetStatus: false})
}, 300)
}
}
})
组件只有两个参数：
actionSheetStatus 指定组件的初始展示状态，默认为false，表示不显示组件。
closeText 指定关闭按钮的名字，默认为 取消。
index.json
{ "component": true, "usingComponents": {}}
接下来在页面中调用组件，在组件中插入了3个 button 组件来实现来获取用户头像：
<action-sheet actionSheetStatus="{{actionSheetStatus}}"><button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">使用微信头像</button>
<button bindtap="pickPic" data-source-type="album">使用本地相册</button>
<button bindtap="pickPic" data-source-type="camera">拍照</button>
</action-sheet>
以上我们通过自定义组件 mmp-action-sheet 就解决了原生的 actionsheet 无法指定 button，从而无法获取用户微信头像的问题。
该组件我已经发布到 npm 包，需要用到的同学可以通过 npm 安装，也可以在 github 上查看源码和使用文档。
二、图片模板
有了原图，接下来我们需要选择图片模板。如果模板数量不多或者模板变化不频繁，我们可以直接把模板放在本地。鉴于我提供的模板比较多，放在本地会增大小程序源码的大小，我把模板上传到了小程序的云存储中，通过云函数来动态获取图片模板，方便以后模板扩展。
云函数 tpl 的代码如下：
// 云函数入口文件const cloud = require('wx-server-sdk')cloud.init()// 云函数入口函数exports.main = async (event, context) =>{ const wxContext = cloud.getWXContext() // 1. 获取数据库引用
const db = cloud.database() const MAX_LIMIT = 100
// 2. 构造查询语句
const countResult = await db.collection('template').count() const total = countResult.total // 计算需分几次取
const batchTimes = Math.ceil(total / 100) const tasks = [] for (let i = 0i <batchTimesi++) { const promise = db.collection('template').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()
tasks.push(promise)
} return (await Promise.all(tasks)).reduce((acc, cur) =>{ return {
data: acc.data.concat(cur.data),
errMsg: acc.errMsg,
}
})
}
页面中调用云函数拉取模板：
getTpl() { const self = this// 调用云函数获取图片模板
wx.cloud.callFunction({
name: 'tpl'
}).then(res =>{
self.setData({
templates: res.result.data
})
})
}
三、问题
到这里模板的获取逻辑已经没有问题了，但在开发过程中遇到了一个问题。模板图片的链接我使用的是云文件ID，当有大量图片并行加载的时候，只有部分图片能够显示，我看了一下dom节点其实都已经存在了，image的src的地址也都是正确的。
1、微信官方自2.3.0开始已经支持在image中使用云文件ID。云文件ID的格式为： cloud://xxx.xxx/templates/01.png。我猜测可能是对微信云存储并发请求过多导致的（有知道的同学可以告知），因为我试了一下将云文件ID换成正常的HTTPS的链接是没问题的。
由此可知，可以想到有三种可行的解决方案：
2、将图片模板存储到外部OSS，使用https协议的链接。
3、使用 wx.getTempFileURL 用云文件 ID 换取真实链接，也就是https形式的链接。
4、控制图的并行加载数量。我的实践是将并行加载数量控制在20，当用户滚动的时候再发起下一次请求。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）