小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

引言

HBuliderX 开发版:www.dcloud.io/hbuilderx.h…
微信小程序开发工具：developers.weixin.qq.com/miniprogram…
Serverless WordPress 建站：kunnan.blog.csdn.net/article/det…
版本管理 : git.weixin.qq.com/dashboard/p…

案例：小程序：iOS逆向，欢迎搜索体验交流。

I HBuliderX的使用

1.1 HBuliderX的运行配置

下载安装好HBuliderX 之后点击左上角点击偏好设置设置—–运行配置—-配置相对应的开发工具路径

任何代码只能在HBuilder x上修改方可生效修改代码只能使用HbuilderX，微信开发工具修改的刷新一下就没了。

1.2 HBuliderX的运行调试

点击运行—-运行小程序模拟器—-微信小程序开发者工具

如果启动错误，一般是微信开发者工具没有登入，或者工具没有打开安全端口（设置-安全设置-安全）

设置完安全端口，需要重启微信小程序开发者工具，才会生效

1.3 项目基础配置

打开mainfest.json文件进行appID以及微信小程序配置
修改页面结构：pages.json
自定义标题样式可以在compoents/fengrui.css文件中第22行修改

/* 自定义标题伪元素 */
/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;
}

修改加载动画时间duration

<!-- 加载动画 -->
		<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>

II 微信小程序组件的使用

2.1 关注公众号

利用官方开发能力：official-account

<official-account></official-account>

使用组件前，需前往小程序后台，在“设置”->“基本设置”->“功能设置"中设置要展示的公众号。然后在设置-关注公众号那里打开开关
在一个小程序的生命周期内，只有从以下场景进入小程序，オ具有展示引导关注公众号组件的能力

1011 扫描二维码

1017 前往小程序体验版的入口页

1025 扫描一维码

1047 扫描小程序码

1124 扫“一物一码”打开小程序

自定义编译条件为扫描二维码公众号：iOS逆向

2.2 效果

公众号：iOS逆向

小程序开发之HBuliderX的使用

引言