目录
一、配置
二、运行
一、配置
在微信开发者工具的设置中开启,如图:
在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
export default {
onL宝哥软件园aunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
/*每个页面公共css */
index.vue
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: "나 사랑해요! (韩语)"pBbeA,
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
})
}
}
})
}
}
}
@import url("index.less");
二、运行
选择运行—运行到小程序模拟器—微信开发者工具
(如果出现编译不通过的问宝哥软件园题,可在工具的插件安装里安装相应的插件)
编译完成后,可在微信开发者工具中预览和发布(选择上传操作,填相关信息,并在微信公众号后台网站实现审核和发布)
到此这篇关于HBuilderX开发一个简单的微信小程序的实现步骤的文章就介绍到这了,更多相关HBuilderX开发小程序内容请搜索我们以前的文章或继续浏览下面的相关文章。
以上内容希望能够给大家提供帮助。今后想要了解软件教程就关注宝哥软件园!