HBuilderX开发一个简单的微信小程序的实现步骤

网友投稿 515 2023-11-08

−目录一、配置二、运行

一、配置

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

HBuilderX开发一个简单的微信小程序的实现步骤

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

在HBuilderX中编写代码

目录结构如图：

编写代码：

index.less

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.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

index.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<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

您可能感兴趣的文章:浅谈HBuilderX开发小程序的一些问题

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 代码 配置
上一篇:小程序推广的5个实用方法
下一篇:券商测试开发: 探索金融行业中的技术创新
相关文章

 发表评论

暂时没有评论，来抢沙发吧~