Uniapp
h5+app
一、安卓提供的方法
- 去掉安卓的头部(false去掉,true保留)
dsBridge.call("showTitleBar", { showTitleBar: false });
this.setTitleBar()
// 去除头部
setTitleBar() {
dsBridge.call("showTitleBar", { showTitleBar: false });
},
- 判断是否在二级页面
let result = dsBridge.call('isBrowserPage')
- 跳转到我的积分
dsBridge.call('toMyScore', {finishPage:true/false}) finishPage 是否关闭当前页(仅二级页面生效)
- 跳转到银行卡列表
提供方法跳转到银行卡列表toBankCardList
dsBridge.call('toBankCardList')
- 去除下滑刷新
提供方法 控制原生 下拉刷新组件的开或关
dsBridge.call('setPullRefresh',{ openPullRefresh:false/true })
使用用例:
第一步:
//关闭
onLoad(){
this.setOffPullRefresh();
}
第二步:
// 关闭下拉刷新,用来控制向下滚不灵敏
setOffPullRefresh() {
dsBridge.call("setPullRefresh", { openPullRefresh: false });
},
- 结束当前页面(在h5页面的首页使用)
原生方法 dsBridge.call("finishPage");
<image
@tap="goBack"
slot="back"
class="uni-mage"
src="../../static/images/nav_back1.png"
mode="widthFix"
></image>
goBack() {
dsBridge.call("finishPage");
},
- 杂
3.封装原生方法供Js调用
1.toLogin() 跳转登录页
2.andToast(msg) 安卓原生toast
3.finishPage() 结果当前页面(仅二级页面Activity生效)
4.changeHomePage({index:0-4})切换首页选中页(0. 首页 1. 自营商城 2. 1元购 3.同城生活 4.我的)
- 获取积分的Json文件
dsBridge.call("getScoreConfig");
这里由于,直接调用在控制台显示不出来,所以
(重点)
这里封装成了一个方法,并且写死了json文件的内容。之后替换成安卓的方法
如何使用getCoin方法?
1、在需要的组件中进行导入
import { getCoin } from "@/common/util.js";
mounted() {
this.initCoinType();
},
data:{
coinObj:[]
},
methods: {
initCoinType() {
this.coinObj = getCoin();
},
},
这样coinOjb就是一个各个积分类型的数组。
// 格式化积分类型获取积分名称
formatterCoinNameType(type) {
const obj = this.coinObj.find((item) => item.type === type);
return obj.currencyName;
},
// 格式化积分类型获取积分图片
formatterCoinImageType(type) {
const obj = this.coinObj.find((item) => item.type === type);
return obj.currencyImageUrl;
},
二、页面初始模板
1.基础页面
<template>
<view class="container">
<header-bar
:isBack="true"
:fixed="true"
:searchShow="false"
:bgColor="{ backgroundColor: '#fff' }"
>
<image
slot="back"
class="uni-mage"
src="../../static/images/nav_back1.png"
mode="widthFix"
></image>
<!-- 这里是通过插槽来动态的展示内容 -->
<view slot="headerL" style="margin-left: 134rpx;color:black;">
积分市场
</view>
<view slot="string" style="color: black;">我的积分</view>
</header-bar>
<view class="content">
初始模板
</view>
</view>
</template>
<script>
import headerBar from "@/components/NavigationBar/NavigationBar.vue";
import {
GETUserGiftList,
} from "@/api/myGift.js";
import { GETReceiveGift } from "@/api/dailyGift.js";
import { getCoin } from "@/common/util.js";
export default {
components: {
headerBar,
},
data() {
return {
// 状态栏高度
statusBarH: getApp().globalData.statusBar,
customBarH: getApp().globalData.customBar,
};
},
onLoad() {
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.uni-mage {
width: 18rpx;
height: 36rpx;
}
.container {
height: 100%;
.content {
// 由于上面是定位不占位而
padding-top: 50rpx;
}
}
</style>
2.基础列表页面
<template>
<view class="container">
<header-bar
:isBack="true"
:fixed="true"
:searchShow="false"
:bgColor="{ backgroundColor: '#fff' }"
>
<image
slot="back"
class="uni-mage"
src="../../../static/images/nav_back1.png"
mode="widthFix"
></image>
<view slot="headerL" style="margin-left: 134rpx; color: black">
全平台正在寄售
</view>
<view slot="iconfont" style="color: black"><van-icon name="question-o" /></view>
<view slot="string" style="color: black;margin: 0 19rpx 0 0;font-size: 24rpx;">寄售记录</view>
</header-bar>
<view class="content">
<!-- <view-scroll>
</view-scroll> -->
<view class="list">
<view class="item" v-for="(item,index) in 20" :key="index">
<view class="item-top">
<view class="item-top-left">
<image style="width: 30rpx; height: 30rpx"
></image
>
<view>爱而不得</view>
</view>
<view class="item-top-right"
>2022年8月18日10:30:47</view
>
</view>
<view class="divider"></view>
<view class="item-bottom">
<view class="item-bottom-left">
<image
style="width: 100rpx; height: 100rpx"
></image>
</view>
<view class="item-bottom-right">
<view class="item-bottom-right-top">积分类型</view>
<view class="item-bottom-right-middle"
>积分数量:500个</view
>
<view class="item-bottom-right-bottom">
<view>收购单位: ¥1.00</view>
<view>总价值: ¥500.00</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import headerBar from "@/components/NavigationBar/NavigationBar.vue";
import { GETUserGiftList } from "@/api/myGift.js";
import { GETReceiveGift } from "@/api/dailyGift.js";
import { getCoin } from "@/common/util.js";
export default {
components: {
headerBar,
},
data() {
return {
// 状态栏高度
statusBarH: getApp().globalData.statusBar,
customBarH: getApp().globalData.customBar,
};
},
onLoad() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.uni-mage {
width: 18rpx;
height: 36rpx;
}
.container {
height: 100%;
.content {
// 由于上面是定位不占位而
padding-top: 50rpx;
.list {
width: calc(100% - 48rpx);
padding: 20rpx 24rpx;
.item {
height: 218rpx;
background: #ffffff;
border-radius: 10rpx;
padding: 18rpx;
margin-bottom: 20rpx;
.item-top {
display: flex;
justify-content: space-between;
font-size: 20rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #999999;
.item-top-left {
display: flex;
}
}
.divider {
height: 1rpx;
background: #e5e5e5;
margin: 16rpx 0 20rpx 0;
}
.item-bottom {
display: flex;
.item-bottom-right {
margin-left: 20rpx;
.item-bottom-right-top {
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: bold;
color: #333333;
}
.item-bottom-right-middle {
font-size: 20rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #999999;
}
.item-bottom-right-bottom {
font-size: 22rpx;
font-family: Source Han Sans CN;
color: #ff4343;
}
}
}
}
}
}
}
</style>
触底刷新功能
在页面最底下,引入,弄成下面这种。
原来
</view>
</template>
现在
<view class="loading">
<Uniloadmore :status="loadStatus"></Uniloadmore>
</view>
</view>
</template>
data中定义两个变量
loadStatus: "loading", //加载样式:more-加载前样式,loading-加载中样式,nomore-没有数据样式
isLoadMore: false, //是否加载中
然后,在getList中使用这种结构
getList() {
const params = {
pageSize: this.page.pageSize,
pageNum: this.page.pageNum,
};
GETAllConsignForSales(params)
.then((res) => {
if (res.data.length < this.page.pageSize) {
this.list = this.list.concat(res.data);
this.isLoadMore = false;
this.loadStatus = "nomore";
this.page.total = res.totalNum;
} else {
this.list = this.list.concat(res.data);
this.isLoadMore = true;
}
})
.catch(({ msg }) => {
uni.showToast({
title: msg,
icon: "none",
});
});
},
写出触底方法
onReachBottom() {
if (this.isLoadMore == true) {
this.isLoadMore = false;
this.page.pageNum += 1;
this.getList();
}
},
三、支付输入密码弹窗
1、弹窗代码
<van-dialog
use-slot
title=""
:show="showInput"
:zIndex="0"
:show-confirm-button="false"
:show-cancel-button="false"
confirm-button-open-type="getUserInfo"
bind:close="onClose"
:overlay="true"
:overlayStyle="{ 'background-color': 'red', opcity: 1 }"
bind:getuserinfo="getUserInfo"
>
<view slot="default" class="dialog-box">
<view class="dialog-head">
<image
class="close"
@click="showInput = false"
src="../../../static/images/icon-close.png"
mode="widthFix"
></image>
</view>
<view class="dialog-body">
<view class="text1"><text>请输入支付密码</text></view>
<view class="text2"
><text>金额: {{ withdrawalMoney }}元</text></view
>
<view class="inputs">
<view class="input-wrap" style="font-size: 42rpx">
<!-- 页面显示 如果想要加密形式 给此input加上 password="true" 属性-->
<input
class="input1"
type="number"
password="true"
v-for="(item, index) in input_len"
@tap="onInput"
:key="index"
disabled
:value="
input_val.length >= index + 1
? input_val[index]
: ''
"
/>
</view>
<!-- 实际监听 -->
<input
class="input2"
v-if="isFocus"
@blur="blurInput"
@input="setInput"
v-model="input_val"
:maxlength="6"
type="number"
pattern="[0-9]*"
:focus="true"
/>
</view>
</view>
</view>
</van-dialog>
2、样式先拿过来
.dialog-box {
// background: #FFFFFF;
// border-radius: 10rpx;
.dialog-head {
width: calc(100% - 40rpx);
height: 75rpx;
display: flex;
align-items: center;
padding: 0 20rpx;
.close {
width: 25rpx;
}
}
.dialog-body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 40rpx 0;
.text1 {
font-size: 32rpx;
font-family: Source Han Sans CN;
font-weight: 500;
color: #333333;
}
.text2 {
margin-top: 40rpx;
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
}
.text3 {
margin-top: 40rpx;
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
}
.inputs {
margin-top: 40rpx;
height: 150rpx;
.input-wrap {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
.input1 {
width: 80rpx;
height: 80rpx;
border-bottom: 1px solid rgba(229, 229, 229, 1);
border-top: 1px solid rgba(229, 229, 229, 1);
border-left: 1px solid rgba(229, 229, 229, 1);
justify-content: center;
text-align: center;
}
.input1:last-child {
border-right: 1px solid rgba(229, 229, 229, 1);
}
}
.input2 {
height: 50px;
width: 100%;
opacity: 0;
}
.input2:focus {
height: 0;
width: 0;
}
}
}
}
3、data数据
showInput: false,
input_len: 6, // 支付密码长度
input_val: "", // 支付密码的值
isFocus: false,
4、方法
handleSell() {
this.showInput = true
},
// 点击密码框聚焦
onInput() {
this.isFocus = true;
},
// 第一步、监听密码框
setInput(e) {
this.input_val = e.detail.value;
if (this.input_val.length == 6) {
this.showInput = false;
}
},
// 第二步、输入之后
blurInput() {
this.isFocus = false;
if (this.input_val.length == 6) {
this.collectCoinSell();
}
},