手牵手，使用uni-app从零开发一款视频小程序 (系列上 准备工作篇)
<section id="nice" style="font-size: 16px; color: rgba(0, 0, 0, 1); padding: 0 10px; word-spacing: 0; word-wrap: break-word; text-align: left; line-height: 1.25; font-family: Optima-Regular, Optima, PingFangTC-Light, PingFangSC-light, PingFangTC-light; letter-spacing: 2px; background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%); background-size: 20px 20px; background-position: center"><h1 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 25px"><span class="prefix" style="display: none"></span><span class="content" style="display: inline-block; font-weight: bold; color: rgba(119, 48, 152, 1)">系列文章</span><span class="suffix"></span></h1><ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); font-size: 15px; list-style-type: circle">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal"><p style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">手牵手，使用uni-app从零开发一款视频小程序 (系列上 准备工作篇)</p>
</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal"><p style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">手牵手，使用uni-app从零开发一款视频小程序 (系列下 开发实战篇)</p>
</section></li></ul>
<h1 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 25px"><span class="prefix" style="display: none"></span><span class="content" style="display: inline-block; font-weight: bold; color: rgba(119, 48, 152, 1)">前言</span><span class="suffix"></span></h1>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">好久不见，很久没更新博客了，前段时间在深圳出差，胡吃海喝颓废了很久，不想每天下班刷抖音、打游戏虚度光阴，准备把之前做的一个小程序案例详细的介绍一下，从安装编译器开始重新开发复盘一遍，希望对初入小程序的你有所帮助。</p>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 22px; text-align: left"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 18px; font-weight: bold; display: inline-block; padding-left: 10px; border-left: 5px solid rgba(145, 109, 213, 1)">扫码体验，先睹为快</span><span class="suffix"></span></h2>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">可以扫描下微信小程序的二维码，体验一下开发完毕的效果：</p>
<figure data-tool="mdnice编辑器" style="margin: 10px 0; display: flex; flex-direction: column; justify-content: center; align-items: center"><img src="https://zhcat.oss-cn-beijing.aliyuncs.com/image_20200817214258.png" alt="" style="max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain; box-shadow: 2px 4px 7px rgba(153, 153, 153, 1)"></figure>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 22px; text-align: left"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 18px; font-weight: bold; display: inline-block; padding-left: 10px; border-left: 5px solid rgba(145, 109, 213, 1)">源码地址:</span><span class="suffix"></span></h2>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">GitHub : https://github.com/Tzlibai/uni-app-video -- Star 100+</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">uni-app插件市场地址: https://ext.dcloud.net.cn/plugin?id=1839 --插件下载量1000+</p>
<h1 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 25px"><span class="prefix" style="display: none"></span><span class="content" style="display: inline-block; font-weight: bold; color: rgba(119, 48, 152, 1)">开发前的准备</span><span class="suffix"></span></h1>
<blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; border-left: 3px solid rgba(216, 156, 246, 1); color: rgba(106, 115, 125, 1); padding: 10px 10px 10px 20px; margin-bottom: 20px; margin-top: 20px; background: rgba(244, 238, 255, 1)">
<p style="padding-top: 8px; padding-bottom: 8px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px; margin: 0; color: rgba(0, 0, 0, 1); line-height: 26px">目前开发小程序的常见开发方案：微信原生wxml开发，wepy，mpvue，taro、uni-app等，详细优劣对比可以参考<strong style="color: rgba(145, 109, 213, 1); font-weight: bold"><span>「</span>京东凹凸实验室<span>」</span></strong>的这篇文章：小程序多端框架的全面测评；</p>
</blockquote>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">好的话不多少，进入正题，这里整理一个简单的Xmind，其实小程序的开发并没有想象中的那么复杂，接下来我将慢慢的从零开始解读这个一个小程序项目，带大家走入正题：
<img src="https://zhcat.oss-cn-beijing.aliyuncs.com/image_20200817214323.png" alt="" style="max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain; box-shadow: 2px 4px 7px rgba(153, 153, 153, 1)"></p>
<hr data-tool="mdnice编辑器" style="margin: 10px 0; height: 1px; padding: 0; border-top: 2px solid rgba(217, 184, 250, 1); border-right: none; border-bottom: none; border-left: none">
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">接下来的内容我假设你已了解关于HTML、CSS和JavaScript 的初中级知识。并且有一定的Vue基础，如果你刚开始学习前端开发，将本文作为你的第一步可能不是最好的主意！</p>
<hr data-tool="mdnice编辑器" style="margin: 10px 0; height: 1px; padding: 0; border-top: 2px solid rgba(217, 184, 250, 1); border-right: none; border-bottom: none; border-left: none">
<h1 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 25px"><span class="prefix" style="display: none"></span><span class="content" style="display: inline-block; font-weight: bold; color: rgba(119, 48, 152, 1)">1 微信小程序账号方面</span><span class="suffix"></span></h1>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 22px; text-align: left"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 18px; font-weight: bold; display: inline-block; padding-left: 10px; border-left: 5px solid rgba(145, 109, 213, 1)">1.1 注册微信小程序账号</span><span class="suffix"></span></h2>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">如果已注册小程序账号，可以略过此步~</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">假设没有小程序账号：</p>
<ol data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: decimal; font-size: 15px">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal">我们可以通过微信公众号平台右上角 → 立即注册 → 注册的帐号类型 → 选择小程序类型注册</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal">进入注册页面 → 输入邮箱 → 密码 → 验证码 → 激活邮箱 → 填写主体信息（根据自身选择类型：个人、企业、政府、媒体等） → 登记相关信息即可注册；</section></li></ol>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px"><strong style="color: rgba(145, 109, 213, 1); font-weight: bold"><span>「</span>注册注意事项：<span>」</span></strong>:邮箱作为登录帐号，需要填写未在微信公众平台注册，并且没有被个人微信号绑定的邮箱，每个邮箱只能申请一个小程序;</p>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 22px; text-align: left"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 18px; font-weight: bold; display: inline-block; padding-left: 10px; border-left: 5px solid rgba(145, 109, 213, 1)">1.2 登录微信小程序后台</span><span class="suffix"></span></h2>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">1.<strong style="color: rgba(145, 109, 213, 1); font-weight: bold"><span>「</span>完善相关信息<span>」</span></strong>补充小程序名称信息，上传小程序头像，填写小程序介绍并根据后续开发的内容选择服务范围；</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">2.<strong style="color: rgba(145, 109, 213, 1); font-weight: bold"><span>「</span>绑定开发者<span>」</span></strong>登录微信公众平台小程序，进入用户身份-开发者，新增绑定开发者、体验者。（体验者的含义是在小程序没有通过审核正式发布之前，体验者可以使用该小程序）；</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">3.<strong style="color: rgba(145, 109, 213, 1); font-weight: bold"><span>「</span>获取AppID<span>」</span></strong>登录微信公众平台小程序，进入“设置-账号信息（设置的最下面）”，获取AppID信息。（微信AppID是后面开发小程序必须使用的，在开发小程序之前需要填写开发者的AppID）。</p>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 22px; text-align: left"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 18px; font-weight: bold; display: inline-block; padding-left: 10px; border-left: 5px solid rgba(145, 109, 213, 1)">1.3 下载微信开发者工具</span><span class="suffix"></span></h2>
<ol data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: decimal; font-size: 15px">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal"><p style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">前往开发者工具下载页面，根据自己的操作系统下载对应的安装包进行安装,建议现在稳定版本的安装包，其实微信开发者工具不止可以开发小程序，也可以用来制作微信小游戏，有兴趣的朋友可以找找相关资料，开发一款属于自己的小游戏~</p>
</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal"><p style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">微信开发者工具安装完毕后，双击打开软件，进行登录即可，由于我们是使用uni-app进行开发小程序,所以这里先打开登录即可，后面我们使用相关工具自动编译小程序；</p>
</section></li></ol>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 22px; text-align: left"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 18px; font-weight: bold; display: inline-block; padding-left: 10px; border-left: 5px solid rgba(145, 109, 213, 1)">1.4 总结</span><span class="suffix"></span></h2>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">以上是关于小程序注册、微信开发者工具下载的内容，文章比较简练，如果需要对小程序有更深一步的了解，可以查看微信小程序官方开放文档,官方文档中对于小程序的框架配置、组件介绍、API以及扩展能力等有非常系统的讲解，非常适合初学者对小程序的学习；</p>
<h1 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 25px"><span class="prefix" style="display: none"></span><span class="content" style="display: inline-block; font-weight: bold; color: rgba(119, 48, 152, 1)">2 HBuilderX、uni-app方面</span><span class="suffix"></span></h1>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 22px; text-align: left"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 18px; font-weight: bold; display: inline-block; padding-left: 10px; border-left: 5px solid rgba(145, 109, 213, 1)">前言</span><span class="suffix"></span></h2>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">可能大家对HBuilderX、uni-app的了解的不是很多；这两者都是DCloud旗下的产品。</p>
<blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; border-left: 3px solid rgba(216, 156, 246, 1); color: rgba(106, 115, 125, 1); padding: 10px 10px 10px 20px; margin-bottom: 20px; margin-top: 20px; background: rgba(244, 238, 255, 1)">
<p style="padding-top: 8px; padding-bottom: 8px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px; margin: 0; color: rgba(0, 0, 0, 1); line-height: 26px">DCloud公司拥有500万开发者用户，几十万应用案例、10亿手机端月活用户，数千款uni-app插件、70+微信/qq群，开发者可以放心选择。</p>
</blockquote>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; color: rgba(0, 0, 0, 1); font-size: 16px; font-weight: bold; text-align: center"><span class="prefix" style="display: none"></span><span class="content" style="border-bottom: 2px solid rgba(216, 156, 246, 1)">HBuilderX</span><span class="suffix" style="display: none"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px"><code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background: none; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(145, 109, 213, 1); font-weight: bolder">HBuilderX</code>是一款专为Vue的打造编辑器，C++架构，启动速度、大文档打开速度、编码提示，都还是挺不错的，我们今天开发小程序用到的就是这款编辑器，我最开始接触它的绿柔主题感觉特别清爽、特别舒服; 其实我们在Vue.js的官网我们也可以看到他的身影。</p>
<figure data-tool="mdnice编辑器" style="margin: 10px 0; display: flex; flex-direction: column; justify-content: center; align-items: center"><img src="https://zhcat.oss-cn-beijing.aliyuncs.com/image_20200817214515.png" alt="" style="max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain; box-shadow: 2px 4px 7px rgba(153, 153, 153, 1)"></figure>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; color: rgba(0, 0, 0, 1); font-size: 16px; font-weight: bold; text-align: center"><span class="prefix" style="display: none"></span><span class="content" style="border-bottom: 2px solid rgba(216, 156, 246, 1)">uni-app</span><span class="suffix" style="display: none"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px"><code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background: none; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(145, 109, 213, 1); font-weight: bolder">uni-app</code>是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。个人接触体验下来，上手快，效果高；</p>
<hr data-tool="mdnice编辑器" style="margin: 10px 0; height: 1px; padding: 0; border-top: 2px solid rgba(217, 184, 250, 1); border-right: none; border-bottom: none; border-left: none">
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px"><strong style="color: rgba(145, 109, 213, 1); font-weight: bold"><span>「</span>开始我们接下来的小程序就是用HBuilderX编辑器，加之uni-app框架来开发的<span>」</span></strong></p>
<hr data-tool="mdnice编辑器" style="margin: 10px 0; height: 1px; padding: 0; border-top: 2px solid rgba(217, 184, 250, 1); border-right: none; border-bottom: none; border-left: none">
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 22px; text-align: left"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 18px; font-weight: bold; display: inline-block; padding-left: 10px; border-left: 5px solid rgba(145, 109, 213, 1)">2.1 HBuilderX的下载与使用</span><span class="suffix"></span></h2>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; color: rgba(0, 0, 0, 1); font-size: 16px; font-weight: bold; text-align: center"><span class="prefix" style="display: none"></span><span class="content" style="border-bottom: 2px solid rgba(216, 156, 246, 1)">HBuilderX的下载</span><span class="suffix" style="display: none"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">我们可以访问HBuilderX官方下载地址: https://www.dcloud.io/hbuilderx.html进行下载，建议大家选择APP开发版进行下载，后面可以把一套代码编译成多个平台使用，效果非常Nice</p>
<figure data-tool="mdnice编辑器" style="margin: 10px 0; display: flex; flex-direction: column; justify-content: center; align-items: center"><img src="https://zhcat.oss-cn-beijing.aliyuncs.com/image_20200817214538.png" alt="" style="max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain; box-shadow: 2px 4px 7px rgba(153, 153, 153, 1)"></figure>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch">下载完成后是一个Zip文件，解压后选中目录中的HBuilderX.exe<br><br>→ 点击HBuilderX.exe鼠标右键出现菜单<br><br>→ 点击菜单项：发送到<br><br>→ 点击桌面快捷方式，即可把图标放到桌面<br><br>→ 双击即可正常使用；<br></code></pre>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; color: rgba(0, 0, 0, 1); font-size: 16px; font-weight: bold; text-align: center"><span class="prefix" style="display: none"></span><span class="content" style="border-bottom: 2px solid rgba(216, 156, 246, 1)">HBuilderX的简单使用</span><span class="suffix" style="display: none"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">HBuilderx的使用方法其实与VScode、WebStorm、Atom等编辑器大同小异，如果你接触过上述编辑器，那么对你来说一定非常轻松！</p>
<h1 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 25px"><span class="prefix" style="display: none"></span><span class="content" style="display: inline-block; font-weight: bold; color: rgba(119, 48, 152, 1)">3 新建项目</span><span class="suffix"></span></h1>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">我们之前已经下载了App开发版，可以开箱即用，启动HBuilderX软件</p>
<ol data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: decimal; font-size: 15px">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal"><p style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">接下来让我们创建一个uni-app项目，点击工具栏里的文件 -> 新建 -> 项目：
<img src="https://zhcat.oss-cn-beijing.aliyuncs.com/image_20200817215054.png" alt="" style="max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain; box-shadow: 2px 4px 7px rgba(153, 153, 153, 1)"></p>
</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal"><p style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。
uni-app自带的模板有 Hello uni-app ，是官方的组件和API示例。还有一个重要模板是 uni-ui项目模板，日常开发推荐使用该模板，已内置一些官方的常用组件。
<img src="https://zhcat.oss-cn-beijing.aliyuncs.com/image_20200817215119.png" alt="" style="max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain; box-shadow: 2px 4px 7px rgba(153, 153, 153, 1)"></p>
</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal"><p style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">创建成功后，我们就可以在微信开发工具中运行啦。进入我们刚才创建的项目，<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background: none; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(145, 109, 213, 1); font-weight: bolder">点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具</code>，即可在微信开发者工具里面体验uni-app。
<img src="https://zhcat.oss-cn-beijing.aliyuncs.com/image_20200817215139.png" alt="" style="max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain; box-shadow: 2px 4px 7px rgba(153, 153, 153, 1)"></p>
</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal"><p style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">接下来会开始编译，并打开微信开发者工具，当你看到以下页面时，说明你<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background: none; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(145, 109, 213, 1); font-weight: bolder">新建项目</code>这一步骤就已经完成啦！
<img src="https://zhcat.oss-cn-beijing.aliyuncs.com/image_20200817215423.png" alt="" style="max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain; box-shadow: 2px 4px 7px rgba(153, 153, 153, 1)"></p>
</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal"><p style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">在创建的uni-app目录中找到<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background: none; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(145, 109, 213, 1); font-weight: bolder">manifest.json</code>文件，基础设置 -> 填写uni-appid，注册登录后即可获取该ID，后续文件会使用到。
<img src="https://zhcat.oss-cn-beijing.aliyuncs.com/image_20200817215505.png" alt="" style="max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain; box-shadow: 2px 4px 7px rgba(153, 153, 153, 1)"></p>
</section></li></ol>
<hr data-tool="mdnice编辑器" style="margin: 10px 0; height: 1px; padding: 0; border-top: 2px solid rgba(217, 184, 250, 1); border-right: none; border-bottom: none; border-left: none">
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px"><strong style="color: rgba(145, 109, 213, 1); font-weight: bold"><span>「</span>注意事项<span>」</span></strong></p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); font-size: 15px; list-style-type: circle">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal"><p style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">由于我们是利用HBuilderX启动微信开发者工具，所以我们在开发过程中，需要保持微信开发者工具的打开。</p>
</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal"><p style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">我们是第一次使用，需要先配置小程序开发者工具的的相关路径，才能运行成功。<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background: none; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(145, 109, 213, 1); font-weight: bolder">点击工具栏的工具 -> 设置 -> 运行配置 -> 小程序运行配置</code>, 如下图，需在输入框输入微信开发者工具的安装路径。
<img src="https://zhcat.oss-cn-beijing.aliyuncs.com/image_20200817215735.png" alt="" style="max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain; box-shadow: 2px 4px 7px rgba(153, 153, 153, 1)"></p>
</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal"><p style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">首次开发时需要在小程序中设置 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background: none; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(145, 109, 213, 1); font-weight: bolder">微信开发者工具 -> 设置 -> 安全设置，将服务端口开启</code>,可以使用相关的命令行调用工具。
<img src="https://zhcat.oss-cn-beijing.aliyuncs.com/image_20200817215915.png" alt="" style="max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain; box-shadow: 2px 4px 7px rgba(153, 153, 153, 1)"></p>
</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal"><p style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">uni-app默认把项目编译到根目录的unpackage目录。</p>
</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal"><p style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">编译成功后，我们需要把微信小程序的appID在微信开发者工具中填写，如下图：
<img src="https://zhcat.oss-cn-beijing.aliyuncs.com/image_20200817220014.png" alt="" style="max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain; box-shadow: 2px 4px 7px rgba(153, 153, 153, 1)"></p>
</section></li></ul>
<h2 data-tool="mdnice编辑器" style="margin: 20px 10px 0 0; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 22px; text-align: left"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 18px; font-weight: bold; display: inline-block; padding-left: 10px; border-left: 5px solid rgba(145, 109, 213, 1)">3.1 目录分析及UI组件引入</span><span class="suffix"></span></h2>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch">├─ colorui <span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px"># 本项目引入了colorui组件，用于引入美化样式组件</span><br>├─ components <span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px"># 用于存放组件的目录，可以自行添加组件</span><br>├─ pages/ <span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px"># 业务页面文件存放的目录，后续开发的页面都会存放于此</span><br>│ ├─ home/<br>│ │ ├─ index.vue <span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px"># home页面</span><br>│ │ ......<br>├─ static <span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px"># 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此</span><br>├─ unpackage/ <span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px"># 打包目录</span><br>├─ App.vue <span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px"># 应用配置，用来配置App全局样式以及监听</span><br>├─ main.js <span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px"># Vue初始化入口文件</span><br>├─ manifest.json <span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px"># 配置应用名称、appid、logo、版本等打包信息</span><br>├─ package.json <span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px"># 配置页面路由、导航条、选项卡等页面类信息</span><br></code></pre>
<hr data-tool="mdnice编辑器" style="margin: 10px 0; height: 1px; padding: 0; border-top: 2px solid rgba(217, 184, 250, 1); border-right: none; border-bottom: none; border-left: none">
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">本项目引入了两个组件：<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background: none; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(145, 109, 213, 1); font-weight: bolder">mi-loading、ColorUI</code></p>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; color: rgba(0, 0, 0, 1); font-size: 16px; font-weight: bold; text-align: center"><span class="prefix" style="display: none"></span><span class="content" style="border-bottom: 2px solid rgba(216, 156, 246, 1)">3.1.1UI组件-mi-loading</span><span class="suffix" style="display: none"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">相信大家在小程序的体验中有看到Loading的动画，这边引入了一个Loading的组件，mi-loading</p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); font-size: 15px; list-style-type: circle">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal">通过上方链接下载Zip包文件，下载源码解压，复制项目根目录的 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background: none; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(145, 109, 213, 1); font-weight: bolder">/mi-loading</code> 文件夹到你的项目<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background: none; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(145, 109, 213, 1); font-weight: bolder">components目录</code>中即可</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal">打开<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background: none; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(145, 109, 213, 1); font-weight: bolder">mi-loading.vue</code>这个文件，里面的loading动画是可以自行使用Gif图配置，大家可以查看该源码的第四行，img配置的的图片地址就是自定义的Loding，mi-loading源码地址，我把自定义的图片放置到了：<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background: none; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(145, 109, 213, 1); font-weight: bolder">/static/img/loading.gif</code>,图片地址：点此查看</section></li></ul>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch"># 使用方法<br><span class="hljs-keyword" style="color: rgba(51, 51, 51, 1); font-weight: bold; line-height: 26px">this</span>.$refs.Loading.show() <span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px">// 打开</span><br><span class="hljs-keyword" style="color: rgba(51, 51, 51, 1); font-weight: bold; line-height: 26px">this</span>.$refs.Loading.hide() <span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px">// 关闭</span><br></code></pre>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; color: rgba(0, 0, 0, 1); font-size: 16px; font-weight: bold; text-align: center"><span class="prefix" style="display: none"></span><span class="content" style="border-bottom: 2px solid rgba(216, 156, 246, 1)">3.2.2 UI组件-ColorUI</span><span class="suffix" style="display: none"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">本项目引入了插件市场的ColorUI-UniApp组件库，引入方法如下：</p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); font-size: 15px; list-style-type: circle">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal">通过上方链接下载Zip包文件，下载源码解压，复制项目根目录的 /colorui 文件夹到你的项目根目录</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal">App.vue 文件引入关键Css <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background: none; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(145, 109, 213, 1); font-weight: bolder">main.css</code>、<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background: none; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(145, 109, 213, 1); font-weight: bolder">icon.css</code>，让改UI组件成为每个页面公共css</section></li></ul>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch"><span class="hljs-tag" style="color: rgba(0, 0, 128, 1); font-weight: normal; line-height: 26px"><<span class="hljs-name" style="color: rgba(0, 0, 128, 1); font-weight: normal; line-height: 26px">style</span>></span><span class="css" style="line-height: 26px"><br> @<span class="hljs-keyword" style="color: rgba(51, 51, 51, 1); font-weight: bold; line-height: 26px">import</span> <span class="hljs-string" style="color: rgba(221, 17, 68, 1); line-height: 26px">"colorui/main.css"</span>;<br> @<span class="hljs-keyword" style="color: rgba(51, 51, 51, 1); font-weight: bold; line-height: 26px">import</span> <span class="hljs-string" style="color: rgba(221, 17, 68, 1); line-height: 26px">"colorui/icon.css"</span>;<br> ....<br></span><span class="hljs-tag" style="color: rgba(0, 0, 128, 1); font-weight: normal; line-height: 26px"></<span class="hljs-name" style="color: rgba(0, 0, 128, 1); font-weight: normal; line-height: 26px">style</span>></span><br></code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">我们可以使用该UI库中封装好的导航栏，测试效果。</p>
<ol data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: decimal; font-size: 15px">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal">在<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background: none; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(145, 109, 213, 1); font-weight: bolder">App.vue文件</code>中加入如下配置，用于获得系统信息,该文件源码地址：App.vue</section></li></ol>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch"><span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px">// onLaunch: 当小程序加载完毕后就执行的方法</span><br>onLaunch: <span class="hljs-function" style="line-height: 26px"><span class="hljs-keyword" style="color: rgba(51, 51, 51, 1); font-weight: bold; line-height: 26px">function</span>(<span class="hljs-params" style="line-height: 26px"></span>) </span>{<br> uni.getSystemInfo({<br> <span class="hljs-attr" style="line-height: 26px">success</span>: <span class="hljs-function" style="line-height: 26px"><span class="hljs-keyword" style="color: rgba(51, 51, 51, 1); font-weight: bold; line-height: 26px">function</span>(<span class="hljs-params" style="line-height: 26px">e</span>) </span>{<br> <span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px">// #ifndef MP</span><br> Vue.prototype.StatusBar = e.statusBarHeight;<br> <span class="hljs-keyword" style="color: rgba(51, 51, 51, 1); font-weight: bold; line-height: 26px">if</span> (e.platform == <span class="hljs-string" style="color: rgba(221, 17, 68, 1); line-height: 26px">'android'</span>) {<br> Vue.prototype.CustomBar = e.statusBarHeight + <span class="hljs-number" style="color: rgba(0, 128, 128, 1); line-height: 26px">50</span>;<br> } <span class="hljs-keyword" style="color: rgba(51, 51, 51, 1); font-weight: bold; line-height: 26px">else</span> {<br> Vue.prototype.CustomBar = e.statusBarHeight + <span class="hljs-number" style="color: rgba(0, 128, 128, 1); line-height: 26px">45</span>;<br> };<br><span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px">// #endif</span><br><span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px">// #ifdef MP-WEIXIN</span><br> Vue.prototype.StatusBar = e.statusBarHeight;<br> <span class="hljs-keyword" style="color: rgba(51, 51, 51, 1); font-weight: bold; line-height: 26px">let</span> custom = wx.getMenuButtonBoundingClientRect();<br> Vue.prototype.Custom = custom;<br> Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;<br> <span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px">// #endif </span><br> <span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px">// #ifdef MP-ALIPAY</span><br> Vue.prototype.StatusBar = e.statusBarHeight;<br> Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;<br> <span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px">// #endif</span><br> }<br>})}<br></code></pre>
<ol start="2" data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: decimal; font-size: 15px">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(1, 1, 1, 1); font-size: 14px; font-weight: normal"><code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background: none; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(145, 109, 213, 1); font-weight: bolder">pages.json文件</code> 配置取消系统导航栏,该文件源码地址：pages.json</section></li></ol>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch"># 复制下面命令需要把注释删除，否则会报错<br>{<br> <span class="hljs-string" style="color: rgba(221, 17, 68, 1); line-height: 26px">"globalStyle"</span>: {<br> <span class="hljs-string" style="color: rgba(221, 17, 68, 1); line-height: 26px">"navigationStyle"</span>: <span class="hljs-string" style="color: rgba(221, 17, 68, 1); line-height: 26px">"custom"</span>, <span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px">// custom为自定义模式</span><br> <span class="hljs-string" style="color: rgba(221, 17, 68, 1); line-height: 26px">"navigationBarTextStyle"</span>: <span class="hljs-string" style="color: rgba(221, 17, 68, 1); line-height: 26px">"white"</span>, <span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px">// 标题文字设为白色</span><br> <span class="hljs-string" style="color: rgba(221, 17, 68, 1); line-height: 26px">"navigationBarTitleText"</span>: <span class="hljs-string" style="color: rgba(221, 17, 68, 1); line-height: 26px">"uni-app"</span>, <span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px">// 标题名称</span><br> <span class="hljs-string" style="color: rgba(221, 17, 68, 1); line-height: 26px">"navigationBarBackgroundColor"</span>: <span class="hljs-string" style="color: rgba(221, 17, 68, 1); line-height: 26px">"#007AFF"</span>, <span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px">// 更改导航背景色</span><br> <span class="hljs-string" style="color: rgba(221, 17, 68, 1); line-height: 26px">"backgroundColor"</span>: <span class="hljs-string" style="color: rgba(221, 17, 68, 1); line-height: 26px">"#FFFFFF"</span> <span class="hljs-comment" style="color: rgba(153, 153, 136, 1); font-style: italic; line-height: 26px">// 全局背景色</span><br> }<br>}<br></code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">运行成功后如下图所示：
<img src="https://zhcat.oss-cn-beijing.aliyuncs.com/image_20200817221015.png" alt="" style="max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain; box-shadow: 2px 4px 7px rgba(153, 153, 153, 1)"></p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">好的，这样我们已经成功的引入了该UI库，此时可以在微信开发者工具中看到效果，无需手动刷新，当我们在HBuilderX中添加代码保存，代码会自动编译，微信开发者工具会自动刷新；</p>
<h1 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 25px"><span class="prefix" style="display: none"></span><span class="content" style="display: inline-block; font-weight: bold; color: rgba(119, 48, 152, 1)">总结</span><span class="suffix"></span></h1>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: rgba(0, 0, 0, 1); margin: 10px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px">以上就是我们这款小程序的开发准备工作，下篇文章我们将会走入进行实际项目的从零开发，从新建一个项目到小程序代码的审核上传。</p>
</section><br><br>
来源：https://www.cnblogs.com/zhaohongcheng/p/13521185.html
頁:
[1]