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) } })
效果显示: