Uniapp

最新推荐文章于 2024-04-03 16:24:54 发布
最新推荐文章于 2024-04-03 16:24:54 发布
阅读量689 收藏
点赞数
文章标签： uni-app vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pinenutssg1/article/details/126481117
版权

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();
			}
		},
松果pine吃玉米
关注
uniapp人脸监测，uniapp人脸生物监测
10-30
uniapp人脸生物监测uniapp人脸生物监测uniapp人脸生物监测uniapp人脸生物监测uniapp人脸生物监测uniapp人脸生物监测uniapp人脸生物监测uniapp人脸生物监测uniapp人脸生物监测uniapp人脸生物监测uniapp人脸生物监测...
uniapp数独小游戏
09-22
uniapp数独小游戏，纯静态资源内置了33个不同难度的管卡可自行选择，可直接在HBuilder运行。
混合开发，app嵌套H5，dsbridge.js的使用
cd13849109771的博客
10-29 2584
混合开发，app嵌套H5，dsbridge.js的使用和优缺点 说实话，刚接触混合开发就是用的dsbridge.js,真的是超级简洁、好用
dsBridge —— 让h5调用app原生功能
weixin_44314609的博客
03-23 1217
dsBridge —— 让h5调用app原生功能
DSBridge框架使用说明，Android常用面试
最新发布
04-03 669
/必须给第一个参数前添加下划线"_"来显式忽略参数名。//注册 javascript API。
【Hybrid App混合开发系列】 手把手带你封装跨平台的灵魂工具--DSBridge 通信桥接
坐槐不乱的编码之旅
10-30 569
todo
uniapp动态修改样式_掌握Photoshop图层样式技术
weixin_29689845的博客
12-30 503
凹凸贴图效果“等等，什么？” 您会惊叹：““图层样式”菜单中没有凹凸贴图效果！” 的确如此，但是通过将“图案覆盖”和“斜面和浮雕”结合使用，我们可以使用可控光源实现带纹理的凹凸贴图表面。此技术需要两张图像：一个用于纹理和颜色，另一个用于深度图。深度图不需要任何色相，因为它基于复合值确定深度，黑色是最低值，白色是最高值。在某些情况下，您可能会为两者使用相同的图像，但是在我们的示例中，我们将使用完全不...
APP和VUE之间的传值方法调用之dsbridge
这是一个前端小白的博客。
08-24 1392
vue和app之间的通讯。
uniapp 在线预览pdf
09-18
uniapp 在线预览pdf
Uniapp演示Demo
04-05
Uniapp演示Demo
uniapp读取exlsx文件内容
12-26
uniapp读取exlsx文件内容
android-DsBridge
05-22
android原生与h5交互框架 非常好用直接运行可单独达成aar包 到项目中
Android代码-DSBridge-Android
08-06
DSBridge for Android >Modern cross-platform JavaScript bridge, through which you can invoke each other's functions synchronously or asynchronously between JavaScript and native applications. Chinese documentation 中文文档 DSBridge-IOS：https://github.com/wendux/DSBridge-IOS Tencent x5 webcore support Notice DSBridge v3.0 is a milestone version. Compared with v2.0, we have made a lot of changes. Note that v3.0 is incompatible with v2.0, but v2.0 will continue to maintain. If you are a new user
uniApp或者vue 与 Android或者ios原生交互
07-18
uniApp或者vue 与 Android或者ios实现原生交互，使用bridge.js可以轻松实现。
uni-app 弹出层组件的实现
忧郁的蛋的专栏
04-08 1043
在使用此组件时，可以通过传递“visible”属性来控制弹出层的显示和隐藏，通过 position 属性控制弹出层的位置。可以在组件的插槽中添加内容。
dsBridge之h5和app如何相互通信？
铃儿响叮当
08-24 352
注意：以下内容均为h5页面代码。
DSBridge框架使用说明
热门推荐
chenzimin_blog
08-27 1万+
目录前言特性安装**实现四步骤**OC API 命名注意事项在Swift中使用命名空间管理API调试模式设置进度回调设置Javascript 弹出框样式使用DSUIDelegateAPI 列表说明Object-C APIJavascript API和 fly.js一起使用 前言 JSBridge VS DSBridge这篇博客对JS交互分析的优缺点相对比较全面（虽然有点自卖自夸????????）。之前用过JSBridge，有些PK比较持保留意见哈。由于现在的项目使用的是DSBridge，没有接触过，就对这个
dsBridge 与 iOS交互 - swift
A good man
10-18 1108
1.加载本地的HTML页面使用DWKWebView 展示出来 let templatePath = Bundle.main.path(forResource: "test.html", ofType: nil)! let template = (try? String(contentsOfFile: templatePath, encoding: String.Encodin...
uniapp 429
03-13
UniApp是一种基于Vue.js框架的跨平台开发框架，它可以帮助开发者使用一套代码同时构建iOS、Android、H5等多个平台的应用程序。UniApp具有以下特点： 1. 跨平台：使用UniApp可以使用一套代码开发多个平台的应用程序，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值