Hbuilder 笔记
小程序
學(xué)習(xí)連接
https://uniapp.dcloud.net.cn/
//嗶哩嗶哩
https://www.bilibili.com/video/BV1vh411B7Sb?share_source=copy_pc
//騰訊課堂
https://ke.qq.com/course/3169971#term_id=103296764
頁(yè)面調(diào)用接口
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= 簡(jiǎn)寫為:class
<text v-bind:class=“title” @tap=“openNext”>hhhh
可以綁定一個(gè)style,title是data中定義的數(shù)據(jù)變量,或者寫成一個(gè)表達(dá)式
如果是一個(gè)變量,可以通過(guò)改變變量為另一種style來(lái)改變控件的樣式。
可一次綁定多個(gè)class,有相同屬性的按照最后一個(gè)clas的顯示
<template><view>對(duì)象語(yǔ)法可以傳給 v-bind:class 一個(gè)對(duì)象,實(shí)現(xiàn)動(dòng)態(tài)地切換 class。也可以在對(duì)象中傳入更多字段來(lái)動(dòng)態(tài)切換多個(gè) 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>數(shù)組語(yǔ)法可以把一個(gè)數(shù)組傳給 v-bind:class,以應(yīng)用一個(gè) class 列表。<!-- class --><view class="static" :class="[activeClass,errorClass]">111</view><view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">222</view><!-- 三元表達(dá)式 --><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” 簡(jiǎn)寫成 @click=“openNext”
3.v-model
綁定變量kk到輸入框,在表單控件或者組件上創(chuàng)建雙向綁定4.v-if= v-else-if= v-else
條件判斷,決定某個(gè)內(nèi)容或控件是否掛載,v-show 條件判斷是否顯示
<view v-if="false">kkkk</view> <view v-else>ssss</view>5. 綁定事件
@click @click.stop,可以阻止事件穿透,也就是說(shuō)點(diǎn)擊子級(jí)不會(huì)響應(yīng)父級(jí)事件。
<view @click=‘show’>
父級(jí):{{father}}
<view @click.stop=‘showSub’>子級(jí):{{sub}}
6.自定義組件
組件中對(duì)數(shù)據(jù)的處理要放到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><!-- 向組件中傳一個(gè)data中的變量 ><cellNew :textOne="showText" ref="firstOne"></cellNew><!-- 組件中使用循環(huán)的值 --><view v-for="(item,index) in showList" :key="item.name"><cellNew :textOne="showText" :textTwo="item.name"></cellNew></view><!-- 綁定事件 --><cellNew @myClick='clickCell' textOne="點(diǎn)擊" ></cellNew><!-- ref 為子組件賦予一個(gè) ID 引用,在vue的js中可通過(guò)this.$refs.XXX來(lái)獲取到組件對(duì)象 --><cellNew textOne="嘿嘿" ref="firstOne"></cellNew></view> </template><script>export default {data() {return {textO: '哈哈哈',showText:’’變量值,}},methods: {clickCell() {/* firstOne 唯一標(biāo)識(shí);textOne 取到的對(duì)象中的變量 */console.log(this.$refs.firstOne.textOne)}}} </script>7.組件生命周期
只有beforeCreate方法執(zhí)行時(shí)props里的值不存在,其它方法都有
https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle
8.定時(shí)器
// 定時(shí)器 取消定時(shí)器
var timeIDD = setTimeout(function(){console.log('wwww'); }, 1000); clearTimeout(timeIDD);setTimeout(this.openNext(), 10);setTimeout(() => {this.openNext(); }, 5000)9.樣式和頁(yè)面布局 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; 重點(diǎn)啊
https://www.w3school.com.cn/css/css3_flexbox.asp
CSS 框模型
所有 HTML 元素都可以視為方框。在 CSS 中,在談?wù)撛O(shè)計(jì)和布局時(shí),會(huì)使用術(shù)語(yǔ)“盒模型”或“框模型”。
CSS 框模型實(shí)質(zhì)上是一個(gè)包圍每個(gè) HTML 元素的框。它包括:外邊距、邊框、內(nèi)邊距以及實(shí)際的內(nèi)容。下圖展示了框模型:
對(duì)不同部分的說(shuō)明:
- 內(nèi)容 - 框的內(nèi)容,其中顯示文本和圖像。
- 內(nèi)邊距 - 清除內(nèi)容周圍的區(qū)域。內(nèi)邊距是透明的。
- 邊框 - 圍繞內(nèi)邊距和內(nèi)容的邊框。
- 外邊距 - 清除邊界外的區(qū)域。外邊距是透明的。
框模型允許我們?cè)谠刂車砑舆吙?#xff0c;并定義元素之間的空間。
元素框的最內(nèi)部分是實(shí)際的內(nèi)容,直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距,外邊距默認(rèn)是透明的,因此不會(huì)遮擋其后的任何元素。
提示:背景應(yīng)用于由內(nèi)容和內(nèi)邊距、邊框組成的區(qū)域。
內(nèi)邊距、邊框和外邊距都是可選的,默認(rèn)值是零。但是,許多元素將由用戶代理樣式表設(shè)置外邊距和內(nèi)邊距。可以通過(guò)將元素的 margin 和 padding 設(shè)置為零來(lái)覆蓋這些瀏覽器樣式。這可以分別進(jìn)行,也可以使用通用選擇器對(duì)所有元素進(jìn)行設(shè)置: - {
margin: 0;
padding: 0;
}
在 CSS 中,width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸,但是會(huì)增加元素框的總尺寸。
假設(shè)框的每個(gè)邊上有 10 個(gè)像素的外邊距和 5 個(gè)像素的內(nèi)邊距。如果希望這個(gè)元素框達(dá)到 100 個(gè)像素,就需要將內(nèi)容的寬度設(shè)置為 70 像素,請(qǐng)看下圖:
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
提示:內(nèi)邊距、邊框和外邊距可以應(yīng)用于一個(gè)元素的所有邊,也可以應(yīng)用于單獨(dú)的邊。
提示:外邊距可以是負(fù)值,而且在很多情況下都要使用負(fù)值的外邊距。
實(shí)例
演示框模型:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
親自試一試
元素的寬度和高度
為了在所有瀏覽器中正確設(shè)置元素的寬度和高度,您需要了解框模型如何工作。
重要提示:使用 CSS 設(shè)置元素的 width 和 height 屬性時(shí),只需設(shè)置內(nèi)容區(qū)域的寬度和高度。要計(jì)算元素的完整大小,還必須把內(nèi)邊距、邊框和外邊距加起來(lái)。
實(shí)例
10.v-for
<view v-for="(item,index) in showList" :key="item.name"> </view>**注意:**需要綁定:key="”,否則會(huì)報(bào)錯(cuò) (Emitted value instead of an instance of Error) <v-uni-view v-for="item…
11. 某一頁(yè)去掉導(dǎo)航條
{
“path”: “pages/LogInControll/LogInControll”,
“style”: {
“enablePullDownRefresh”: false,
“navigationBarTitleText”: “😝”,
//配置下面這個(gè)可以隱藏當(dāng)前頁(yè)面導(dǎo)航條
“navigationStyle”:“custom”,
}
},
12. Less
less 官網(wǎng)
https://less.bootcss.com/
https://less.bootcss.com/usage/#developing-less
首先需要安裝less插件,然后根據(jù)提示進(jìn)行配置
示例:
13.CSS Position(定位)
https://www.runoob.com/css/css-positioning.html
①static 定位
HTML 元素的默認(rèn)值,即沒(méi)有定位,遵循正常的文檔流對(duì)象。
靜態(tài)定位的元素不會(huì)受到 top, bottom, left, right影響。
②fixed 定位
元素的位置相對(duì)于瀏覽器窗口是固定位置。
即使窗口是滾動(dòng)的它也不會(huì)移動(dòng):
③relative 定位
相對(duì)定位元素的定位是相對(duì)其正常位置。
④absolute 定位
絕對(duì)定位的元素的位置相對(duì)于最近的已定位父元素,如果元素沒(méi)有已定位的父元素,那么它的位置相對(duì)于:
⑤sticky 定位
sticky 英文字面意思是粘,粘貼,所以可以把它稱之為粘性定位。
position: sticky; 基于用戶的滾動(dòng)位置來(lái)定位。
粘性定位的元素是依賴于用戶的滾動(dòng),在 position:relative 與 position:fixed 定位之間切換。
它的行為就像 position:relative; 而當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí),它的表現(xiàn)就像 position:fixed;,它會(huì)固定在目標(biāo)位置。
元素定位表現(xiàn)為在跨越特定閾值前為相對(duì)定位,之后為固定定位。
這個(gè)特定閾值指的是 top, right, bottom 或 left 之一,換言之,指定 top, right, bottom 或 left 四個(gè)閾值其中之一,才可使粘性定位生效。否則其行為與相對(duì)定位相同。
⑥重疊的元素
元素的定位與文檔流無(wú)關(guān),所以它們可以覆蓋頁(yè)面上的其它元素
z-index屬性指定了一個(gè)元素的堆疊順序(哪個(gè)元素應(yīng)該放在前面,或后面)
一個(gè)元素可以有正數(shù)或負(fù)數(shù)的堆疊順序:
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
14.接口調(diào)用
uni.request({/* 官方示例https://uniapp.dcloud.net.cn/api/request/request.html*/url: 'https://unidemo.dcloud.net.cn/api/news',method:'GET',data: {//參數(shù)},header: {},fail: (res) => {// 正確寫法 失敗回調(diào)},success: (res) => {// 正確寫法 成功回調(diào)},/* 調(diào)用接口時(shí)成功和失敗的回調(diào)不能寫成下面形式雖然可以獲取到數(shù)據(jù)但是賦值后并不能更新頁(yè)面內(nèi)容success(res) {// 錯(cuò)誤寫法this.allMesArr = res.data.data;},fail(res) {// 錯(cuò)誤寫法}, */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、如何使用變量對(duì)字典(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 以避免出現(xiàn)下面錯(cuò)誤信息Invalid prop: custom validator check failed for prop "confirmType". --><u-textarea autoHeight placeholder="請(qǐng)輸入內(nèi)容" height="22" confirmType="done"></u-textarea>19.Vue中常用變量 標(biāo)準(zhǔn)內(nèi)置對(duì)象 (數(shù)組、字典、字符串等 )的操作
字典就是對(duì)象啊啊啊
官網(wǎng)連接
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects
Hbuilderx
https://uniapp.dcloud.net.cn/tutorial/syntax-uts.html#find
findIndex() 方法返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的索引。若沒(méi)有找到對(duì)應(yīng)元素則返回-1。
find()方法返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的值。
這兩個(gè)后面跟的都是表達(dá)式
20.樣式中計(jì)算 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時(shí),綁定class,class中直接寫color并不能改變圖標(biāo)顏色,加上!important可生效。
<uni-icons class="iconSameStyle" custom-prefix="ioticons" type="iot-circle-checked"></uni-icons>.iconSameStyle {margin-right: 20rpx;color: red !important;}22.設(shè)置元素居中
https://www.runoob.com/cssref/css3-pr-align-items.html
23.兩個(gè)元素一左一右顯示
<view class="smsNumberContainer"><view class="leftTitleView"><input value="購(gòu)買短信語(yǔ)音條數(shù)" 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> /* 實(shí)現(xiàn)一行一左一右布局*/.smsNumberContainer {background-color: white;position: relative;display: flex;justify-content: space-between; //兩個(gè)元素時(shí)左右顯示margin-top: 20rpx;padding: 24rpx 40rpx;color: $item-title-color;font-size: 30rpx;.leftTitleView {width: 60%;}.rightNubmerView {text-align: right;width: 35%;}} </style>24蘋果日期時(shí)間顯示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; // 時(shí)間戳轉(zhuǎn)換成時(shí)間timestamp毫秒值 var time = new Date(timestamp);25.父組件主動(dòng)調(diào)用子組件方法,
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對(duì)應(yīng)的名字要和導(dǎo)入時(shí)的名稱保持一致,‘-’后面的首字母大寫
例如,子組件 name: ‘building-control-place-home’,
對(duì)應(yīng)使用時(shí)導(dǎo)入為 import buildingControlPlaceHome from “…/building-control/building-control-place.vue”
27。數(shù)據(jù)更新了,但是頁(yè)面不渲染的問(wèn)題
第一種情況:就是在初始化的時(shí)候沒(méi)有這個(gè)屬性,是動(dòng)態(tài)添加的屬性。這個(gè)時(shí)候不會(huì)引起vue自動(dòng)渲染機(jī)制。
this.$set(object, key, data);
object:目標(biāo)對(duì)象。key:需要添加的屬性名。data:屬性值。
第二種情況:在操作數(shù)組的時(shí)候,要用push 或者 splice 等 可以改變這種方法改變?cè)瓟?shù)組。而不是用下標(biāo) this.mydata[0] = ‘改變的值’。這樣也會(huì)引起不渲染。
如果情況比較復(fù)雜,所有方法都試過(guò)了還沒(méi)有解決,用 v-if 強(qiáng)制重新渲染更新。
總結(jié)
以上是生活随笔為你收集整理的Hbuilder 笔记的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: mysql 命令行 格式化输出_MySQ
- 下一篇: 2019年总结回顾 ~ 开心!评上CSD