HBuilderX開發(fā)一個簡單的微信小程序的實現(xiàn)步驟

更新時間：2022年02月10日 10:32:00 作者：w3222371135

本文主要介紹了HBuilderX開發(fā)一個簡單的微信小程序的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一、配置

在微信開發(fā)者工具的設置中開啟，如圖：

在這里插入圖片描述

在HBuilderX中新建項目，選擇uni-app，如圖：

在這里插入圖片描述

在HBuilderX中編寫代碼

在這里插入圖片描述

目錄結構如圖：

在這里插入圖片描述

編寫代碼：

index.less

.content{
	padding: 0 40rpx;
	image{
		width: 100%;
	}
	.title{
		display: block;
		text-align: center;
		font-size: 50rpx;
		font-weight: bold;
	}
	.operate{
		text-align: center;
		margin-top: 30rpx;
		.btn{
			width: 200rpx;
			height: 80rpx;
			display: inline-block;
		}
		.btn:first-of-type{
			margin-right: 40rpx;
		}
	}
	.message{
		font-size: 34rpx;
		margin: 15rpx 0;
		color: #333;
	}
}

App.vue

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每個頁面公共css */
</style>

index.vue

<template>
	<view class="content">
		<image src="../../static/g1.gif" mode="widthFix"></image>
		<text class="title">鵲伴相依間，佳期又一年</text>
		<text class="title">做我女朋友吧！</text>
		<view class="operate">
			<button type="primary" class="btn" @tap="agree">好呀</button>
			<button type="warn" class="btn" @tap="disagree">不好</button>
		</view>
		<view class="message" v-for="one in love":key="one">{{one}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				love:[],
				timer:{}
			}
		},
		onLoad() {
			this.back=uni.getBackgroundAudioManager()
			this.back.src="http://140.143.132.225/love/pdd.mp3"
			this.back.title="音樂"
			this.back.play()
		},
		onShow(){
			this.love=[]
			this.timer={}
			let msg={
				2000: "我愛你！",
				4000: " I love you! (英語)",
				6000: "愛しています (日語)",
				8000: " ich liebe dich! (德語)",
				10000: "я люблю тебя! (俄語)",
				12000: "ti amo! (意大利語)",
				14000: "te amo! (西班牙語)",
				16000: "? ????! (韓語)",
				18000: "jeg elsker dig! (丹麥語)",
				20000: "σ 'αγαπ?! (希臘語)"
			} 
			let ref=this;
			for(let key in msg){
				let t=setTimeout(function(){
					ref.love.push(msg[key])
					delete ref.timer[key]
				},key)
				ref.timer[key]=t
			}
		},
		onHide:function(){
			for(let key in this.timer){
				clearTimeout(this.timer[key])
			}
		},
		methods: {
             agree:function(){
				 uni.showToast({
				 	icon:"none",
					title:"我就知道你一定會同意",
					duration:4000
				 })
			 },
			 disagree:function(){
				 uni.showModal({
				 	title:"要不要當我女朋友",
					content:"（：",
					cancelText:"拒絕",
					confirmText:"同意",
					success:function(res){
						if(res.confirm){
							uni.showToast({
								icon:"none",
								title:"我就知道你一定會同意",
								duration:4000
							})
						}
						else{
							uni.showToast({
								icon:"none",
								title:"你錯過了一個億",
								duration:4000
							})
						}
					}
				})
			 }
		}
	}
</script>

<style lang="less">
	@import url("index.less");
	
</style>