整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

02-Taro页面编写和传值

02-Taro页面编写和传值

回说到Taro打造hello-world应用。废话不多说,直接上肉菜

State局部状态

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"
	}
}

pages 属性

uni-app 通过 pages 节点配置应用都有哪些页面,接收一个数组,每个元素都是一个对象,属性有:

属性

类型

默认值

描述

path

String


配置页面路径

style

Object


配置面状态栏、导航栏、标题、窗口背景色

  • pages 节点的第一项为应用入口页(即首页)
  • 应用中新增/减少页面,都需要对 pages 数组进行修改
  • 文件名不需要写后缀,框架会自动寻找路径下的页面资源

页面跳转

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 页面跳转方式有:

  1. uni.navigateTo: 保留当前页面,跳转到应用内的某个页面,使用 navigateBack 可以返回到上一页。
  2. uni.navigateBack:关闭当前页面,返回上一级或多级页面。delta 属性设置返回层级,大于页面数时返回首页。
  3. uni.redirectTo:关闭当前页面,跳转到应用内的某个页面。
  4. uni.reLaunch:关闭应用内所有页面,打开应用内某个页面。
  5. uni.switchTab:跳转到 tabBar 页面,关闭其他非 tabBar 页面。
  6. uni.preloaPage:预加载页面,是一种性能优化技术,被预载的页面,在打开时速度更快。

页面栈

框架以栈的形式管理当前所有页面, 当发生路由切换的时候,页面栈的表现如下:

路由方式

页面栈表现

触发时机

初始化

新页面入栈

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相关的基础知识之后,老师出了五道自测题,通过这几天学习的总结,和查阅相关文档,我也作出了自己的理解,以下是我学习的相关心得分享给大家。

1.HTML元素、标签和属性之间的关联与区别?

如果想要搞清楚HTML元素、标签、属性之间的关系,首先我们应该了解3个概念:

  1. 什么是HTML标签?
    HTML标签由一对尖括号('<','>')包裹起来的对象,如<div><h1><p>等等都叫标签。绝大多数的标签都是成对出现的,如,<div></div><h1></h1><p></p>,但是也有例外,比方说换行符<br />,分割线<hr />,这些标签,开始标签和结束标签都是自身。
  2. 什么是元素?
    一个HTML页面是由多个元素组成的,一个元素是由一对标签包含某些内容组成的,比如:<h1>Hello World</h1>,这个就是元素。
  3. 什么是属性?
    给HTML元素附加各种样式的叫属性,它是以“属性名=属性值”这种名、值对形式出现的,需要注意的是,属性必须写在元素的起始标签中。

了解上述三个概念,我明白了,一个HTML页面就是由多个元素构成,元素是由标签描述,每一个元素的特征,都是由属性决定的。

2.为什么说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标签任意位置都能放置,就没法做标准高度统一了,那么浏览器也就无法做出正确的解析了。因此,我们看到的各种网页,都是通过这种具有结构化的标签组合而成的。

3.表单控件中的name属性为什么非常重要?

表单控件中的name值,是前端与后端进行交互时传值的变量名称,后端只有通过控件的name值才可以接收到该值进行相应的处理。

4.为什么现在都不再使用表格进行页面布局了?

1.页面布局不灵活;
2.代码的可读性:表格布局的代码可读性低,没有使用<div><h1>等标签直观;
3.表格加载速度慢;
4.不利于SEO;

5.一个元素,最终呈现的样式,由几方面的因素决定的?

1.继承的:根据元素在文档的结构和层级关系来确定它的最终样式;
2.浏览器客户端:用户代理样式(user agent style),基本上浏览器的表现样式都是一致的;
3.用户自定义:写在HTML文档<style>标签中的样式;
4.行内样式(内联样式):写在元素的style属性中的样式。

以上就是我个人的总结,不知道是否完全正确,如果有错误的地方烦请各位指正,多谢大家。