Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

The introduction

  • HBuliderX development version: www.dcloud.io/hbuilderx.h…

  • WeChat small program development tools: developers.weixin.qq.com/miniprogram…

  • Serverless WordPress site: kunnan.blog.csdn.net/article/det…

  • Versioning: git.weixin.qq.com/dashboard/p…

Case: small program: iOS reverse, welcome to search experience exchange.

I HBuliderX use

1.1 Running configuration of HBuliderX

After downloading and installing HBuliderX, click on the upper left corner of preferences Settings – Run Configuration – configure the corresponding development tool path

Any code can only be modified in HBuilder X to take effect. The modified code can only be used in HbuilderX.

1.2 Running debugging of HBuliderX

Click Run — Run the mini program simulator — wechat mini program developer tool

If the startup is wrong, it is usually because the wechat developer tool is not logged in, or the tool does not open the security port (Settings – security Settings – security).

After setting the security port, you need to restart the wechat small program developer tool for it to take effect

1.3 Basic Project Configuration

  • Open mainfest.json file for appID and wechat applets configuration

  • Modify the page structure: pages.json

  • Custom header styles can be modified at line 22 in the compoents/fengrui.css file

/* Custom title pseudo-element */
/deep/ .h1:before,
/deep/ .h2:before,
/deep/ .h3:before,
/deep/ .h4:before,
/deep/ .h5:before,
/deep/ .h6:before {
	content: '▶;
	color: #0BBDA6;
	margin-right: 8upx;
	font-size: 30upx;
	line-height: 50px;
}

Copy the code

Change the loading animation duration

<! -- Loading animation -->
		<view v-if="is_show_login" class="data-login-flex">
			<view class="data-login" >
				<image class="fengrui-img" src=".. /.. /static/data/login.svg" mode=""></image>
			</view>
			<view class="progress-box">
				<progress :percent='percent' active="true" duration="15" border-radius="100" stroke-width="6" activeColor="#5891f6"  @activeend="loginSucc()"/>
			</view>
		</view>
Copy the code

II Use of wechat applets

2.1 Pay attention to public accounts

Leverage official development capabilities: official-account

<official-account></official-account>

Copy the code
  1. Before using the component, you need to go to the small program background, in “Settings” – “Basic Settings” -> “Function Settings” set to show the public number. Then turn on the switch in Settings – Follow public

  1. Of the time of a scribe’s life, only the following scenarios went into a scribe’s program and showed you the ability to boot the same public account components

Scan the QR code

Go to the entry page of the Mini Program Experience edition

Scan one dimensional code

Scan small program code

Scan “one thing one code” to open the small program

The custom compilation condition is scanning two-dimensional code

2.2 the effect

see also

Small program: iOS reverse

Public account: iOS reverse