如何使用HBuilderX開發一個簡單的微信小程序

這篇文章將為大家詳細講解有關如何使用HBuilderX開發一個簡單的微信小程序，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

一、配置

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

在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>

二、運行

選擇運行—運行到小程序模擬器—微信開發者工具
（如果出現編譯不通過的問題，可在工具的插件安裝里安裝相應的插件）
編譯完成后，可在微信開發者工具中預覽和發布（選擇上傳操作，填相關信息，并在微信公眾號后臺網站實現審核和發布）

關于“如何使用HBuilderX開發一個簡單的微信小程序”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。