Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use HBuilderX to develop a simple WeChat Mini Programs. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

I. configuration

Open it in the settings of Wechat developer tool, as shown in the figure:

Create a new project in HBuilderX and select uni-app, as shown in the figure:

Write code in HBuilderX

The directory structure is shown in the figure:

Write code:

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 {onLaunch: function () {console.log ('App Launch')}, onShow: function () {console.log (' App Show')} OnHide: function () {console.log ('App Hide')}} / * Public css per page * /

Index.vue

Magpie companions depend on each other, and another year to be my girlfriend! Yes, no, 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=" Music this.back.play ()} OnShow () {this.love= [] this.timer= {} let msg= {2000: "I love you!" , 4000: "I love you! (English) ", 6000:" Japanese language ", 8000:" ich liebe dich! (German) ", 10000:" I don't know what to do. (Russian) ", 12000:" ti amo! (Italian) ", 14000:" te amo! (Spanish) ", 16000:" I don't know what to do! (Korean) ", 18000:" jeg elsker dig! (Danish) ", 20000:" σ'α γ α π! (Greek) "} 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: "I knew you would agree" Duration:4000})}, disagree:function () {uni.showModal ({title: "do you want to be my girlfriend" Content: "(:", cancelText: "refuse", confirmText: "agree" Success:function (res) {if (res.confirm) {uni.showToast ({icon: "none" Title: "I knew you'd agree." Duration:4000})} else { Uni.showToast ({icon: "none" Title: "you missed 100 million." Duration:4000})}} }) @ import url ("index.less") II. Operation

Select run-run to Mini Program Simulator-Wechat developer tool

(if the compilation fails, you can install the corresponding plug-in in the plug-in installation of the tool)

After the compilation is completed, you can preview and publish in the Wechat developer tool (select the upload operation, fill in the relevant information, and review and publish in the Wechat official account backend website)

This is the end of this article on "how to use HBuilderX to develop a simple WeChat Mini Programs". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.