uniapp 涵盖(html vue css js)
一、网址
内置组件 https://hellouniapp.dcloud.net.cn/pages/component/switch/switch
组件文档 https://www.bookstack.cn/read/uniapp-component/8bbc8a6b239e1fad.md
aip文档 https://uniapp.dcloud.io/api/README
扩展组件uni-ui
https://ext.dcloud.net.cn/plugin?id=55
https://ext.dcloud.net.cn/plugin?name=uni-swipe-action
二、js
19、模板字符串
const powerNum = 3
this.message = `您有${powerNum}次机会`
<view>控制器 {{ `${aeratorRegulator.name}:${aeratorRegulator.eui}` }}</view>
18、some
var a = [11,50,40,3,5,80,90,4]
function some(item,index,array){
console.log(item);
return item>10
}
a.some(some);
//11
//true
注意：some如果遇到 true 就不在执行了。
如果都为 false 返回false。
不会改变原数组
17、vue中this.$set的用法
当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this. s e t （ ） 这 个 方 法 了 ， 简 单 来 说 t h i s . set（）这个方法了，简单来说this. set（）这个方法了，简单来说this.set的功能就是解决这个问题的啦。官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。
const updateData = {
...this.tabList[index],
loadMore: 'loading',
page: this.tabList[index].page + 1
}
this.$set(this.tabList, index, updateData)
16、findIndex 传入一个函数符合条件的数组第一个元素位置
如果没有符合条件的元素返回 -1
15、底部tabbar导航栏右上角添加数字标记
uni.setTabBarBadge({
index: 0,
text: '1'
})
14、indexOf 返回某个指定的字符串值在字符串中首次出现的位置。
如果没有找到匹配的字符串则返回 -1。
var a = [1,2,3,'4','5','6'];
console.log(a.indexOf(3)); //2
console.log(a.indexOf('4')); //3
console.log(a.indexOf(4)); //-1
13、test() 方法用于检测一个字符串是否匹配某个模式
var patt = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/; // 保留两位小数点
let checkRes = patt.test(this.getAmount)
12、includes() 方法用于判断字符串是否包含指定的子字符串。
如果找到匹配的字符串则返回 true，否则返回 false。
var str = "Hello world,";
var n = str.includes("world"); // true
11、数组里的字符串转数字
["9", "8"]
[9, 8]
this.checkList = this.List ? this.List .map(i=>+i) : []
10、监听页面卸载，点击左上返回键触发
onUnload() {}
9、解构赋值
const {firmId, firmName} = this.userDetails
8、隐式转换
123 + ‘’
7、onLoad 监听页面加载
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
console.log(option.id); //打印出上个页面传递的参数。
console.log(option.name); //打印出上个页面传递的参数。
}
6、 !null > true, !undefined > true
if (!firmId) {
return this.showToastMsg(‘商行id错误’)
}
5、JSON.parse() JSON.stringify()
4、tap和click的区别
tap和click都是点击事件。不过移动端有太多复杂的功能是click监听不到的，例如，触摸、按住和轻滑。这时候就要用tap方法了。另外，click事假是点击放开之后才触发的，所以时间上会有延迟，大概200-300ms这样，可是我们在移动端的话就比较追求速度，所以就不能出现说有延迟的情况。所以用tap来代替click事件的话，对于针对移动设备的产品都适合。而且，tap还有一个特点就是『事件穿透』，就是你执行完绑定的tap事件之后呢，如果下面如果绑定了其他事件或者是本身就存在点子事件的话，也会默认触发。
3、if (resp.statusCode === 200 && data.status === 200) {
2、保留小数点后两位
{{item.menoy | toFixedTwo}}
toFixedTwo(value) {
const newVal = parseFloat(value).toFixed(2)
return newVal
}
1、Map
var array1 = [1,4,9,16];
const map1 = array1.map(x => x *2);
console.log(map1);
---------------------------------------------------------
const map1 = array1.map(x => {
if (x == 4) {
return x * 2;
}
});
console.log(map1);
---------------------------------------------------------
const map1 = array1.map(x => {
if (x == 4) {
return x * 2;
}
return x;
});
这里注意箭头函数有两种格式：
1.只包含一个表达式，这时花括号和return都省略了。
2.包含多条语句，这时花括号和return都不能省略。
0、data 命名
imgList:{
path:[]
},
IMAGE_HOST: this.$IMAGE_HOST,
isIPx: getApp().globalData.isIPx,
active: 0, // 当前优惠tab栏
actualStatus: false,
payActive: '现金', // 当前支付方式tab栏
searchTimer: null,
loadMore: 'loading',
triggered: false
payMethod: [{
id: 1,
name: '现金',
img: this.$IMAGE_HOST + '/cash.svg'
},
{
id: 2,
name: '支付宝',
img: this.$IMAGE_HOST + '/Alipay.svg'
},
{
id: 3,
name: '微信',
img: this.$IMAGE_HOST + '/WeChat.svg'
},
{
id: 4,
name: '银联',
img: this.$IMAGE_HOST + '/UnionpayPay.svg'
},
{
id: 5,
name: '其他',
img: this.$IMAGE_HOST + '/else.svg'
},
],
tabList: [
{
id: 1,
name: "推荐",
list: [],
page: 1, // 页码
column_id: 0,
loadMore: 'loading',
triggered: true
},
{
id: 2,
name: '农讯',
list: [],
page: 1,
column_id: 1,
loadMore: 'loading',
triggered: true
},
{
id: 3,
name: '农技',
list: [],
page: 1,
column_id: 2,
loadMore: 'loading',
triggered: true
},
{
id: 4,
name: '农趣',
list: [],
page: 1,
column_id: 3,
loadMore: 'loading',
triggered: true
},
{
id: 5,
name: '热点',
list: [],
page: 1,
column_id: 4,
loadMore: 'loading',
triggered: true
}
],
三、vue
12、this.$nextTick
this.$nextTick(() => {
// dom元素更新后执行，因此这里能正确打印更改之后的值
console.log(that.$refs.tar.innerText) // 改变了的值
})
11、data-id
<button class="nextBtn" :disabled="!pondFlag" :data-id="-1" @click="next">下一步</button>
next({ currentTarget: { dataset }}) {
const { id } = dataset
}
10、三元表达式： :class="isIPx?‘fix-iphonex’:‘’
:class="['title', deviceInfo.onlineFlag === 0 ? 'gay_bg' : deviceInfo.faultFlag === 0 ? 'green_bg' : 'orange_bg']"
:class="['icons', {'close_disabled': deviceInfo.onlineFlag === 0 }]"
:class="['times', timesVal === item.value ? 'selectTimes' : '' ]"
:class="['img', { 'active': item.select }]"
:class="i.status === '异常' ? 'orange_color' : i.status === '正常' ? '' : 'white_color'"
:style
:style="{'backgroundColor':item.infoBackgroundColor?item.infoBackgroundColor:'#ff0000',
color:item.infoColor?item.infoColor:'#fff'}"
:style="{ 'height': showTop ? '0' : '' }"
this.Edit = index === -1 ? false : true
const deviceName = onlineFlag === 0 ? '失联' : faultFlag === 0 ? '' : '异常'
9、金额每三位就添加一个逗号，parseFloat
{{ parseFloat(userDetails.monthReceivableAmount).toLocaleString() }}
8、点击事件 @click
7、:src=“url” 动态传值
6、判断 v-if=‘a > 0’ v-show
5、 三个tab 选择
<view class="tab_item " v-for="(item, index) in tabList" @click="tab(item.id)" :key="index">
<text class="tab_item_text" :class="item.id == activeTab ? 'tab_active' : ''">{{ item.name }}({{ item.totalNum }})</text>
<text :class="item.id == activeTab ? 'tab_item_border' : ''"></text>
</view>
4、显示值
{{ userDetails.firmName || '我的商行' }}
{{ `${info.name}:${info.eui}` }}
<text>{{ `${info.name}:${info.eui}` }}</text>
{{inputValue.length > 500 ? 500 : inputValue.length}}/500
<textarea v-model="inputValue" maxlength="500" placeholder="请输入你的建议和问题,我们会及时处理..." />
3、数字显示样式
<text class="numbers fontDIN">{{ parseInt(userDetails.orderCount || 0).toLocaleString() }}</text>
.fontDIN {
font-family: DINCondensed;
}
2、v-for
<view class="img" v-if="imgList.path!==''" v-for="(item,index) in imgList.path" :key="index">
<image class="image" :src="item" mode="scaleToFill"></image>
1、@click.stop 防止冒泡
四、uniapp
https://hellouniapp.dcloud.net.cn/pages/component/view/view
17、events 页面间通信接口，用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。
// 当前页面的数据
computed: {
fishName() {
if (!this.fishList.length) {
return '请选择'
}
return this.fishList.map(e => e.fishName).join(',')
}
},
breedFish() {
uni.navigateTo({
url: '/pagesDevice/fishPond/breedFish/index',
events: {
acceptData: data => (this.fishList = data)
// 接收被打开页 this.fishList = fishTpye
},
success: res => res.eventChannel.emit('deliver', this.fishList)
})
},
uni.navigateTo({
url: '../newFishPond/index',
events: {
acceptAquafarmId: aquafarmId => {
this.aquafarmId = aquafarmId
this.getFishInfo() // 还可以这样
}
},
success: res => res.eventChannel.emit('sendFishInfo', data)
})
// 被打开页
_updateData() {
const fishTpye = []
this.fingerlingList.filter(e => {
if (e.select) {
delete e.select
const obj = {
...e,
fishId: e.id
}
fishTpye.push(obj)
}
})
this.eventChannel.emit('acceptData', fishTpye)
},
16、
<image :src="item.imgUrl" mode="aspectFit" @error="imgLoadFail(index)" />
15、在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
index.vue
uni.navigateTo({
url: '../newFishPond/index',
events: {
acceptAquafarmId: aquafarmId => {
this.aquafarmId = aquafarmId
this.getFishInfo()
}
},
success: res => res.eventChannel.emit('sendFishInfo', data)
})
test.vue
onLoad() {
const eventChannel = this.getOpenerEventChannel()
this.eventChannel = eventChannel
eventChannel.on('sendFishInfo', data => {
const { isEdit, id, objectVersionNumber, controllCount } = data
this.isEdit = isEdit
this.controllCount = controllCount
if (isEdit) {
uni.setNavigationBarTitle({
title: '编辑鱼塘'
})
}
this.aquafarmId = id
this.objectVersionNumber = objectVersionNumber
this.getFishInfo()
})
},
this.eventChannel.emit('acceptAquafarmId', this.aquafarmId)
14、uni下载
userHelp () {
uni.showLoading({
title: '下载中...',
mask: true
})
uni.downloadFile({
url: '', // 请求链接
success: (res) => {
console.log(res)
if (res.statusCode === 200) {
uni.hideLoading()
uni.saveFile({
tempFilePath: res.tempFilePath,
success:(resp)=> {
console.log(resp.savedFilePath);
uni.showToast({
icon: 'none',
mask: true,
title: '文件已保存：' + resp.savedFilePath, //保存路径
duration: 3000,
});
setTimeout(() => {
//打开文档查看
uni.openDocument({
filePath: resp.savedFilePath,
success: function(respo) {
console.log('打开文档成功');
}
});
},3000)
}
});
}
},
fail: (err) => {
uni.hideLoading()
uni.showToast({
icon: 'none',
mask: true,
title: '失败请重新确认',
});
},
});
}
13、底部tabbar导航栏右上角添加数字标记
uni.setTabBarBadge({
index: 0,
text: '1'
})
12、uniapp动态设置页面标题(title)
uni.setNavigationBarTitle({title:‘设置标题(可以是变量)’})
11、switch
1、标签属性值
switchUserSetting(event) {
const { itemId } = event.target.dataset
}
10、全选，单选，选择
<checkbox :checked="seletedAll" @click="seletedAllCheck"/>全选
<checkbox-group @change="checkboxChange"> 多选
<checkbox :value="item.orderId" :checked="checkList.includes(item.orderId)" />
</checkbox-group>
// checkbox 单选
checkboxChange(e) {
this.checkList = e.detail.value;
this.checkList = e.detail.value ? e.detail.value.map(i=>+i) : []
if (this.checkList.length == this.orderList.length){
this.seletedAll = true;
} else {
this.seletedAll = false;
}
this.getCalculation(this.checkList)
},
// checkbox 全选
seletedAllCheck(e) {
this.checkList=[]
this.totalAmount = 0
this.totalNum = 0
if (!this.seletedAll) {
this.seletedAll=true
this.orderList.map(item=>{
this.checkList.push(item.orderId)
})
} else {
this.seletedAll=false
}
this.getCalculation(this.checkList)
},
9、后台接口
getUserDetails() {
this.$api.getUserDetails().then(resp => {
const data = resp.data
if (resp.statusCode === 200) {
if (data.resCode === 200) {
this.userDetails = data.body
let resetStorageFlag = false
uni.setStorageSync('userSetting', data.body.userSetting)
if (resetStorageFlag) {
uni.setStorageSync('user', this.storageUser)
}
}
}
}).catch(console.log)
},
获取上页面的缓存值
this.areaList = uni.getStorageSync(‘areaList’)
8、传参及接收
// 传参
clickBusinessInfo() {
const { firmId, firmName, firmAddress, firmContactText } = this.userDetails
uni.navigateTo({
url: '../businessInfo/index',
success: res => {
res.eventChannel.emit('transData', { firmId, firmName, firmAddress, firmContactText })
}
})
}
// 接收
onLoad() {
const eventChannel = this.getOpenerEventChannel()
eventChannel.on('transData', ({ firmId, firmName, firmAddress, firmContactText }) => {
this.firmId = firmId
this.firmName = firmName
this.address = firmAddress
this.contactText = firmContactText
})
},
uni.navigateTo({
url: `../aa/index?id=${this.aquafarmId}&code=${this.code}`
})
onLoad({ id, code}) {
this.arr = { id: +id, code: +code}
},
多个传参
let data = { name, eui, id, aquafarmId, aquafarmName }
data = JSON.stringify(data)
uni.navigateTo({
url: `/pages/my/detail/index?data=${data}`
})
接参
onLoad({ data }) {
this.fishPondInfo = JSON.parse(data)
this.getAllController()
},
7、this.showToastMsg(‘设置失败’)
/**
* 提示
*/
showToastMsg(title, icon) {
uni.showToast({
title: title,
icon: icon || 'none',
duration: 3000
})
},
6、跳转到 tabBar 页面只能使用 switchTab 跳转
uni.switchTab({
url: '/pages/index/index'
});
5、@import ‘@/style/mixin.scss’; scss 引入 scss, 在顶部书写
4、跳转
share(){
uni.navigateTo({
url:'../debtList/index'
})
},
3、加载 loading
uni.showLoading({
title: '保存中...',
mask: true
})
uni.hideLoading()
2、弹框
uni.showModal({
title: '后台打印地址',
content: printUrl,
confirmText: '复制',
success: res => {
if (res.confirm) {
uni.setClipboardData({
data: printUrl
})
}
}
})
1、修改标题
uni.setNavigationBarTitle({
title: '修改员工'
})
五、css
4、.container
.container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
height: 100%;
box-sizing: border-box;
}
3、inphoneX 底部兼容，底部高度
.footer {
background: white;
display: flex;
flex-direction: column;
padding: 0 30rpx;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
:class="isIPx ? 'fix-iphonex' : ''"
.fix-iphonex {
padding-bottom: 68rpx !important;
}
2、右上角删除
<view class="deleIcon"></view>
<text class="icon" @click="deleteImg(index,item)">ⅹ</text>
.deleIcon{
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-top: 60rpx solid #ff5555;
border-left: 60rpx solid transparent;
}
.icon{
position: absolute;
top: -4rpx;
right: 4rpx;
color: #f7f7f7;
font-size: 26rpx;
}
1、table 表格
.table_ananlysis {
display: table;
border-collapse: collapse;
width: 610rpx;
.table_tr {
display: table-row;
font-size: 24rpx;
text-align: center;
.table_th {
display: table-cell;
border: 2rpx solid #f1f1f1;
padding: 28rpx 0;
color: #333333;
background-color: #f8f8f8;
}
.table_td {
display: table-cell;
border: 2rpx solid #f1f1f1;
padding: 28rpx 0;
color: #666666;
}
}
}
六、form 表单
3、textarea
<textarea v-model="contactText" auto-height maxlength="255" :disabled="feedbackMsg.status == '录入'?false:true" />
2、input
<input class="stillowing" :value="firmName" focus @input="inputFirmName" placeholder-style="color:#bbb">
inputFirmName({ detail }) {
this.firmName = detail.value
},
inputFirmName: function(event) {
this.inputValue = event.target.value
},
<input
type="number"
v-model="staffUser.phoneNum"
@focus="clickFocus(2)"
:class="status === 2 ? 'focusstyle' : ''"
maxlength="11"
placeholder="请输入员工电话，此号码将用于员工登录"
placeholder-style="color:#bbbbbb;font-size:30rpx"
/>
clickFocus(status) {
this.status = status
},
1、button
<button hover-class='none' type="default">新增</button>
七、组件
1、时间组件
https://ext.dcloud.net.cn/plugin?id=5603
https://ext.dcloud.net.cn/plugin?id=7027
