Hbuilder 笔记
小程序
學習連接
https://uniapp.dcloud.net.cn/
//嗶哩嗶哩
https://www.bilibili.com/video/BV1vh411B7Sb?share_source=copy_pc
//騰訊課堂
https://ke.qq.com/course/3169971#term_id=103296764
頁面調用接口
https://uniapp.dcloud.net.cn/tutorial/page.html#%E9%A1%B5%E9%9D%A2%E8%B0%83%E7%94%A8%E6%8E%A5%E5%8F%A3
vue教程
https://learning.dcloud.io/#/
v-命令是vue的指令,連接
https://uniapp.dcloud.net.cn/tutorial/vue-api.html#%E6%A8%A1%E6%9D%BF%E6%8C%87%E4%BB%A4
css教程
https://www.w3school.com.cn/css/index.asp
1.v-bind:class= 簡寫為:class
<text v-bind:class=“title” @tap=“openNext”>hhhh
可以綁定一個style,title是data中定義的數據變量,或者寫成一個表達式
如果是一個變量,可以通過改變變量為另一種style來改變控件的樣式。
可一次綁定多個class,有相同屬性的按照最后一個clas的顯示
<template><view>對象語法可以傳給 v-bind:class 一個對象,實現動態地切換 class。也可以在對象中傳入更多字段來動態切換多個 class。此外,v-bind:class 指令也可以與普通的 class 共存。<!-- class --><view class="static" :class="{ active: isActive}">111</view><view class="static active">111</view><view>哈哈哈</view><view class="static" :class="{ active: isActive, 'text-danger': hasError }">222</view><!-- style --><view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">333</view><view>數組語法可以把一個數組傳給 v-bind:class,以應用一個 class 列表。<!-- class --><view class="static" :class="[activeClass,errorClass]">111</view><view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">222</view><!-- 三元表達式 --><view class="static" v-bind:class="[{ active: isActive }, errorClass]">333</view><!-- style --><view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">444</view><!-- 在class中使用變量 --><view class="variableClass" :style="{'--useMineColor':mineColor,'--useMineBackColor':mineBackColor}">在class中使用變量</view></view></view> </template> <script>export default {data() {return {isActive: true,hasError: false,activeColor: "green",fontSize: 50,activeClass: 'active',errorClass: 'text-danger',kkkkk: '#DD524D',mineColor: 'red',mineBackColor: '#0A84FF',}}} </script> <style>.static {color: #2C405A;font-size: 30rpx;/* background-color: #DD524D; */}.active {background-color: #007AFF;}.text-danger {color: #DD524D;}.text-danger {font-size: 60rpx;color: #DD524D;}.variableClass {/* 在class中使用變量 */color: var(--useMineColor);position: absolute;background-color: var(--useMineBackColor);} </style>2.綁定事件
@tap=“openNext”
v-on:click=“openNext” 簡寫成 @click=“openNext”
3.v-model
綁定變量kk到輸入框,在表單控件或者組件上創建雙向綁定4.v-if= v-else-if= v-else
條件判斷,決定某個內容或控件是否掛載,v-show 條件判斷是否顯示
<view v-if="false">kkkk</view> <view v-else>ssss</view>5. 綁定事件
@click @click.stop,可以阻止事件穿透,也就是說點擊子級不會響應父級事件。
<view @click=‘show’>
父級:{{father}}
<view @click.stop=‘showSub’>子級:{{sub}}
6.自定義組件
組件中對數據的處理要放到mounted方法中,以避免微信小程序不兼容
https://uniapp.dcloud.net.cn/tutorial/vue-components.html#%E6%A6%82%E5%BF%B5
<template><view><!-- 傳遞固定值 --><cellNew textOne="嘿嘿"></cellNew><!-- 傳遞變量 --><cellNew v-bind:textOne="textO"></cellNew><!-- 向組件中傳一個data中的變量 ><cellNew :textOne="showText" ref="firstOne"></cellNew><!-- 組件中使用循環的值 --><view v-for="(item,index) in showList" :key="item.name"><cellNew :textOne="showText" :textTwo="item.name"></cellNew></view><!-- 綁定事件 --><cellNew @myClick='clickCell' textOne="點擊" ></cellNew><!-- ref 為子組件賦予一個 ID 引用,在vue的js中可通過this.$refs.XXX來獲取到組件對象 --><cellNew textOne="嘿嘿" ref="firstOne"></cellNew></view> </template><script>export default {data() {return {textO: '哈哈哈',showText:’’變量值,}},methods: {clickCell() {/* firstOne 唯一標識;textOne 取到的對象中的變量 */console.log(this.$refs.firstOne.textOne)}}} </script>7.組件生命周期
只有beforeCreate方法執行時props里的值不存在,其它方法都有
https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle
8.定時器
// 定時器 取消定時器
var timeIDD = setTimeout(function(){console.log('wwww'); }, 1000); clearTimeout(timeIDD);setTimeout(this.openNext(), 10);setTimeout(() => {this.openNext(); }, 5000)9.樣式和頁面布局 iconfont使用
https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#%E9%A1%B5%E9%9D%A2%E6%A0%B7%E5%BC%8F%E4%B8%8E%E5%B8%83%E5%B1%80
css布局
https://www.w3school.com.cn/css/css_boxmodel.asp
https://www.w3school.com.cn/css/css_positioning.asp
Flexbox display: flex; 重點啊
https://www.w3school.com.cn/css/css3_flexbox.asp
CSS 框模型
所有 HTML 元素都可以視為方框。在 CSS 中,在談論設計和布局時,會使用術語“盒模型”或“框模型”。
CSS 框模型實質上是一個包圍每個 HTML 元素的框。它包括:外邊距、邊框、內邊距以及實際的內容。下圖展示了框模型:
對不同部分的說明:
- 內容 - 框的內容,其中顯示文本和圖像。
- 內邊距 - 清除內容周圍的區域。內邊距是透明的。
- 邊框 - 圍繞內邊距和內容的邊框。
- 外邊距 - 清除邊界外的區域。外邊距是透明的。
框模型允許我們在元素周圍添加邊框,并定義元素之間的空間。
元素框的最內部分是實際的內容,直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距,外邊距默認是透明的,因此不會遮擋其后的任何元素。
提示:背景應用于由內容和內邊距、邊框組成的區域。
內邊距、邊框和外邊距都是可選的,默認值是零。但是,許多元素將由用戶代理樣式表設置外邊距和內邊距。可以通過將元素的 margin 和 padding 設置為零來覆蓋這些瀏覽器樣式。這可以分別進行,也可以使用通用選擇器對所有元素進行設置: - {
margin: 0;
padding: 0;
}
在 CSS 中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸。
假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。如果希望這個元素框達到 100 個像素,就需要將內容的寬度設置為 70 像素,請看下圖:
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
提示:內邊距、邊框和外邊距可以應用于一個元素的所有邊,也可以應用于單獨的邊。
提示:外邊距可以是負值,而且在很多情況下都要使用負值的外邊距。
實例
演示框模型:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
親自試一試
元素的寬度和高度
為了在所有瀏覽器中正確設置元素的寬度和高度,您需要了解框模型如何工作。
重要提示:使用 CSS 設置元素的 width 和 height 屬性時,只需設置內容區域的寬度和高度。要計算元素的完整大小,還必須把內邊距、邊框和外邊距加起來。
實例
10.v-for
<view v-for="(item,index) in showList" :key="item.name"> </view>**注意:**需要綁定:key="”,否則會報錯 (Emitted value instead of an instance of Error) <v-uni-view v-for="item…
11. 某一頁去掉導航條
{
“path”: “pages/LogInControll/LogInControll”,
“style”: {
“enablePullDownRefresh”: false,
“navigationBarTitleText”: “😝”,
//配置下面這個可以隱藏當前頁面導航條
“navigationStyle”:“custom”,
}
},
12. Less
less 官網
https://less.bootcss.com/
https://less.bootcss.com/usage/#developing-less
首先需要安裝less插件,然后根據提示進行配置
示例:
13.CSS Position(定位)
https://www.runoob.com/css/css-positioning.html
①static 定位
HTML 元素的默認值,即沒有定位,遵循正常的文檔流對象。
靜態定位的元素不會受到 top, bottom, left, right影響。
②fixed 定位
元素的位置相對于瀏覽器窗口是固定位置。
即使窗口是滾動的它也不會移動:
③relative 定位
相對定位元素的定位是相對其正常位置。
④absolute 定位
絕對定位的元素的位置相對于最近的已定位父元素,如果元素沒有已定位的父元素,那么它的位置相對于:
⑤sticky 定位
sticky 英文字面意思是粘,粘貼,所以可以把它稱之為粘性定位。
position: sticky; 基于用戶的滾動位置來定位。
粘性定位的元素是依賴于用戶的滾動,在 position:relative 與 position:fixed 定位之間切換。
它的行為就像 position:relative; 而當頁面滾動超出目標區域時,它的表現就像 position:fixed;,它會固定在目標位置。
元素定位表現為在跨越特定閾值前為相對定位,之后為固定定位。
這個特定閾值指的是 top, right, bottom 或 left 之一,換言之,指定 top, right, bottom 或 left 四個閾值其中之一,才可使粘性定位生效。否則其行為與相對定位相同。
⑥重疊的元素
元素的定位與文檔流無關,所以它們可以覆蓋頁面上的其它元素
z-index屬性指定了一個元素的堆疊順序(哪個元素應該放在前面,或后面)
一個元素可以有正數或負數的堆疊順序:
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
14.接口調用
uni.request({/* 官方示例https://uniapp.dcloud.net.cn/api/request/request.html*/url: 'https://unidemo.dcloud.net.cn/api/news',method:'GET',data: {//參數},header: {},fail: (res) => {// 正確寫法 失敗回調},success: (res) => {// 正確寫法 成功回調},/* 調用接口時成功和失敗的回調不能寫成下面形式雖然可以獲取到數據但是賦值后并不能更新頁面內容success(res) {// 錯誤寫法this.allMesArr = res.data.data;},fail(res) {// 錯誤寫法}, */complete: (res) => {console.log('complete');}});15. style= :style= 后綁定變量 變量
:style=“{height:heightNew+‘rpx’}” heightNew變量
:style=“[{height:heightNew+‘rpx’}]” heightNew變量
:style=“{background: showNoDataView ? ‘#0A84FF’ : ‘#fc001b’,height:heightNew+‘rpx’}” 變量
style=“height:100%” 常量
16. 如何在style中使用變量 不推薦 用15
mineBackColor 自定義變量名稱
–useMineColor style中使用名稱 --必須有否則不生效
color: var(–useMineColor); 使用方式 --必須有否則不生效
17、如何使用變量對字典(object)取值
<script>export default {data() {return {willShowInfoTwo: {leftName: '333',rightName1: '444',},descr: "備注",keyString: 'leftName',}},created() {this.test();},methods: {test() {this.descr = this.willShowInfoTwo[this.keyString];},}} </script>18.Invalid prop: custom validator check failed for prop “confirmType”
<!-- 配置 confirmType="done 以避免出現下面錯誤信息Invalid prop: custom validator check failed for prop "confirmType". --><u-textarea autoHeight placeholder="請輸入內容" height="22" confirmType="done"></u-textarea>19.Vue中常用變量 標準內置對象 (數組、字典、字符串等 )的操作
字典就是對象啊啊啊
官網連接
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects
Hbuilderx
https://uniapp.dcloud.net.cn/tutorial/syntax-uts.html#find
findIndex() 方法返回數組中滿足提供的測試函數的第一個元素的索引。若沒有找到對應元素則返回-1。
find()方法返回數組中滿足提供的測試函數的第一個元素的值。
這兩個后面跟的都是表達式
20.樣式中計算 style 使用全局變量
height: calc(100% - 140rpx);
<style lang="scss" scoped> .withOutBottomView {background-color: yellow;position: relative;margin-bottom: 240rpx;margin-top: 22rpx;overflow-y: auto;height: calc(100% - 140rpx);/* $page-margin-left} 定義的全局變量*/ width: calc(100% - #{$page-margin-left} - #{$page-margin-left} - 40rpx);} </style>21.!important 增加比重
使用uni-icons時,綁定class,class中直接寫color并不能改變圖標顏色,加上!important可生效。
<uni-icons class="iconSameStyle" custom-prefix="ioticons" type="iot-circle-checked"></uni-icons>.iconSameStyle {margin-right: 20rpx;color: red !important;}22.設置元素居中
https://www.runoob.com/cssref/css3-pr-align-items.html
23.兩個元素一左一右顯示
<view class="smsNumberContainer"><view class="leftTitleView"><input value="購買短信語音條數" disabled="true" style="background-color: bisque;"></view><view class="rightNubmerView"><input type="number" placeholder='1條起' placeholder-style="color:rgba(180, 180, 180, 1)"style="background-color: aqua;"></view></view><style lang="scss" scoped> /* 實現一行一左一右布局*/.smsNumberContainer {background-color: white;position: relative;display: flex;justify-content: space-between; //兩個元素時左右顯示margin-top: 20rpx;padding: 24rpx 40rpx;color: $item-title-color;font-size: 30rpx;.leftTitleView {width: 60%;}.rightNubmerView {text-align: right;width: 35%;}} </style>24蘋果日期時間顯示nan解決方法
// 蘋果顯示nan解決方法let endTime_Old = new Date();var year = Number(endTime_Old.getFullYear() + item.code);var month = Number(endTime_Old.getMonth() + 1);var date = Number(endTime_Old.getDate());return year + '-' + month + '-' + date; // 時間戳轉換成時間timestamp毫秒值 var time = new Date(timestamp);25.父組件主動調用子組件方法,
https://jingyan.baidu.com/article/e52e36158892b501c60c51b5.html
<template><view class="_abbr"><tab-family-message ref="tabFamilyMessage" v-if='loginAppSysType === "home"'></tab-family-message></view> </template><script>import tabbarMethods from '@/libs/minx/tabbar.js'import {mapGetters} from 'vuex'export default {mixins: [tabbarMethods],data() {return {}},computed: {...mapGetters(['loginAppSysType'])},onPullDownRefresh() {console.log('onPullDownRefresh');/* 注意 getMessageList 必須是method中的方法 */this.$refs.tabFamilyMessage.getMessageList();},}26.使用非全局組件
注意:子組件中name對應的名字要和導入時的名稱保持一致,‘-’后面的首字母大寫
例如,子組件 name: ‘building-control-place-home’,
對應使用時導入為 import buildingControlPlaceHome from “…/building-control/building-control-place.vue”
27。數據更新了,但是頁面不渲染的問題
第一種情況:就是在初始化的時候沒有這個屬性,是動態添加的屬性。這個時候不會引起vue自動渲染機制。
this.$set(object, key, data);
object:目標對象。key:需要添加的屬性名。data:屬性值。
第二種情況:在操作數組的時候,要用push 或者 splice 等 可以改變這種方法改變原數組。而不是用下標 this.mydata[0] = ‘改變的值’。這樣也會引起不渲染。
如果情況比較復雜,所有方法都試過了還沒有解決,用 v-if 強制重新渲染更新。
總結
以上是生活随笔為你收集整理的Hbuilder 笔记的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: mysql 命令行 格式化输出_MySQ
- 下一篇: HTML5七夕情人节表白代码_浪漫烟花表