讲述小程序之其他常用内容

2022-10-08 92

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 讲述小程序之其他常用内容

textarea（多行输入框）

wxml：

<view><textareaauto-heightplaceholder="自动变高"/></view><view><textareaplaceholder="提示颜色是红色的"placeholder-style="color:red;"/></view><view><textareaplaceholder="这是一个可以自动聚焦的textarea"auto-focus/></view><view><textareaplaceholder="这个只有在按钮点击的时候才聚焦"focus="{{focus}}"/><view><buttonbindtap="bindButtonTap">使得输入框获取焦点</button></view></view><view><formbindsubmit="bindFormSubmit"><textareaplaceholder="form 中的 textarea"name="textarea"/></form></view>

效果：当我们用手机点击时会触发不同的效果！

媒体组件

1.image（存放图片组件）

这里的图片路径是我之前传在我的云端中的

<imagesrc="cloud://xinwen-0gefvi6q76e983c0.7869-xinwen-0gefvi6q76e983c0-1312066094/img/1656144106002.jpg"></image>

2.video（存视频组件）

用法和image相同也是：src导入路径即可

<videosrc=""></video>

3.camera（系统相机）

功能：

扫码二维码功能，需升级微信客户端至6.7.3。需要用户授权scope.camera。 2.10.0起 initdone 事件返回 maxZoom，最大变焦范围，相关接口 CameraContext.setZoom。

wxml：

<cameradevice-position="back"flash="off"binderror="error"style="width: 100%; height: 300px;"></camera><buttontype="primary"bindtap="takePhoto">拍照</button><view>预览</view><imagemode="widthFix"src="{{src}}"></image>

js：

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