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

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

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 小程序
讲述小程序之组件选择器内容
讲述小程序之组件选择器内容
67 0
讲述小程序之组件选择器内容
|
JavaScript 小程序 Android开发
讲述小程序之组件picker(从底部弹起的滚动选择器)
讲述小程序之组件picker(从底部弹起的滚动选择器)
291 0
讲述小程序之组件picker(从底部弹起的滚动选择器)
|
JavaScript 前端开发 小程序
讲述小程序之组件基本内容
讲述小程序之组件基本内容
107 0
讲述小程序之组件基本内容
|
小程序 容器
讲述小程序之组件视图容器之movable-area与movable-view
讲述小程序之组件视图容器之movable-area与movable-view
300 0
讲述小程序之组件视图容器之movable-area与movable-view
|
小程序 容器
讲述小程序之组件视图容器之scroll-view(可滚动视图)
讲述小程序之组件视图容器之scroll-view(可滚动视图)
186 0
讲述小程序之组件视图容器之scroll-view(可滚动视图)
|
小程序 容器
讲述小程序之组件视图容器之swiper(轮播)
讲述小程序之组件视图容器之swiper(轮播)
125 0
讲述小程序之组件视图容器之swiper(轮播)
|
小程序 开发者 容器
讲述小程序之组件视图容器之view
讲述小程序之组件视图容器之view
94 0
讲述小程序之组件视图容器之view
|
数据采集 JSON 小程序
|
10天前
|
存储 编解码 小程序
抖音小程序开发中遇见的坑点
在抖音小程序开发中,需注意10大坑点:遵守小程序限制与规范;解决兼容性问题;优化数据加载速度;适应分享功能限制;处理视频播放挑战;优化图片加载显示;管理资源文件;提升用户体验;考虑安全性;及时更新维护。通过测试、优化和遵循官方文档,可克服这些问题,打造优质小程序。
|
20天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。