小程序-----小程序开发工具使用及流程文档说明

别动我代码儿

3499人浏览 · 2021-04-06 13:56:30

别动我代码儿 · 2021-04-06 13:56:30 发布

小程序基础开发使用

1. 背景介绍

微信是一个生态圈，包括即时通信、移动支付、社交媒体、游戏娱乐等多个领域，彼此之间紧密联系、互为支撑形成了一个强大的微信帝国。日常交流中所提到的微信更多是指的即时通信和移动支付，而我们即将学习的微信小程序属于社交媒体的组成部分。

注：除了有微信小程序外，支付宝也如法炮制了小程序，文中提到的小程序如无特别说明，特指微信小程序。
在这里插入图片描述

人们越来越多的将时间花费在了移动设备上，移动互联势不可挡。
在这里插入图片描述

伴随而来的移动开发技术层出不穷：

H5（Web App）

即运行于移动设备浏览器的网页，使用html5、css3等技术实现，可以跨平台。
原生应用（Native App）

即所谓的 Android 和 IOS 开发，可以直接与底层操作系统通信，可扩展性非常强，不可跨平台。
混合应用（Hybrid App）

混合了Web App 和 Native App开发技术，一般展示类内容使用 Web App技术，交互性较强的使用 Native App技术，可以跨平台。

然而不同的开发技术间各有优势，下图列举了各开发技术间的差异：
在这里插入图片描述

小程序是一种新型的轻量的开发技术，“微信之父” 张晓龙是这样定义小程序的：
在这里插入图片描述

2. 开发环境

1. 账号申请

1. 选择注册账号类型

在这里插入图片描述

2. 账号信息

在这里插入图片描述

3. 邮箱激活

在这里插入图片描述

4. 信息登记

在这里插入图片描述

2. 绑定开发者

1. 登录小程序

在这里插入图片描述

2. 管理员授权

在这里插入图片描述

3. 添加成员

在这里插入图片描述

3. 获取AppID

在这里插入图片描述

4. 开发工具

1. 下载

在这里插入图片描述

2. 扫码登录

在这里插入图片描述

3. 小程序

在这里插入图片描述

4. 创建小程序

在这里插入图片描述

5. 开发界面

在这里插入图片描述

5. 开发文档

俗话说的好：好记性不如烂笔头，小程序开发过程中参考官方文档是最佳实践！

3.快速体验

1.创建小程序

创建一个目录，例如 demo
打开开发工具
选择第1步创建的目录
填定AppID、名称，并选择建立普通快速启动模板

2. 预览小程序

使用绑定的开发者微信用户扫描二维码，便可以在微信中打开小程序了
在这里插入图片描述

3. 编辑小程序

微信官方的开发工具自带了编辑器功能，可以对小程序代码进行编辑，如下图
在这里插入图片描述

使用官方开发工具编辑小程序并不是唯一方式，开发者也可以根据自已喜好自由选择任意编辑工具，如 sublime_text、WebStorm、VS Code等。

4.结构分析

1. 目录

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

主体 app

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件类型	必填	描述
app.js	是	小程序入口
app.json	是	小程序全局配置
app.wxss	否	小程序全局样式

页面 page

一个小程序页面由四个文件组成，分别是：

文件后缀	必填	描述
.js	是	页面逻辑
.wxml	是	页面布局结构
.wxss	否	局部布局样式
.json	否	局部配置

wxml 指的是 Wei Xin Markup Language，微信团队以 XML 为基础，而定义的一套用以实现小程序页面布局的标记语言，与HTML非常类似。

wxss 指的是 Wei Xin Style Sheet，微信团队定义的一套用以实现小程序布局样式的层叠样式表，与CSS非常接近。

以下是小程序的基本目录结构，也可以根据需要任意添加其它目录，如资源目录 assets、第三方库vendors、扩展目录 extends等。

├── app.js ...................................................... 小程序入口文件
├── app.json .................................................... 小程序全局配置
├── app.wxss .................................................... 小程序全局样式
├── pages ....................................................... 所有页面目录
│   ├── index ................................................... index页面目录
│   │   ├── index.js ............................................ index页面业务逻辑
│   │   ├── index.wxml .......................................... index页面布局结构
│   │   └── index.wxss .......................................... index页面布局样式
│   └── logs .................................................... logs页目录
│       ├── logs.js ............................................. logs页面业务逻辑
│       ├── logs.json ........................................... logs页面配置文件
│       ├── logs.wxml ........................................... logs页面布局结构
│       └── logs.wxss ........................................... logs页面布局样式
├── project.config.json ......................................... 开发工具配置文件
└── utils ....................................................... 公共逻辑
    └── util.js ................................................. 实用工具

2. 配置

熟悉了小程序的基础知识后，接下来我们一起动手开发一个真正的小程序，首先从配置小程开始。

按着上一章节步骤创建一个小程序，不勾选建立普通快速启动模板
在这里插入图片描述

1. 全局配置

通过 app.json 文件对小程序进行全局配置，如页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

app.json 配置清单

属性	类型	必填	描述
pages	String Array	是	设置页面路径
window	Object	否	设置默认窗口表现
tabBar	Object	否	设置底部 tab 表现
networkTimeout	Object	否	设置网络超时时间
debug	Boolean	否	设置是否开启调试模式

创建 app.json 文件

app.json 示例

{
  "pages":[
    "pages/index/index",
    "pages/detail/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

1. pages

数组类型，数组中每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。文件名不需要写文件后缀，因为框架会自动去寻找路径下 .json , .js, .wxml , .wxss 四个文件进行整合。

// 创建目录及文件
// 习惯性的将页面统一放到名叫 pages 的目录中，不是强制要求，可以起任意名称的目录
pages
├── detail
│   ├── index.js
│   └── index.wxml
└── index
    ├── index.js
    └── index.wxml

编辑 app.json，添加字段 pages

{
  "pages": [
    "pages/index/index",
    "pages/detail/detail"
  ]
}

2. window

对象类型，用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性	类型	默认值	描述	兼容
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如"#000000"	-
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色

查看window更多配置属性
在这里插入图片描述

编辑 app.json，添加字段 windows

{
  "window": {
     "navigationBarBackgroundColor": "#262626",
     "navigationBarTitleText": "FC游乐园",
     "navigationBarTextStyle": "white",
     "backgroundColor": "#F0F0F0"
  }
}

效果如下图所示：
在这里插入图片描述

3. tabBar

对象类型，配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

属性	类型	必填	默认值	描述
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar上边框的颜色，仅支持 black/white
list	Array	是		tab 的列表，最少2个、最多5个
position	String	否	bottom	可选值 bottom、top

当设置 position 为 top 时，将不会显示 icon
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

属性	类型	必填	描述
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

在这里插入图片描述

// 到目前完整的目录结构
FC
├── app.js
├── app.json
├── icons
│   ├── cards-active.png
│   ├── cards-default.png
│   ├── face-active.png
│   ├── face-default.png
│   ├── home-active.png
│   └── home-default.png
├── pages
│   ├── cards
│   │   ├── index.js
│   │   └── index.wxml
│   ├── center
│   │   ├── index.js
│   │   └── index.wxml
│   ├── detail
│   │   ├── index.js
│   │   └── index.wxml
│   └── index
│       ├── index.js
│       └── index.wxml
└── project.config.json

编辑 app.json，添加 tabBar 字段

  "tabBar": {
    "color": "#D78B09",
    "selectedColor": "#FFF",
    "backgroundColor": "#FECA49",
    "borderStyle": "white",
    "list": [
      {
        "text": "首页",
        "pagePath": "pages/index/index",
        "iconPath": "icons/home-default.png",
        "selectedIconPath": "icons/home-active.png"
      },
      {
        "text": "卡券",
        "pagePath": "pages/cards/index",
        "iconPath": "icons/cards-default.png",
        "selectedIconPath": "icons/cards-active.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/center/index",
        "iconPath": "icons/face-default.png",
        "selectedIconPath": "icons/face-active.png"
      }
    ]
  }

效果如下图如所示：
在这里插入图片描述

2. 页面配置

每个页面可以有不同的表现，通过 pages 目录下的 .json 文件，如 logs.json ，实现页面的局部配置。但是只能设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000	导航栏背景颜色
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#fff	窗口的背景色

// 在 pages/center 目录下创建 index.json
FC/pages/center
├── index.js
├── index.json
└── index.wxml

如下所示，编辑 index.json

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "我的"
}

效果如下图所示：
在这里插入图片描述

3. 布局

小程序与Web类似，也分为结构、表现、行为三部分，小程序使用标记语言 WXML 定义结构、使用 WXSS 定义表现、使用 JavaScript 定义行为。

小程序的每一个页面都是由 .wxml、.wxss、.js 三部分构成，并且要求文件名一致，通常为了管理方便，会将小程序的每个页面单独归到同一个目录下，所有的页面又都归到了 pages 目录下。

FC/pages ............................................................... 所有页面目录
├── cards .............................................................. card 页面
│   ├── index.js
│   └── index.wxml
├── center ............................................................. center 页面
│   ├── index.js
│   ├── index.json
│   └── index.wxml
├── detail ............................................................. detail 页面
│   ├── index.js
│   └── index.wxml
└── index .............................................................. index 页面
    ├── index.js ....................................................... 行为
    ├── index.wxss ..................................................... 表现
    └── index.wxml ..................................................... 结构

wxml 指的是 Wei Xin Markup Language，微信团队以 XML 为基础，而定义的一套用以实现小程序页面布局的标记语言，与HTML非常类似。

wxml有一套自已的标签（组件）如 form、input、textarea、button、audio、video、view、text等，其含义与html的标签也是一样的，其中 view、text 可分别与 html 中的 div、text 对应。

<form action="">
    <view class="items">
        <view>
            <label for="">姓名:</label>
            <input type="text" placeholder="请填写您的真实姓名" />
        </view>
        <view>
            <label for="">手机:</label>
            <input type="text" placeholder="请填写您的手机号" />
        </view>
        <view>
            <label for="">身份:</label>
            <input type="text" placeholder="请选择您与宝宝的关系身份" />
        </view>
        <view>
            <label for="">验证码:</label>
            <input type="text" placeholder="六位数字验证码" />
            <button class="verify" size="mini">获取验证码</button>
        </view>
    </view>
    <button class="submit">绑定并登录</button>
</form>

wxss 指的是 Wei Xin Style Sheet，微信团队定义的一套用以实现小程序布局样式的层叠样式表，与CSS非常接近。

wxss 与css 非常类似，可以理解成是 css 的一个子集，也包括选择器、属性、值部分，同样具有层叠的特征。

page {
    background: #F0F0F0;
}

.items {
    padding-left: 15px;
    background: #FFF;
}

.items view {
    display: flex;
    padding: 10px 15px 10px 0;
    color: #3C3C3C;
    font-size: 14px;
    border-bottom: 1px solid #F0F0F0;
}

.items view:last-child {
    border-bottom: 0 none;
}

.items label {
    width: 60px;
}

input {
    flex: 1;
    text-align: right;
    color: #C9C9C9;
    font-size: 14px;
}

button::after {
    border: none;
}

form .submit {
    margin: 20px;
    color: #FFF;
    background-color: #FECA49;
}

form .verify {
    padding: 3px 15px;
    margin-left: 8px;
    color: #FFF;
    background-color: #45B8FF;
    font-size: 12px;
    border-radius: 36px;
    transform: translate(0, -5px);
}

效果如下图所示：
在这里插入图片描述

腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

腾讯云开发者社区

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git