WeChatウィジェットを起動し、カメラの非表示撮影機能を起動します。

8024 ワード

微信小プログラムは最近非常に熱いです。小編は最近新しいプロジェクトを作りました。小プログラム開発試験システムを使って、アプリを使って試験を受ける時にカメラを使って、ユーザーのカンニングを撮影します。
問題
今日は、ユーザーがAppを使って試験を受ける時に、カメラを使って不正行為をしたかどうかを把握することが問題になりました。これも大丈夫です。肝心なのは、ユーザーの試験に邪魔してはいけません。いつ撮ったのか、ユーザーに確認されてはいけません。このシステムは運転免許を取る時の問題点に相当します。最初のマネージャーの要求は、プログラムの外部の携帯電話の撮影機能を呼び出すことです。これは本当に大変です。
解決方法
このような問題が発生したら、必ずホームページのヘルプ文書を探して、カメラを呼び出すモジュールを見つけました。
カメラコンポーネント制御（wx.creaCamera Contect）
説明:
cameraコンテキストcamera Contectオブジェクトを作成して返します。camera Contextはページのcameraコンポーネントと紐付けられています。1ページにはcameraしかないです。これを通じて対応する＜camera/＞コンポーネントを操作できます。カスタマイズされたコンポーネントの下で、最初のパラメータはコンポーネントのインスタンスthisに入ってきて、コンポーネント内のコンポーネントを操作します。
camera Conteet対象の方法一覧：
TaePhotoo
OBJECT
写真を撮って、品質を指定できます。成功したら写真に戻ります。
スターレコード
OBJECT
録画を開始する
stop Record
OBJECT
録画を終えたら、成功したら表紙とビデオに戻ります。
TaePhotooのOBJECTパラメータリスト：
quality
String
いいえ、
イメージングの品質、値はハイ、normal、low、デフォルトのnormalです。
success
Function
いいえ、
インターフェースコール成功のコールバック関数、res={tempImagePath}
fail
Function
いいえ、
インターフェースの呼び出しに失敗したコールバック関数
complettee
Function
いいえ、
インターフェース呼び出しが完了したコールバック関数（コール成功、失敗はいずれも実行されます）
これは写真機能のモジュールがあるのではないですか？公式サイトからのコードを探してみました。
公式サイトコード:
wxmlコード：


<view class="page-body">
<view class="page-body-wrapper">
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<view class="btn-area">
<button type="primary" bindtap="takePhoto">  </button>
</view>
<view class="btn-area">
<button type="primary" bindtap="startRecord">    </button>
</view>
<view class="btn-area">
<button type="primary" bindtap="stopRecord">    </button>
</view>
<view class="preview-tips">  </view>
<image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image>
<video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>
</view>
</view>

jsコード:


Page({
onLoad() {
　　this.ctx = wx.createCameraContext()
},
 
takePhoto() {
　　this.ctx.takePhoto({
　　　　quality: 'high',
　　　　success: (res) => {
　　　　　　this.setData({
　　　　　　　　src: res.tempImagePath
　　　　　　})
　　　　}
　　})
},
 
startRecord() {
　　this.ctx.startRecord({
　　　　success: (res) => {
　　　　　　console.log('startRecord')
　　　　}
　　})
},
 
stopRecord() {
　　this.ctx.stopRecord({
　　　　success: (res) => {
　　　　　　this.setData({
　　　　　　　　src: res.tempThumbPath,
　　　　　　　　videoSrc: res.tempVideoPath
　　　　　　})
　　　　}
　　})
},
error(e) {
　　console.log(e.detail)
}
})

wxcssコード：


.preview-tips {
　　margin: 20rpx 0;
}
.video {
　　margin: 50px auto;
　　width: 100%;
　　height: 300px;
}

このコードを修正してもいいです。私が欲しいのではなく、カメラがないのを隠して、自動で撮影する機能が必要です。
公式サイトのコード分析：<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>これはカメラモジュールです。このモジュールは非表示でなければ、幅が高くても、0でもありません。写真機能は正常に使えます。this.ctx = wx.createCameraContext()これはカメラの画像を取得する機能です。


takePhoto() {
　　this.ctx.takePhoto({
　　　　quality: 'high',
　　　　success: (res) => {
　　　　　　this.setData({
　　　　　　　　src: res.tempImagePath
　　　　　　})
　　　　}
　　})
},

これはカメラ機能です。カメラと一緒に使っていません。カメラを作っても隠していない場合は、単独で呼び出すことができます。
この数行のコードだけで、私が欲しい機能がほぼ実現できます。写真機能はタイマーで単独に呼び出します。隠しカメラの機能が足りないので、公式サイトで探してみます。新しい発見がありますか？
コンポーネントの中にこのようなモジュールがあることを発見しました。
cover-view
説明：オリジナルコンポーネントの上にカバーされたテキストビューは、カバー可能なオリジナルコンポーネントは、map、video、canvas、camera、live-player、live-puserを含み、入れ子のcover-view、cover-imageのみをサポートし、cover-viewでbuttonを使用することができます。
このモジュールは、cover-viewがcameraのコントロールをカバーできるという意味です。
cameraというモジュールもこのような素晴らしい存在です。z-indxレベルではいくら多くてもカバーできません。ここでcover-viewコンポーネントを使います。
最初はどうやって使うのか分かりませんでした。そこでインターネットで調べてみました。ブロ友たちはみんなそう言っています。cover-viewの入れ子はcameraの中に入ればいいです。
つまりこういう意味です。


<camera>
　　<cover-view></cover-view>
</camera>

この効果はいいですが、スペースを取りすぎました。そこで私は「camera」の幅を高く設定しました。
width:10 rpx;
height：14 rpx
隠しない限り、0でなくてもいいです。撮影の解像度は変わらないです。幅と高さだけが変化します。
同様にもカメラを敷き詰めて、背景の色調が周りの色と同じ色になると、隠しカメラの機能に相当します。タイマースナップショットでこの機能が完成します。
完了コード:
wxmlコード：


<view class="page-body">
<view class="page-body-wrapper">
<camera device-position="front" flash="off" binderror="error" class="camera" bindstop='bindstop' binderror='binderror'>
<cover-view class='border_writh'></cover-view>
</camera>
<view class="btn-area">
<button type="primary" bindtap="stoptime">  </button>
</view>
<view class="preview-tips">  </view>
<image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image>
</view>
</view>

wxssコード:


.preview-tips {
　　margin: 20rpx 0;
}
.video {
　　margin: 50px auto;
　　width: 100%;
　　height: 300rpx;
}
.border_writh{
　　width: 30rpx;
　　height: 30rpx;
　　background-color:#1aad19;
}
.camera{
　　position: absolute;
　　top: 5rpx;
　　left: 5rpx;
　　width: 10rpx;
　　height: 14rpx;
}

jsコード:


var time = null;
Page({
/**
*        
*/
data: {
},
onLoad() {
},
//     
setTime: function() {
　　let that = this
　　let ctx = wx.createCameraContext()
　　time = setInterval(function() {
　　　　if (Math.round(Math.random()) == 1) {
　　　　　　console.log('  ')
　　　　　　//  
　　　　　　ctx.takePhoto({
　　　　　　　　quality: 'high',
　　　　　　　　success: (res) => {
　　　　　　　　　　console.log(res.tempImagePath)
　　　　　　　　　　that.setData({
　　　　　　　　　　　　src: res.tempImagePath
　　　　　　　　　　})
　　　　　　　　　　that.localhostimgesupdata(res.tempImagePath)
　　　　　　　　}
　　　　　　})
　　　　}
　　}, 1000 * 10) //       ms
},
//    
localhostimgesupdata: function(imgPath) {
　　console.log('    ')
　　wx.uploadFile({
　　　　url: '', /              
　　　　filePath: imgPath,
　　　　name: 'imgFile',
　　　　success: function(res) {
　　　　　　wx.showToast({
　　　　　　　　title: '      ',
　　　　　　　　icon: 'success',
　　　　　　　　duration: 2000
　　　　　　})
　　　　}
　　})
},
stoptime: function() {
　　console.log('    ')
　　clearInterval(time)
},
bindstop: function() {
　　console.log('     ')
},
binderror: function() {
　　console.log('      ')
},
/**
*       --      
*/
onShow: function() {
　　console.log('  ')
　　//   
　　this.setTime();
},
/**
*       --      
*/
onHide: function() {
　　console.log('  ')
　　clearInterval(time)
},
/**
*       --      
*/
onUnload: function() {
　　console.log('  ')
　　clearInterval(time)
},
})

締め括りをつける
以上は小编が皆さんに绍介したマイクロ手顺で、カメラの非表示撮影机能を呼び出します。皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに皆さんに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。

javaアプリの戻り値の標準化について詳しく説明します。

Spring Cloud Cofig配置センター