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
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开发小程序内容请搜索我们以前的文章或继续浏览下面的相关文章。
以上内容希望能够给大家提供帮助。今后想要了解软件教程就关注宝哥软件园!
版权声明：HBuilderX开发一个简单的微信小程序的实现步骤是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益，请联系本站底部QQ或者邮箱删除。
