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

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

textarea(多行输入框)

image.png

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>

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

image.png

媒体组件

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.camera2.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)
  }
})

效果显示:

34.gif










目录
相关文章
|
JavaScript 小程序
讲述小程序之组件选择器内容
讲述小程序之组件选择器内容
204 0
讲述小程序之组件选择器内容
|
JavaScript 小程序 Android开发
讲述小程序之组件picker(从底部弹起的滚动选择器)
讲述小程序之组件picker(从底部弹起的滚动选择器)
607 0
讲述小程序之组件picker(从底部弹起的滚动选择器)
|
JavaScript 前端开发 小程序
讲述小程序之组件基本内容
讲述小程序之组件基本内容
235 0
讲述小程序之组件基本内容
|
小程序 容器
讲述小程序之组件视图容器之movable-area与movable-view
讲述小程序之组件视图容器之movable-area与movable-view
832 0
讲述小程序之组件视图容器之movable-area与movable-view
|
小程序 容器
讲述小程序之组件视图容器之scroll-view(可滚动视图)
讲述小程序之组件视图容器之scroll-view(可滚动视图)
471 0
讲述小程序之组件视图容器之scroll-view(可滚动视图)
|
小程序 容器
讲述小程序之组件视图容器之swiper(轮播)
讲述小程序之组件视图容器之swiper(轮播)
297 0
讲述小程序之组件视图容器之swiper(轮播)
|
小程序 开发者 容器
讲述小程序之组件视图容器之view
讲述小程序之组件视图容器之view
283 0
讲述小程序之组件视图容器之view
|
数据采集 JSON 小程序
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
765 0
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
405 0
在线课堂+工具组件小程序uniapp移动端源码

热门文章

最新文章