HBuilderX開(kāi)發(fā)一個(gè)簡(jiǎn)單的微信小程序的實(shí)現(xiàn)步驟
一、配置
在微信開(kāi)發(fā)者工具的設(shè)置中開(kāi)啟,如圖:

在HBuilderX中新建項(xiàng)目,選擇uni-app,如圖:

在HBuilderX中編寫(xiě)代碼

目錄結(jié)構(gòu)如圖:

編寫(xiě)代碼:
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>
/*每個(gè)頁(yè)面公共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="音樂(lè)"
this.back.play()
},
onShow(){
this.love=[]
this.timer={}
let msg={
2000: "我愛(ài)你!",
4000: " I love you! (英語(yǔ))",
6000: "愛(ài)しています (日語(yǔ))",
8000: " ich liebe dich! (德語(yǔ))",
10000: "я люблю тебя! (俄語(yǔ))",
12000: "ti amo! (意大利語(yǔ))",
14000: "te amo! (西班牙語(yǔ))",
16000: "? ????! (韓語(yǔ))",
18000: "jeg elsker dig! (丹麥語(yǔ))",
20000: "σ 'αγαπ?! (希臘語(yǔ))"
}
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:"我就知道你一定會(huì)同意",
duration:4000
})
},
disagree:function(){
uni.showModal({
title:"要不要當(dāng)我女朋友",
content:"(:",
cancelText:"拒絕",
confirmText:"同意",
success:function(res){
if(res.confirm){
uni.showToast({
icon:"none",
title:"我就知道你一定會(huì)同意",
duration:4000
})
}
else{
uni.showToast({
icon:"none",
title:"你錯(cuò)過(guò)了一個(gè)億",
duration:4000
})
}
}
})
}
}
}
</script>
<style lang="less">
@import url("index.less");
</style>
二、運(yùn)行
選擇運(yùn)行—運(yùn)行到小程序模擬器—微信開(kāi)發(fā)者工具
(如果出現(xiàn)編譯不通過(guò)的問(wèn)題,可在工具的插件安裝里安裝相應(yīng)的插件)
編譯完成后,可在微信開(kāi)發(fā)者工具中預(yù)覽和發(fā)布(選擇上傳操作,填相關(guān)信息,并在微信公眾號(hào)后臺(tái)網(wǎng)站實(shí)現(xiàn)審核和發(fā)布)
到此這篇關(guān)于HBuilderX開(kāi)發(fā)一個(gè)簡(jiǎn)單的微信小程序的實(shí)現(xiàn)步驟的文章就介紹到這了,更多相關(guān)HBuilderX開(kāi)發(fā)小程序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于JS簡(jiǎn)單實(shí)現(xiàn)手持彈幕功能+文字抖動(dòng)特效代碼
這篇文章主要介紹了基于JS簡(jiǎn)單實(shí)現(xiàn)手持彈幕功能+文字抖動(dòng)特效代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03
Iphone手機(jī)、安卓手機(jī)瀏覽器控制默認(rèn)縮放大小的方法總結(jié)(附代碼)
這篇文章主要介紹了Iphone手機(jī)、安卓手機(jī)瀏覽器控制默認(rèn)縮放大小的方法,通過(guò)meta標(biāo)簽中添加屬性代碼展示控制瀏覽器的默認(rèn)縮放,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08
JS利用循環(huán)解決的一些常見(jiàn)問(wèn)題總結(jié)
循環(huán)輸出問(wèn)題是面試中經(jīng)典的題目,一般會(huì)給出代碼,讓我們解釋原因,并給出若干解決方案,下面這篇文章主要給大家介紹了關(guān)于JS利用循環(huán)解決的一些常見(jiàn)問(wèn)題,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
js定時(shí)器出現(xiàn)第一次延遲的原因及解決方法
在本篇文章里小編給大家整理的是一篇關(guān)于js定時(shí)器出現(xiàn)第一次延遲的原因及解決方法,對(duì)此有需要的朋友們可以學(xué)習(xí)下。2021-01-01
JS實(shí)現(xiàn)獲取GIF總幀數(shù)的方法詳解
如何通過(guò)js在上傳前就拿到它的總幀數(shù)來(lái)判斷呢?本文就跟大家分享一種解決方案,并將其封裝成插件發(fā)布至npm倉(cāng)庫(kù),快跟隨小編一起學(xué)習(xí)一下吧2022-05-05
JavaScript獲得當(dāng)前網(wǎng)頁(yè)來(lái)源頁(yè)面(即上一頁(yè))的方法
這篇文章主要介紹了JavaScript獲得當(dāng)前網(wǎng)頁(yè)來(lái)源頁(yè)面(即上一頁(yè))的方法,涉及javascript中document.referrer方法的使用技巧,需要的朋友可以參考下2015-04-04

