【uni-app教程】UniAPP 常用组件和 常用 API 简介# 知心姐姐聊天案例
五、UniAPP 常用组件简介
uni-app 为开发者提供了一系列基础组件，类似 HTML 里的基础标签元素，但 uni-app 的组件与 HTML 不同，而是与小程序相同，更适合手机端使用。
虽然不推荐使用 HTML 标签，但实际上如果开发者写了
div等标签，在编译到非H5平台时也会被编译器转换为view标签，类似的还有span转text、a转navigator等，包括 css 里的元素选择器也会转，但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。
开发者可以通过组合这些基础组件进行快速开发， 基于内置的基础组件，可以开发各种扩展组件，组件规范与vue组件相同。
案例：知心姐姐布局实现
<template><view class="container"><!-- 聊天列表 --><view class="chat-body"><block v-for="(item, index) in chatList" :key="index"><view class="chat-one" v-if="!item.isMe"><image class="chat-face" src="@/static/faces/head1.jpeg" /><view class="chat-box"><view class="chat-sender">知心姐姐</view><view class="chat-content" v-if="item.type === 'txt'">{{item.content}}</view><image class="chat-img" v-if="item.type === 'img'" :src="item.content" mode='widthFix' /></view></view><view v-else class="chat-one chat-one-mine"><view class="chat-box"><view class="chat-content" v-if="item.type === 'txt'">{{item.content}}</view><image class="chat-img" v-if="item.type === 'img'" :src="item.content" mode='widthFix' /></view><image class="chat-face" src="@/static/faces/head2.jpeg" /></view></block></view><!-- 聊天输入 --><view class="chat-footer"><input class="msg-input" type="text" cursor-spacing="16" v-model="myInput"/><image class="img-chose" src="@/static/img.png" @click="choseImgAndSend"/><view class="send-btn" @click="sendMsg">发送</view></view></view>
</template>
css样式
<style lang="scss" scoped>.container {background-color: #f1f1f1;min-height: 100vh;}.chat-body {padding-bottom: 178upx;.chat-time {text-align: center;color: #888;padding: 40upx 0 0;}.chat-one {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;padding: 20upx 0;}.chat-one-begin {padding: 40upx 0 0;}.chat-one-mine {justify-content: flex-end;}.chat-face {width: 84upx;height: 84upx;border-radius: 10upx;margin-left: 40upx;}.chat-one-mine .chat-face {margin-left: 0;margin-right: 40upx;}.chat-box {max-width: calc(100% - 290upx);margin-left: 20upx;font-size: 30upx;}.chat-one-mine .chat-box {margin-right: 20upx;}.chat-sender {color: #888;font-size: 28upx;margin-top: -8upx;margin-bottom: 10upx;}.chat-content {background-color: #fff;border-radius: 5px;padding: 10px;.micon {margin-right: 20upx;color: #666;}}.chat-img {float: left;max-width: 60%;border-radius: 5px;}.chat-one-mine .chat-img {float: right;}}.chat-footer {width: 670upx;padding: 0 40upx;height: 120upx;position: fixed;bottom: 0;left: 0;background-color: #f1f1f1;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;align-items: center;align-content: center;border-top: 1upx solid #ddd;.msg-input {background-color: #fff;width: calc(100% - 300upx);height: 70upx;line-height: 70upx;font-size: 30upx;border-radius: 10upx;padding: 0 20upx;}.img-chose{height: 70upx;width: 70upx;}.send-btn {height: 60upx;line-height: 60upx;width: 120upx;text-align: center;background-color: green;color: #FFFFFF;border-radius: 12upx;}}
</style>六、UniAPP 常用 API 简介
uni-app的 js 代码，h5 端运行于浏览器中，非 h5 端 Android 平台运行在 v8 引擎中，iOS 平台运行在 iOS 自带的 jscore 引擎中。所以，uni-app的 jsAPI 由标准 ECMAScript 的 js API 和 uni 扩展 API 这两部分组成。
ECMAScript 由 Ecma 国际管理，是基础 js 语法。浏览器基于标准 js 扩充了window、document 等 js API；Node.js 基于标准 js 扩充了 fs 等模块；小程序也基于标准 js 扩展了各种 wx.xx、my.xx、swan.xx 的 API。
标准 ecmascript 的 API 非常多，比如：console、settimeout等等。
非 H5 端，虽然不支持 window、document、navigator 等浏览器的 js API，但也支持标准 ECMAScript。
开发者不要把浏览器里的 js 等价于标准 js。
所以 uni-app 的非 H5 端，一样支持标准 js，支持 if、for 等语法，支持字符串、数组、时间等变量及各种处理方法，仅仅是不支持浏览器专用对象。
<script>export default {data() {return {// 保存聊天的内容chatList:[{isMe: false,type: 'txt',content: '你好，我是可爱的知心姐姐，请问你想和我聊什么呢？'},{isMe: false,type: 'img',content: '/static/image/1.jpeg'},{isMe: true,type: 'txt',content: '哇，你真漂亮'},{isMe: true,type: 'img',content: '/static/image/2.jpeg'}],myInput:''}},onShow(){if(!!uni.getStorageSync('chatList')){this.chatList = JSON.parse(uni.getStorageSync('chatList'))uni.pageScrollTo({scrollTop: 999999,duration: 0})}},methods:{choseImgAndSend(){uni.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success: res => {console.log(res.tempFilePaths[0])let senMsg = {isMe: true,type: 'img',content: res.tempFilePaths[0]}this.chatList.push(senMsg)let resMsg = {isMe: false,type: 'img',content: res.tempFilePaths[0]}this.chatList.push(resMsg)uni.pageScrollTo({scrollTop: 999999,duration: 0})uni.setStorageSync('chatList', JSON.stringify(this.chatList))}})},sendMsg(){if(!this.myInput) returnlet senMsg = {isMe: true,type: 'txt',content: this.myInput}this.chatList.push(senMsg)let resMsg = {isMe: false,type: 'txt',content: this.myInput}this.chatList.push(resMsg)this.myInput = ''uni.pageScrollTo({scrollTop: 999999,duration: 0})uni.setStorageSync('chatList', JSON.stringify(this.chatList))}}}
</script>
效果展示
【uni-app教程】UniAPP 常用组件和 常用 API 简介# 知心姐姐聊天案例相关推荐
- 微信小程序（json文件作用、WXML模板、宿主环境、通信模型、运行机制、常用组件、宿主API、协同工作和发布）
简介 黑马程序员视频学习记录 视频链接:黑马程序员前端微信小程序开发教程,微信小程序从基础到发布全流程_企业级商城实战 文章目录 简介 ---- json文件的作用 ---- 1. app.json ...
- 【REACT NATIVE 系列教程之十三】利用LISTVIEW与TEXTINPUT制作聊天/对话框获取组件实例常用的两种方式...
本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2346.html ...
- java使用教程——组件及事件处理——常用组件与布局
常用组件: 1.JTextField(文本框) 允许用户在文本框中输入单行文本 2.JTextArea(文本区) 允许用户文本区中输入多行文本 3.JLabel(标签) 标签为用户提供信息 4.JBu ...
- uni-app常用组件
uni-app内部组件 uni-app官网组件 消息提示 最全的toast: uni.showToast({title:"请输入用户名密码!" ,icon: 'none',mask ...
- 微信小程序入门之常用组件(04)
常见组件 重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等 一.vi ...
- ReactNative简介、开发环境、调试、常用组件、useState状态、FlatList组件、SectionList组件、Platform 模块、定义样式、图片组件、触摸事件、打包apk发布版
ReactNative简介: ReactNative是基于React语法来进行开发移动app的框架: ReactNative中提供了移动端专用的一些组件,我们要使用ReactNative固有的组件代替 ...
- JAVA中台化与常用组件设计
常见组件与中台化 1. 中台概述 1.1. 中台概念 随着互联网公司的崛起,"中台"这个词也进入了人们的视线.BAT 等公司纷纷推出了自己的中台系统.那么,什么是中台系统? 任何一 ...
- Swift学习笔记笔记（七） UIKit常用组件的使用
一.实验目的: 1.掌握Cocoa程序的创建 2.掌握UILabel组件的使用 3.掌握UIButton组件的使用 4.掌握UITextField组件的使用 二.实验原理: 1.Cocoa应用程序框架 ...
- 开启Fluter基础之旅二-------Future再论、常用组件、Material Design风格组件学习
Future再论: 这里在继续往下学习之前,先来看一下Dart语言关于Event-Queue和Microtask Queue需要注意的一个小点,这个在之前https://www.cnblogs.com ...
最新文章
- 在NodeJS中操作文件常见的API
- 网页模板制作只为满足用户需求！
- 【Android 组件化】路由组件 ( 页面跳转参数依赖注入 )
- button和sumbit提交表单的区别
- tomcat源码研究
- Heap Dump分析工具ha456.jar
- 同洲EOC局端MAC地址修改方法
- [git]git忽略文件
- IT真的很重要，还是会被边缘化？
- linux make指定目标平台,CMake on Linux:目标平台不支持动态链接
- mysql 2003 10038_关于MySql10038错误的完美解决方法(三种)
- Android系统信息获取 之三：IMSI号和IMEI解释
- php和dart交互,Flutter 之和原生交互
- vb连接odbc连接mysql数据库_vb6通过ODBC连接mysql数据库
- 什么是正则表达式 ？
- 为什么要学习Linux内核，如何学习？
- 01-12.产品经理入门到精通（一）
- 微信公众号文章怎么制作？
- 正向最大匹配、逆向最大匹配与双向匹配算法实现
- 一阶线性微分方程 解法