相机camera
https://developers.weixin.qq.com/miniprogram/dev/component/camera.html创建一个相机
<!-- 相机组件 -->
<camera class="box"></camera>
<!-- 点击拍照 -->
<button type="primary" bindtap="takePhotoFn">拍照</button>
<!-- 照片拍摄后如果成功，显示出来 -->
<image src="{{photo}}" wx:if="{{photo}}"></image>写一个样式，相机大小
.box{
width: 100%;
height: 600rpx;
}写拍照事件
// 数据存放照片和录像地址
data: {
photo:"",
videosrc:""
},
takePhotoFn(){
// takePhoto开始拍摄照片
this.ctx.takePhoto({
// quality照片质量
quality:"high",
// 拍照成功的回调函数，参数result
success:(result)=>{
console.log(result);
this.setData({
// result.tempImagePath照片临时路径
photo:result.tempImagePath
})
// 保存图片到系统相册。
wx.saveImageToPhotosAlbum({
// filePath图片文件路径，可以是临时文件路径或永久文件路径 (本地路径) ，不支持网络路径
filePath: result.tempImagePath,
// 接口调用成功的回调函数
success:(result2)=>{
console.log(result2);
}
})
}
})
},
/*** 生命周期函数--监听页面初次渲染完成*/
// CameraContext 实例，可通过 wx.createCameraContext 获取。
// CameraContext 与页面内唯一的 camera 组件绑定，操作对应的 camera 组件
onReady: function () {
this.ctx=wx.createCameraContext()
},录像机
与相机一样
创建
<!-- 相机组件 -->
<camera class="box"></camera>
<button bindtap="startRecordFn">开始录像</button>
<button bindtap="stopRecordFn">结束录像</button>
<!-- 视频拍摄后显示出来，controls显示控件 -->
<video src="{{videosrc}}" wx:if="{{videosrc}}" controls></video>事件
// 开始录像函数
startRecordFn(){
// startRecord开始录像api
this.ctx.startRecord()
},
// 结束录像函数
stopRecordFn(){
// stopRecord结束录像api
this.ctx.stopRecord({
// 成功回调函数
success:(result)=>{
// result返回tempThumbPath封面图片和tempVideoPath视频两个临时地址
console.log(result.tempVideoPath);
// 将临时视频地址给数据渲染页面
this.setData({
videosrc:result.tempVideoPath
})
// saveVideoToPhotosAlbum保存视频到系统相册。支持mp4视频格式
wx.saveVideoToPhotosAlbum({
// filePath视频文件路径，可以是临时文件路径也可以是永久文件路径 (本地路径)
filePath:result.tempVideoPath,
// 接口调用成功的回调函数
success:(result2)=>{
console.log(result2);
}
})
}
})
},
/*** 生命周期函数--监听页面初次渲染完成*/
// CameraContext 实例，可通过 wx.createCameraContext 获取。
// CameraContext 与页面内唯一的 camera 组件绑定，操作对应的 camera 组件
onReady: function () {
this.ctx=wx.createCameraContext()
},获取设备的数据，相机满屏
去除小程序上导航样式
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html#%E9%85%8D%E7%BD%AE%E9%A1%B9在camera2.json文件中
{
//导航栏样式，仅支持以下值：
//default 默认样式
//custom 自定义导航栏，只保留右上角胶囊按钮。
"navigationStyle": "custom"
}页面结构
<!-- flash闪光灯，值为 auto , on, off -->
<!-- device-position摄像头朝向front 前置,back 后置 -->
<camera style="height: {{winH}}px; width: {{winW}}px;"
flash="{{flash}}"
device-position="{{device}}"
></camera>
<!--cover-view 覆盖在原生组件之上的文本视图。写定位显示相机之上 -->
<cover-view class="takePhoto" bindtap="takePhotoFn"></cover-view>
<!-- 拍照后显示的小图 -->
<image src="{{photo}}" class="img"></image>
<!-- 点击切换前置后置摄像头 -->
<cover-view class="changecamera" bindtap="takedeviceFn">换</cover-view>
<!-- 按钮打开手电筒 -->
<cover-view class="changeshou" bindtap="openflash">灯</cover-view>页面逻辑
// pages/camera/camera2.js
Page({
/**
* 页面的初始数据
*/
data: {
winH:0,
winW:0,
photo:"",
device:"back",
flash:"off"
},
takePhotoFn(){
this.ctx.takePhoto({
quality:"high",
success:(result)=>{
console.log(result);
this.setData({
photo:result.tempImagePath
})
wx.saveImageToPhotosAlbum({
filePath: result.tempImagePath,
success:(result2)=>{
console.log(result2);
}
})
}
})
},
// 设置摄像头朝向front 前置,back 后置
takedeviceFn(){
if (this.data.device=="back") {
this.setData({
device:"front"
})
}else{
this.setData({
device:"back"
})
}
},
// 手电筒
openflash(){
if (this.data.flash=="off") {
this.setData({
flash:"torch"
})
}else{
this.setData({
flash:"off"
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 获取设备的像素数据
//
wx.getSystemInfo({
success: (result) => {
console.log(result);
this.setData({
// 屏幕宽度，单位px
winH:result.screenHeight,
// 屏幕高度，单位px
winW:result.screenWidth
})
},
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
// 创建一个相机实例
this.ctx=wx.createCameraContext()
},
})// 获取设备的像素数据
https://developers.weixin.qq.com/miniprogram/dev/api/base/system/wx.getSystemInfo.htmlcover-view覆盖在原生组件之上的文本视图。
覆盖在原生组件之上的文本视图。
可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher
只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html在线生成二维码
草料二维码
https://cli.im/微信扫一扫
调起客户端扫码界面进行扫码wx.scanCode()
https://developers.weixin.qq.com/miniprogram/dev/api/device/scan/wx.scanCode.html页面结构
<button bindtap="scanCodeFn" style="margin-top: 200rpx;" type="primary">扫一扫</button>
<!-- 把内容显示到页面 -->
<view style="font-size: 100rpx;">{{msg}}</view>页面逻辑
/**
* 页面的初始数据
*/
data: {
msg:""
},
// 扫一扫事件
scanCodeFn(){
// 调起客户端扫码界面进行扫码
wx.scanCode({
// 是否只能从相机扫码，不允许从相册选择图片
onlyFromCamera: true,
// 接口调用成功的回调函数
success:(result)=>{
console.log(result);
this.setData({
// result参数result所扫码的内容
msg:result.result
})
// 扫码内容==好谷学堂进行跳转页面
if(result.result=="好谷学堂"){
wx.navigateTo({
url: '../camera2/camera2',
})
}
}
})
},地图map
声明地图用途
在app.json中声明
"permission": {
"scope.userLocation": {
"desc": "玩的啊"
}页面结构
<map style="height: {{winH}}px; width: {{winW}}px;" longitude="{{longitude}}" scale="16" latitude="{{latitude}}" markers="{{markers}}"></map>
<!-- longitude中心经度 -->
<!-- latitude中心纬度 -->
<!-- markers标记点 -->
<!-- scale缩放级别，取值范围为3-20 -->页面逻辑
/**
* 页面的初始数据
*/
data: {
winH:0,
winW:0,
//经纬度
longitude:"118.767413",
latitude:"32.041544",
markers:[]
},
getAddressFn(){
console.log(111111);
//getLocation 获取当前的地理位置、速度。
wx.getLocation({
// 传入 true 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度
altitude: true,
// wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
type:"wgs84",
success:(res)=>{
console.log(res);
this.setData({
longitude:res.longitude,
latitude:res.latitude,
// 标记点Array.
markers:[{
// marker 点击事件回调会返回此 id。
id:"0",
// 经度、浮点数，范围 -180 ~ 180
longitude:res.longitude,
// 纬度、浮点数，范围 -90 ~ 90
latitude:res.latitude,
// 点击时显示，callout 存在时将被忽略
title:"家",
// 显示的图标
iconPath:"https://img2.baidu.com/it/u=3272069004,398045347&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=616"
}]
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//执行函数
this.getAddressFn()
//获取设备宽高
wx.getSystemInfo({
success: (result) => {
console.log(result);
this.setData({
winH:result.screenHeight,
winW:result.screenWidth
})
},
})
},
229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
