首页 | 编程 | Java

详解微信小程序入门从这里出发（登录注册、开发工具、文件及结构介绍）

2020年07月21日 作者：BWH_Steven原文

(一) 准备工作

(1) 登录注册

注册账号：这就不谈了，只需要注意使用一个全新的邮箱，别之前注册过公众号小程序等就可以了

https://mp.weixin.qq.com/wxopen/waregister?action=step1

登录账号：通过邮箱密码登录，亦或者绑定微信后使用扫码也是可以的

https://mp.weixin.qq.com/

这个 APPID 要记好哈，在刚开始学习的时候，就会使用到

新建后，第一个小程序就完事了哈~

(二) 初识小程序

(1) 界面总览

下面的区域就是一个初始化新建好的项目界面了，图片中标的很清楚，每一块的具体内容，第一次创建项目时，也可以在设置的通用设置中将默认的的工作区以及主题（浅色还是深色）根据自己的需要修改

说明：直接在小程序官方的工具中编写代码也可以，不过我个人选择配合 vscode 或 sublime 进行代码的编辑，在微信官方开发工具或者那个查看结果以及控制台的一些信息

下面我们针对一些主要的内容进行一个基本的介绍

├── 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				 // 索引配置文件

具体的一些例如 wxml wxss 等的用法，会在后面提到，这里我们还要提一下两个内容：

A：针对说明

app.js：项目的入口文件，用来创建应用程序的对象，处理程序的生命周期

app.json：项目全局的配置文件，涉及到了页面的路径，界面/窗口 的表现时间，网格超时的时间，还有小程序底部的 tab 等等，还是非常重要的，初始化新建项目后，可以看到如下pages 字段和 windows 字段

{
 "pages":[
 "pages/index/index",
 "pages/logs/logs"
 ],
 "window":{
 "backgroundTextStyle":"light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "WeChat",
 "navigationBarTextStyle":"black"
 }
}
  • pages 字段，是关于页面路径的，也就是给客户端说明出你小程序页面到底在哪里
  • window 字段，对应 页面的颜色、标题等等
  • tabbar 字段，底部 tab 栏（切换页面）

贴一段官网关于tabbar的说明（官网的说明确实很可！）：

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

属性 类型 必填 默认值 描述
color HexColor 是 tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor HexColor 是 tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor HexColor 是 tab 的背景色，仅支持十六进制颜色
borderStyle string 否 black tabbar 上边框的颜色， 仅支持 black / white
list Array 是 tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
position string 否 bottom tabBar 的位置，仅支持 bottom / top
custom boolean 否 false 自定义 tabBar，最低需要 2.5 版本

而一般我们想要设置出常见的效果就会选择使用 list 进行配置

属性 类型 必填 说明
pagePath string 是 页面路径，必须在 pages 中先定义
text string 是 tab 上按钮文字
iconPath string 否 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。
selectedIconPath string 否 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。****

给大家举个例子，书写的格式就是这样的，别忘了制定了 tabbar 一定要有在pages中设置对应的页面哦

"tabBar": {
 "color": "#999",
 "selectedColor": "#ff2d4a",
 "backgroundColor": "#fafafa",
 "position": "bottom",
 "borderStyle": "black",
 "list": [
  {
  "pagePath": "pages/index/index",
  "text": "首页",
  "iconPath": "icons/home.jpg",
  "selectedIconPath": "icons/home.jpg"
  },
  {
  "pagePath": "pages/user/index",
  "text": "我的",
  "iconPath": "icons/my.jpg",
  "selectedIconPath": "icons/my.jpg"
  }
 ]
 },

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。同样的，也有很多配置内容，看一下官网就可以了

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

结尾

到此这篇关于微信小程序入门从这里出发（登录注册、开发工具、文件及结构介绍）的文章就介绍到这了,更多相关微信小程序入门内容请搜索来客网以前的文章或继续浏览下面的相关文章希望大家以后多多支持来客网！

相关链接