整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
回說到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小時內與您取得聯系。
