微信小程序入门从这里出发（登录注册、开发工具、文件及结构介绍）
<p><img src="http://image.ideal-20.cn/weixin-mini/19-01-01-000.png" alt="" loading="lazy"></p><h1 id="一-准备工作">(一) 准备工作</h1>
<h2 id="1-登录注册">(1) 登录注册</h2>
<ul>
<li>
<p>注册账号：这就不谈了，只需要注意使用一个全新的邮箱，别之前注册过公众号小程序等就可以了</p>
<ul>
<li><code>https://mp.weixin.qq.com/wxopen/waregister?action=step1</code></li>
</ul>
</li>
<li>
<p>登录账号：通过邮箱密码登录，亦或者绑定微信后使用扫码也是可以的</p>
<ul>
<li><code>https://mp.weixin.qq.com/</code></li>
</ul>
</li>
</ul>
<p><img src="http://image.ideal-20.cn/weixin-mini/19-01-01-001.png" alt="" loading="lazy"></p>
<h2 id="2-获取-appid">(2) 获取 APPID</h2>
<p>登录后，在开发入门的阶段有一个比较重要的内容需要了解，那就是 APPID，很好理解，就是这个小程序的唯一标识，就类似我们的身份证，登录后首页左侧栏选择【开发】，跳转后，选择【开发设置】就可以看到我们的 APPID</p>
<p><img src="http://image.ideal-20.cn/weixin-mini/19-01-01-002.png" alt="" loading="lazy"></p>
<p>这个 APPID 要记好哈，在刚开始学习的时候，就会使用到</p>
<p><img src="http://image.ideal-20.cn/weixin-mini/19-01-01-003.png" alt="" loading="lazy"></p>
<h2 id="3-下载工具">(3) 下载工具</h2>
<p>在官网选择一个合适的版本进行下载，这就是我们小程序的编译器，这里我选择的是开发版，不过选择稳定版也是可以的，针对入门并没有太大的区别，不过稳定版可能出现的小毛病会少一些</p>
<p><code>https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html</code></p>
<p>安装好后，直接提示扫码登录，接着就是点击左侧【小程序】，然后点击右侧【新建】（一个大加号）填写一些基本的信息</p>
<ul>
<li>项目名称和目录：自己看着弄就可以了</li>
<li>APPID：之前页面中找到的 APPID 在这个时候就可以用的上了，虽然你使用测试号也是可以进入的，到底后面还是要用自己的 ID 的。</li>
<li>开发模式：小程序</li>
<li>后端服务：不使用云服务，前面还是以学习小程序本身为主，不使用此选项</li>
<li>语言：JavaScript 和 Typescript，根据自身的熟悉程序选择即可</li>
</ul>
<p><img src="http://image.ideal-20.cn/weixin-mini/19-01-01-004.png" alt="" loading="lazy"></p>
<p>新建后，第一个小程序就完事了哈~</p>
<h1 id="二-初识小程序">(二) 初识小程序</h1>
<h2 id="1-界面总览">(1) 界面总览</h2>
<p>下面的区域就是一个初始化新建好的项目界面了，图片中标的很清楚，每一块的具体内容，第一次创建项目时，也可以在设置的通用设置中将默认的的工作区以及主题（浅色还是深色）根据自己的需要修改</p>
<p>说明：直接在小程序官方的工具中编写代码也可以，不过我个人选择配合 vscode 或 sublime 进行代码的编辑，在微信官方开发工具或者那个查看结果以及控制台的一些信息</p>
<p><img src="http://image.ideal-20.cn/weixin-mini/19-01-01-005.png" alt="" loading="lazy"></p>
<h2 id="2-文件类型">(2) 文件类型</h2>
<p>与传统的网页开发有一丝小不同，微信小程序重新定义了它的描述语言，例如 wxml、wxss 等，同时还额外提供了一层 JSON 的配置文件</p>
<p><strong>wxml（页面结构文件）</strong></p>
<ul>
<li>用来书写、构建页面，类似传统网页开发的 HTML</li>
</ul>
<p><strong>wxss（样式表文件）</strong></p>
<ul>
<li>用于制定页面样式，从而美化页面，类似传统网页开发的 CSS</li>
</ul>
<p><strong>js（脚本文件）</strong></p>
<ul>
<li>用于指定一定页面交互逻辑，就是 Javascript</li>
</ul>
<p><strong>json（静态数据配置文件）</strong></p>
<ul>
<li>JSON 格式的配置文件，设置程序的一些配置效果</li>
</ul>
<h2 id="3-结构目录">(3) 结构目录</h2>
<h3 id="a总体介绍">A：总体介绍</h3>
<p>通过官方开发工具或者vscode等其他编辑器，你可以看到，新建一个项目后，会默认生成一个初始化的项目结构，里面含有很多文件，其后缀格式都是我们上面介绍过的</p>
<p><img src="http://image.ideal-20.cn/weixin-mini/19-01-01-006.png" alt="" loading="lazy"></p>
<p>下面我们针对一些主要的内容进行一个基本的介绍</p>
<pre><code class="language-js">├── pages // 页面文件夹
| ├── index // 首页
│ | ├── index.js // 首页逻辑脚本文件
│ | ├── index.json // 首页配置文件
│ | ├── index.wxml // 首页页面结构文件
│ | ├── index.wxss // 首页样式文件
| ├── logs // 日志页面
│ | ├── logs.js // 日志页面逻辑脚本文件
│ | ├── logs.json // 日志页面配置文件
│ | ├── logs.wxml // 日志页面页面结构文件
│ | ├── logs.wxss // 日志页面样式文件
| ├── utils // 工具js文件（第三方，可删除）
│ | ├── util.js // 日志页面逻辑脚本文件
│ ├── app.js // 项目的全局脚本文件
│ ├── app.json // 项目的全局配置文件
│ ├── app.wxss // 项目的全局配置文件
│ ├── project.config.json // 项目的开发者工具的配置
│ ├── sitemap.json // 索引配置文件
</code></pre>
<p>具体的一些例如 wxml wxss 等的用法，会在后面提到，这里我们还要提一下两个内容：</p>
<h3 id="a针对说明">A：针对说明</h3>
<p><strong>app.js：</strong>项目的入口文件，用来创建应用程序的对象，处理程序的生命周期</p>
<p><strong>app.json</strong>：项目全局的配置文件，涉及到了页面的路径，界面/窗口 的表现时间，网格超时的时间，还有小程序底部的 tab 等等，还是非常重要的，初始化新建项目后，可以看到如下pages 字段和 windows 字段</p>
<pre><code class="language-json">{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
</code></pre>
<ul>
<li>
<p>pages 字段，是关于页面路径的，也就是给客户端说明出你小程序页面到底在哪里</p>
</li>
<li>
<p>window 字段，对应 页面的颜色、标题等等</p>
</li>
<li>
<p>tabbar 字段，底部 tab 栏（切换页面）</p>
</li>
</ul>
<p>贴一段官网关于tabbar的说明（官网的说明确实很可！）：</p>
<p>如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">默认值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">color</td>
<td style="text-align: left">HexColor</td>
<td style="text-align: left">是</td>
<td style="text-align: left"></td>
<td style="text-align: left">tab 上的文字默认颜色，仅支持十六进制颜色</td>
</tr>
<tr>
<td style="text-align: left">selectedColor</td>
<td style="text-align: left">HexColor</td>
<td style="text-align: left">是</td>
<td style="text-align: left"></td>
<td style="text-align: left">tab 上的文字选中时的颜色，仅支持十六进制颜色</td>
</tr>
<tr>
<td style="text-align: left">backgroundColor</td>
<td style="text-align: left">HexColor</td>
<td style="text-align: left">是</td>
<td style="text-align: left"></td>
<td style="text-align: left">tab 的背景色，仅支持十六进制颜色</td>
</tr>
<tr>
<td style="text-align: left">borderStyle</td>
<td style="text-align: left">string</td>
<td style="text-align: left">否</td>
<td style="text-align: left">black</td>
<td style="text-align: left">tabbar 上边框的颜色， 仅支持 <code>black</code> / <code>white</code></td>
</tr>
<tr>
<td style="text-align: left">list</td>
<td style="text-align: left">Array</td>
<td style="text-align: left">是</td>
<td style="text-align: left"></td>
<td style="text-align: left">tab 的列表，详见 <code>list</code> 属性说明，最少 2 个、最多 5 个 tab</td>
</tr>
<tr>
<td style="text-align: left">position</td>
<td style="text-align: left">string</td>
<td style="text-align: left">否</td>
<td style="text-align: left">bottom</td>
<td style="text-align: left">tabBar 的位置，仅支持 <code>bottom</code> / <code>top</code></td>
</tr>
<tr>
<td style="text-align: left">custom</td>
<td style="text-align: left">boolean</td>
<td style="text-align: left">否</td>
<td style="text-align: left">false</td>
<td style="text-align: left">自定义 tabBar，最低需要 2.5 版本</td>
</tr>
</tbody>
</table>
<p><img src="http://image.ideal-20.cn/weixin-mini/19-01-01-007.png" alt="" loading="lazy"></p>
<p>而一般我们想要设置出常见的效果就会选择使用 list 进行配置</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">pagePath</td>
<td style="text-align: left">string</td>
<td style="text-align: left">是</td>
<td style="text-align: left">页面路径，必须在 pages 中先定义</td>
</tr>
<tr>
<td style="text-align: left">text</td>
<td style="text-align: left">string</td>
<td style="text-align: left">是</td>
<td style="text-align: left">tab 上按钮文字</td>
</tr>
<tr>
<td style="text-align: left">iconPath</td>
<td style="text-align: left">string</td>
<td style="text-align: left">否</td>
<td style="text-align: left">图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 <strong>当 <code>position</code> 为 <code>top</code> 时，不显示 icon。</strong></td>
</tr>
<tr>
<td style="text-align: left">selectedIconPath</td>
<td style="text-align: left">string</td>
<td style="text-align: left">否</td>
<td style="text-align: left">选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 <strong>当 <code>position</code> 为 <code>top</code> 时，不显示 icon。</strong>****</td>
</tr>
</tbody>
</table>
<p>给大家举个例子，书写的格式就是这样的，别忘了制定了 tabbar 一定要有在pages中设置对应的页面哦</p>
<pre><code class="language-json">"tabBar": {
"color": "#999",
"selectedColor": "#ff2d4a",
"backgroundColor": "#fafafa",
"position": "bottom",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icons/home.png",
"selectedIconPath": "icons/home.png"
},
{
"pagePath": "pages/user/index",
"text": "我的",
"iconPath": "icons/my.png",
"selectedIconPath": "icons/my.png"
}
]
},
</code></pre>
<p>每一个小程序页面也可以使用 <code>.json</code> 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 <code>app.json</code> 的 <code>window</code> 中相同的配置项。同样的，也有很多配置内容，看一下官网就可以了</p>
<p><code>https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html</code></p>
<h1 id="结尾">结尾</h1>
<p>如果文章中有什么不足，欢迎大家留言交流，感谢朋友们的支持！</p>
<p>如果能帮到你的话，那就来关注我吧！如果您更喜欢微信文章的阅读方式，可以关注我的公众号</p>
<blockquote>
<p>在这里的我们素不相识，却都在为了自己的梦而努力 ❤</p>
<p>一个坚持推送原创开发技术文章的公众号：理想二旬不止</p>
</blockquote>
<p><img src="http://image.ideal-20.cn/ideal-20/QRcode-rectangle-new.png" alt="" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/ideal-20/p/13353606.html
頁:
[1]