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)文章
如何使Chrome控制臺(tái)支持多行js模式——意外發(fā)現(xiàn)
一直以來(lái),Chrome控制臺(tái)都缺少象IE調(diào)試臺(tái)那樣的多行執(zhí)行模式,今天意外發(fā)現(xiàn)Chrome其實(shí)也支持多行模式2013-06-06將json當(dāng)數(shù)據(jù)庫(kù)一樣操作的javascript lib
使用javascript操作JSON的類庫(kù)TAFFY DB,具體介紹了:查詢數(shù)據(jù)、添加數(shù)據(jù)、刪除數(shù)據(jù)、修改數(shù)據(jù)。2013-10-10layui時(shí)間控件選擇時(shí)間范圍的實(shí)現(xiàn)方法
今天小編就為大家分享一篇layui時(shí)間控件選擇時(shí)間范圍的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09Javascript Echarts空氣質(zhì)量地圖效果詳解
這篇文章主要介紹了詳解Javascript利用echarts畫(huà)空氣質(zhì)量地圖,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-10-10微信小程序下面商品左右滑動(dòng)上面tab也跟隨變動(dòng)功能實(shí)現(xiàn)
這篇文章主要介紹了小程序下面商品左右滑動(dòng)上面tab也跟隨變動(dòng)功能,也就是點(diǎn)擊tab切換下面的商品信息,滑動(dòng)下面的商品信息tab也進(jìn)行切換,本文給大家分享實(shí)現(xiàn)代碼,需要的朋友可以參考下2022-07-07js+h5 canvas實(shí)現(xiàn)圖片驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了js+h5 canvas實(shí)現(xiàn)圖片驗(yàn)證碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10ECMAScript6函數(shù)剩余參數(shù)(Rest Parameters)
這篇文章主要介紹了ECMAScript6函數(shù)剩余參數(shù)(Rest Parameters)的相關(guān)資料,需要的朋友可以參考下2015-06-06JavaScript callback回調(diào)函數(shù)用法實(shí)例分析
這篇文章主要介紹了JavaScript callback回調(diào)函數(shù)用法,結(jié)合實(shí)例形式分析了callback回調(diào)函數(shù)的概念、功能、應(yīng)用場(chǎng)景及相關(guān)使用技巧,需要的朋友可以參考下2018-05-05JavaScript Konami Code 實(shí)現(xiàn)代碼
JavaScript Konami Code 實(shí)現(xiàn)代碼2009-07-07