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

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

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 小程序
讲述小程序之组件选择器内容
讲述小程序之组件选择器内容
93 0
讲述小程序之组件选择器内容
|
JavaScript 小程序 Android开发
讲述小程序之组件picker(从底部弹起的滚动选择器)
讲述小程序之组件picker(从底部弹起的滚动选择器)
369 0
讲述小程序之组件picker(从底部弹起的滚动选择器)
|
JavaScript 前端开发 小程序
讲述小程序之组件基本内容
讲述小程序之组件基本内容
136 0
讲述小程序之组件基本内容
|
小程序 容器
讲述小程序之组件视图容器之movable-area与movable-view
讲述小程序之组件视图容器之movable-area与movable-view
398 0
讲述小程序之组件视图容器之movable-area与movable-view
|
小程序 容器
讲述小程序之组件视图容器之scroll-view(可滚动视图)
讲述小程序之组件视图容器之scroll-view(可滚动视图)
254 0
讲述小程序之组件视图容器之scroll-view(可滚动视图)
|
小程序 容器
讲述小程序之组件视图容器之swiper(轮播)
讲述小程序之组件视图容器之swiper(轮播)
153 0
讲述小程序之组件视图容器之swiper(轮播)
|
小程序 开发者 容器
讲述小程序之组件视图容器之view
讲述小程序之组件视图容器之view
132 0
讲述小程序之组件视图容器之view
|
数据采集 JSON 小程序
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
263 3
|
2月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
52 0
微信小程序更新提醒uniapp