如何使用HBuilderX开发一个简单的微信小程序(hbuilderx,小程序,开发技术)

一、配置

在微信开发者工具的设置中开启，如图：

在HBuilderX中新建项目，选择uni-app，如图：

在HBuilderX中编写代码

目录结构如图：

编写代码：

index.less

.content{ padding:040rpx; 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:15rpx0; color:#333; }}

App.vue

<script> exportdefault{ onLaunch:function(){ console.log('AppLaunch') }, onShow:function(){ console.log('AppShow') }, onHide:function(){ console.log('AppHide') } }</script><style> /*每个页面公共css*/</style>

index.vue

<template> <viewclass="content"> <imagesrc="../../static/g1.gif"mode="widthFix"></image> <textclass="title">鹊伴相依间，佳期又一年</text> <textclass="title">做我女朋友吧！</text> <viewclass="operate"> <buttontype="primary"class="btn"@tap="agree">好呀</button> <buttontype="warn"class="btn"@tap="disagree">不好</button> </view> <viewclass="message"v-for="oneinlove":key="one">{{one}}</view> </view></template><script> exportdefault{ 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={} letmsg={ 2000:"我爱你！", 4000:"Iloveyou!(英语)", 6000:"愛しています(日语)", 8000:"ichliebedich!(德语)", 10000:"ялюблютебя!(俄语)", 12000:"tiamo!(意大利语)", 14000:"teamo!(西班牙语)", 16000:"나사랑해요!(韩语)", 18000:"jegelskerdig!(丹麦语)", 20000:"σ'αγαπώ!(希腊语)" } letref=this; for(letkeyinmsg){ lett=setTimeout(function(){ ref.love.push(msg[key]) deleteref.timer[key] },key) ref.timer[key]=t } }, onHide:function(){ for(letkeyinthis.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><stylelang="less"> @importurl("index.less");</style>

二、运行

选择运行—运行到小程序模拟器—微信开发者工具
（如果出现编译不通过的问题，可在工具的插件安装里安装相应的插件）
编译完成后，可在微信开发者工具中预览和发布（选择上传操作，填相关信息，并在微信公众号后台网站实现审核和发布）