小程序
學習連接
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 屬性時，只需設置內容區域的寬度和高度。要計算元素的完整大小，還必須把內邊距、邊框和外邊距加起來。
實例

元素的總寬度將是 350px： div { width: 320px; padding: 10px; border: 5px solid gray; margin: 0; } 親自試一試 計算如下： 320px(寬度) + 20px（左+右內邊距） + 10px（左+右邊框） + 0px（左+右外邊距） = 350px **元素的總寬度應該這樣計算： 元素總寬度 = 寬度 + 左內邊距 + 右內邊距 + 左邊框 + 右邊框 + 左外邊距 + 右外邊距 元素的總高度應該這樣計算： 元素總高度 = 高度 + 上內邊距 + 下內邊距 + 上邊框 + 下邊框 + 上外邊距 + 下外邊距**

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插件，然后根據提示進行配置
示例：

<style lang="less">@bgColor : #999; .demo {position: fixed;top: 700rpx;background: red;width: 400rpx; /* 想使用test1 外面必須有一個view并且class是demo包裹起來 */.test1 {width: 300rpx;font-size: 12px;background: @bgColor;}} </style> 使用：想使用test1 外面必須有一個view并且class是demo包裹起來** <view class="demo">demo<view class="test1">生效</view></view><view class="test1">不生效</view>

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%” 常量

<template><view>方法<view class="backStyle" style="border-radius:18rpx 18rpx 18rpx 0rpx;height: 100rpx;">style 使用常量 直接寫就行</view>方法*注意：此種寫法不支持微信小程序！！！*<view class="backStyle" :style="borderRadius=bordeRadiusStyle">:style 使用變量 相當于是當成對像使用了設置border-radius，要把中間的-去掉，第二個單詞首字母大寫</view>方法<view>一個單詞<view class="backStyle_Yellow" :style="{height:heightNew+'rpx',borderRadius:bordeRadiusStyleTwo}">:style 使用變量 只是使用后面的表達式 只有一個單詞的寫法</view>多個單詞<view class="backStyle" :style="{borderRadius:bordeRadiusStyleTwo}">:style 使用變量 只是使用后面的表達式設置border-radius，要把中間的-去掉，第二個單詞首字母大寫，并且對應變量內容里需要去掉 border-radius:</view>同時設置多個樣式<view class="backStyle_Yellow" :style="{height:heightNew+'rpx',borderRadius:bordeRadiusStyleTwo}">:style 使用變量 只是使用后面的表達式 同時設置多個樣式</view>樣式中 使用表達式<view class="backStyle_Yellow" :style="{height:heightNew+'rpx',background: true ? '#0A84FF' : '#fc001b',}">:style 使用變量 只是使用后面的表達式 樣式中 使用表達式</view></view></view> </template><script>export default {data() {return {bordeRadiusStyle: 'border-radius: 18rpx 0rpx 18rpx 0rpx',bordeRadiusStyleTwo: '28rpx 28rpx 18rpx 0rpx',heightNew: 100,}},methods: {}} </script><style>.backStyle {background-color: red;display: flex;word-break: break-all; ///換行//圓角是 順時針過來的 左上 右上 右下 左下// border-radius: 18rpx 0rpx 18rpx 0rpx;}.backStyle_Yellow {background-color: red;display: flex;word-break: break-all; ///換行//圓角是 順時針過來的 左上 右上 右下 左下// border-radius: 18rpx 0rpx 18rpx 0rpx;} </style>

16. 如何在style中使用變量 不推薦 用15

mineBackColor 自定義變量名稱
–useMineColor style中使用名稱 --必須有否則不生效
color: var(–useMineColor); 使用方式 --必須有否則不生效

<template><view class="variableClass" :style="{'--useMineColor':mineColor,'--useMineBackColor':mineBackColor}">hsswel11lo</view> </template><script>export default {data() {return {mineColor: 'red',mineBackColor: '#0A84FF',}}} </script> <style lang="scss" scoped>.variableClass {color: var(--useMineColor);position: absolute;background-color: var(--useMineBackColor);} </style>

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

/* 新對象 = {...對象1,...對象2,...對象3} 合并兩個對象 如果有相同內容，最后面的會保留*/var oneDic = {'相同的': 'one','會將': '222'};var twoDic = {'相同的': 'two','是是是': '少時誦詩書'};var threeDic = {...oneDic,...twoDic};var fourDic =console.log(threeDic);/*結果是{"相同的": "two","會將": "222","是是是": "少時誦詩書"} *//* 合并數組 */var oneArr = ['pme'];var twoArr = ['jjjj', 'pme'];var fourArr = oneArr.concat(twoArr);/* 結果是["pme","jjjj","pme"]*/console.log(fourArr);

findIndex() 方法返回數組中滿足提供的測試函數的第一個元素的索引。若沒有找到對應元素則返回-1。
find()方法返回數組中滿足提供的測試函數的第一個元素的值。
這兩個后面跟的都是表達式

let number = 2;const arr = [0, 1, 2, 3];let one = arr.findIndex(item => number == item);//查找item等于number的元素的位置 值為2let two = arr.findIndex(item => number < item);//查找item小于number的元素的位置 值為0let three = arr.findIndex(item => 5 < item);//查找item小于number的元素的位置 值為-1,找不到就是-1

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

<view class="alertSureView"><view class="showInfoBackView"></view></view>//樣式.alertSureView {position: absolute;display: flex;background-color: rgba(255, 30, 93, 0.5);z-index: 999;left: 0%;right: 0%;top: 0%;bottom: 0%;align-items: center;justify-content: center;.showInfoBackView {position: relative;background-color: white;height: 300rpx;width: 50%;}.topTitleView {}}

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.使用非全局組件

創建正常的vue文件，然后添加name，就是使用時的組件名字

<script>export default {name: 'building-control-place-home',data() {return {}},methods: {}} </script>

在需要使用的地方導入此文件

注意：子組件中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 笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。