回说到Taro打造hello-world应用。废话不多说,直接上肉菜
export default class Index extends Component {
config={
navigationBarTitleText: '首页'
}
state={
name: "hello 前端骚年"
}
render () {
const { name }=this.state
return (
<View className='index'>
<Text>{name}</Text>
</View>
)
}
}
mkdir -p src/components/child
cd src/components/child
touch index.jsx
编写组件,代码如下
import Taro, { Component } from '@tarojs/taro'
import PropTypes from 'prop-types'
import { View, Text } from '@tarojs/components'
export default class Child extends Component {
propTypes={
childName: PropTypes.string
}
defaultProps={
childName: ''
}
render () {
const { childName }=this.props
return (
<View>
<Text>我是肉菜中的{childName}</Text>
</View>
)
}
}
在主页面index中引入
import Child from "../../components/child";
render方法中即可运用
render () {
const { name }=this.state
return (
<View className='index'>
<Text>{name}</Text>
<Child childName="蒜末child"/>
</View>
)
}
cd taroDemo
taro create --name next // 创建next页面
在 /src/app.jsx 中配置路由
pages: [
'pages/index/index',
'pages/next/next'
]
在主页面Button上绑定跳转事件
goNext() {
Taro.navigateTo({url:'/pages/next/next?nextTheme=大保健'})
}
在next页面接收参数
componentWillMount () {
console.log(this.$router.params) // 输出 {nextTheme: "大保健"}
const { nextTheme }=this.$router.params
this.setState({
nextTheme
})
}
其他页面跳转方式redirectTo、switchTab、navigateBack等和微信小程序很相似
const params={
url,
data,
header,
method
}
const res=await Taro.request(params)
集成dva开发体验更好,参考基于Taro + Dva构建的时装衣橱(电商实战项目)
1.适配问题Taro以 750px 作为换算尺寸标准,尺寸单位使用px,默认会进行转换rpx/rem。如果你希望部分 px 单位不被转换成 rpx 或者 rem ,将px写成Px或PX
2.尽量避免在 componentDidMount 中调用 this.setState,可在 WillMount 中处理你问为啥??因为在 componentDidMount 中调用 this.setState 会导致触发更新
3.不要在调用 this.setState 时使用 this.state,会导致一些错误
4.多端组件假如有一个 Child 组件存在微信小程序、百度小程序和 H5 三个不同版本可在components目录下分别创建child.js child.weapp.js child.h5.js
// 引用不变,编译会自动识别
import Child from '../../components/child'
taroDemo 项目地址: https://gitee.com/itxing666/taroDemo
ue 项目往往需要使用 vue-router 插件,刚开始入门 Uni-app + Vue3 项目的同学,会不会想着路由使用 vue-router V4 版本不就可以了吗?
不怕大家笑话,我就是这样想的,毕竟我是第一次使用 Uni-app ,由于孕期记性贼差,所以我决定写成笔记,加深记忆。
uni-app 页面路由为框架统一管理的,我们需要在 page.json 文件里配置每个页面路由以及页面样式,有些类似小程序中的 app.json 文件,所以 uni-app 的路由用法和写法与 vue-router 不同。
项目初始化完成,对应的 page.json 文件为:
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
uni-app 通过 pages 节点配置应用都有哪些页面,接收一个数组,每个元素都是一个对象,属性有:
属性 | 类型 | 默认值 | 描述 |
path | String | 配置页面路径 | |
style | Object | 配置面状态栏、导航栏、标题、窗口背景色 |
uni-app 页面路由跳转有两种方式:使用 navigator 组件跳转、调用API 跳转。
1、navigator组件跳转
类似于 a 标签,但是只能跳转到本地页面,目标页面必须在 page.json 中注册。
<navigator url="/pages/animation-major/index" open-type="navigate">
<el-button type="primary">查询</el-button>
</navigator>
navigator 属性有:
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
url | String | 应用内的跳转链接,值为相对路径或绝对路径,如:"../first/first","/pages/first/first",注意不能加 .vue 后缀 | ||
open-type | String | navigate | 跳转方式 | |
delta | Number | 当 open-type 为 'navigateBack' 时有效,表示回退的层数 | ||
animation-type | String | pop-in/out | 当 open-type 为 navigate、navigateBack 时有效,窗口的显示/关闭动画效果,详见:窗口动画 | App |
animation-duration | Number | 300 | 当 open-type 为 navigate、navigateBack 时有效,窗口显示/关闭动画的持续时间。 | App |
hover-class | String | navigator-hover | 指定点击时的样式类,当hover-class="none"时,没有点击态效果 | |
hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | 微信小程序 |
hover-start-time | Number | 50 | 按住后多久出现点击态,单位毫秒 | |
hover-stay-time | Number | 600 | 手指松开后点击态保留时间,单位毫秒 | |
target | String | self | 在哪个小程序目标上发生跳转,默认当前小程序,值域self/miniProgram | 微信2.0.7+、百度2.5.2+、QQ |
open-type 有效值
值 | 说明 | 平台差异说明 |
navigate | 对应 uni.navigateTo 的功能 | |
redirect | 对应 uni.redirectTo 的功能 | |
switchTab | 对应 uni.switchTab 的功能 | |
reLaunch | 对应 uni.reLaunch 的功能 | 字节跳动小程序与飞书小程序不支持 |
navigateBack | 对应 uni.navigateBack 的功能 | |
exit | 退出小程序,target="miniProgram"时生效 | 微信2.1.0+、百度2.5.2+、QQ1.4.7+ |
2、uni-app API 跳转
uni.navigateTo({
url: "/pages/animation-major/index",
})
使用 API 页面跳转方式有:
框架以栈的形式管理当前所有页面, 当发生路由切换的时候,页面栈的表现如下:
路由方式 | 页面栈表现 | 触发时机 |
初始化 | 新页面入栈 | uni-app 打开的第一个页面 |
打开新页面 | 新页面入栈 | 调用 API uni.navigateTo 、使用组件 <navigator open-type="navigate"/> |
页面重定向 | 当前页面出栈,新页面入栈 | 调用 API uni.redirectTo 、使用组件 <navigator open-type="redirectTo"/> |
页面返回 | 页面不断出栈,直到目标返回页 | 调用 API uni.navigateBack 、使用组件 <navigator open-type="navigateBack"/> 、用户按左上角返回按钮、安卓用户点击物理back按键 |
Tab 切换 | 页面全部出栈,只留下新的 Tab 页面 | 调用 API uni.switchTab 、使用组件 <navigator open-type="switchTab"/> 、用户切换 Tab |
重加载 | 页面全部出栈,只留下新的页面 | 调用 API uni.reLaunch 、使用组件 <navigator open-type="reLaunch"/> |
方式1:onLoad 接收
// 跳转
uni.navigateTo({
url: "/pages/sendManagement/index?id=123",
})
<script>
import { onMounted } from 'vue';
let parmes=null;
export default {
onLoad(options){
parmes=options;
},
setup() {
onMounted(()=> {
console.log('接受上个页面传的值',parmes)
})
}
}
</script>
方式2:setup语法糖接收
<script setup>
import { onMounted, getCurrentInstance } from 'vue';
onMounted(()=>{
let options=getCurrentInstance()
console.log("options--->",options.attrs);
})
</script>
onLoad 函数是监听页面加载,接收的参数是页面传递的数据,是一个 object 类型。
看到这,相信很快就能上手 uni-app + vue3 项目路由喽,也可以参考官网教程:https://uniapp.dcloud.io/tutorial/page.html#%E8%B7%AF%E7%94%B1
几天学习了HTML相关的基础知识之后,老师出了五道自测题,通过这几天学习的总结,和查阅相关文档,我也作出了自己的理解,以下是我学习的相关心得分享给大家。
如果想要搞清楚HTML元素、标签、属性之间的关系,首先我们应该了解3个概念:
了解上述三个概念,我明白了,一个HTML页面就是由多个元素构成,元素是由标签描述,每一个元素的特征,都是由属性决定的。
根据W3C标准,HTML是一种Web语言,它是使用一些“标签”来定义网页内容的,例如我们在一个HTML文档中写<html xmlns="http://www.w3.org/1999/xhtml"></html>,就声明了一个HTML文档的开始,里面可以放各种标签,一个HTML文档是由以下结构构成的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
</body>
</html>
由以上代码不难看出,HTML结构层次分明,是一种具有结构层次的标记语言,通过这些标签可以告诉浏览器如何做出相应的解析。否则,如果HTML标签任意位置都能放置,就没法做标准高度统一了,那么浏览器也就无法做出正确的解析了。因此,我们看到的各种网页,都是通过这种具有结构化的标签组合而成的。
表单控件中的name值,是前端与后端进行交互时传值的变量名称,后端只有通过控件的name值才可以接收到该值进行相应的处理。
1.页面布局不灵活;
2.代码的可读性:表格布局的代码可读性低,没有使用<div>, <h1>等标签直观;
3.表格加载速度慢;
4.不利于SEO;
1.继承的:根据元素在文档的结构和层级关系来确定它的最终样式;
2.浏览器客户端:用户代理样式(user agent style),基本上浏览器的表现样式都是一致的;
3.用户自定义:写在HTML文档<style>标签中的样式;
4.行内样式(内联样式):写在元素的style属性中的样式。
以上就是我个人的总结,不知道是否完全正确,如果有错误的地方烦请各位指正,多谢大家。
*请认真填写需求信息,我们会在24小时内与您取得联系。