設(shè)置全屏的開屏廣告需求實(shí)現(xiàn)
效果圖：
點(diǎn)擊跳轉(zhuǎn)其他小程序：
uni.navigateToMiniProgram()
官方文檔：uni.navigateToMiniProgram(OBJECT) | uni-app官網(wǎng)
// 示例代碼
uni.navigateToMiniProgram({
appId: '',
path: 'pages/index/index?id=123',
extraData: {
'data1': 'test'
},
success(res) {
// 打開成功
}
})全屏展示圖片：
"navigationStyle": "custom"?
導(dǎo)航欄樣式，僅支持 default/custom。custom即取消默認(rèn)的原生導(dǎo)航欄
完整代碼演示：
- 創(chuàng)建一個(gè)新的頁面，用于顯示廣告頁面
<template>
<div class="ad-container">
<div class="ad-content">
<img src="https://5b0988e595225.cdn.sohucs.com/images/20200426/fcd7643a0b2146d58934366b6ccbf680.jpeg" alt="廣告圖片" class="ad-image" @click="redirectToMiniProgram">
<div class="countdown">{{ countdown }}秒</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
countdown: 5,
timer: null
};
},
mounted() {
this.timer = setInterval(() => {
this.countdown--;
if (this.countdown === 0) {
clearInterval(this.timer);
uni.redirectTo({
url: '/pages/index/index' // 要跳轉(zhuǎn)的首頁路徑
});
}
}, 1000);
},
beforeDestroy() {
clearInterval(this.timer);
},
methods: {
redirectToMiniProgram() {
uni.navigateToMiniProgram({
appId: '其他小程序的AppID', // 要跳轉(zhuǎn)的小程序的AppID
path: '/pages/index/index', // 要跳轉(zhuǎn)的小程序頁面路徑
extraData: {}, // 額外的數(shù)據(jù)，可選
success(res) {
console.log('跳轉(zhuǎn)成功');
},
fail(err) {
console.error('跳轉(zhuǎn)失敗', err);
}
});
}
}
}
</script>
<style>
.ad-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
/* 全屏高度 */
}
.ad-content {
text-align: center;
}
.ad-image {
width: 100vw;
height: 100vh;
}
.countdown {
position: absolute;
left: 238rpx;
top: 74rpx;
color: white;
font-size: 24px;
}
</style>- 修改?
manifest.json?文件，將廣告頁面添加到頁面配置中
長按識別圖片需求實(shí)現(xiàn)
?效果圖：
支持識別類型：
? 識別小程序碼 - ? 跳轉(zhuǎn)小程序
? 識別微信、企微群二維碼 - ? 跳轉(zhuǎn)到加群頁面
? 識別名片二維碼 - ? 跳轉(zhuǎn)到加好友頁面
完整代碼：
<template>
<!-- show-menu-by-longpress 開啟長按圖片顯示識別小程序碼菜單 -->
<image show-menu-by-longpress="true" @click="previewImage"
src="../../static/123.png" style="width: 100%;height: 45vh;">
</image>
</template>
<script>
export default {
data() {
return {}
},
methods: {
//長按識別二維碼
previewImage(e) {
uni.previewImage({
// 需要預(yù)覽的圖片鏈接列表。若無需預(yù)覽，可以注釋urls
urls: [e.target.src],
// 為當(dāng)前顯示圖片的鏈接/索引值
current: e.target.src,
// 圖片指示器樣式
indicator: 'default',
// 是否可循環(huán)預(yù)覽
loop: false,
success: res => {
console.log('previewImage res', res);
},
fail: err => {
console.log('previewImage err', err);
}
});
}
}
}
</script>點(diǎn)擊跳轉(zhuǎn)通話 撥打電話需求實(shí)現(xiàn)
?效果圖：
代碼展示：
<template>
<view class="page-map">
<view class="btn" @click="telFun()" style="text-align: center;">電話咨詢</view>
</view>
</template>
<script>
export default {
data() {
return {}
},
methods: {
//撥打電話：
telFun() {
uni.makePhoneCall({
phoneNumber: '135xxxxxxxxxx', //電話號碼
success: function(e) {
console.log(e);
},
fail: function(e) {
console.log(e);
}
})
},
}
}
</script>
<style lang="scss" scoped>
</style>注解：
uni.makePhoneCall(OBJECT)? ??撥打電話文章來源：http://www.zghlxwxcb.cn/news/detail-665578.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-665578.html
到了這里，關(guān)于【uniapp開發(fā)小程序】設(shè)置全屏的開屏廣告、長按識別圖片、點(diǎn)擊跳轉(zhuǎn)通話 撥打電話的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
