关于小程序:小程序项目结构与组件基础

文章和代码曾经归档至【Github 仓库：https://github.com/timerring/front-end-tutorial】或者公众号【AIShareLab】回复 小程序 也可获取。

pages 用来寄存所有小程序的页面
utils 用来寄存工具性质的模块（例如：格式化工夫的自定义模块）
app.js 小程序我的项目的入口文件
app.json 小程序我的项目的全局配置文件
app.wxss 小程序我的项目的全局款式文件
project.config.json 我的项目的配置文件
sitemap.json 用来配置小程序及其页面是否容许被微信索引

小程序官网倡议把所有小程序的页面，都寄存在 pages 目录中，以独自的文件夹存在，如图所示：

其中，每个页面由 4 个根本文件组成，它们别离是：

.js 文件（页面的脚本文件，寄存页面的数据、事件处理函数等）
.json 文件（以后页面的配置文件，配置窗口的外观、体现等）
.wxml 文件（页面的模板构造文件）
.wxss 文件（以后页面的样式表文件）

json 是一种数据格式，在理论开发中，json 总是以 配置文件 的模式呈现。小程序我的项目中也不例外：通过不同的.json 配置文件，能够对小程序我的项目进行不同级别的配置。

小程序我的项目中有 4 种 json 配置文件，别离是：

我的项目根目录的 app.json 配置文件；
我的项目根目录中的 project.config.json 配置文件；
我的项目根目录中的 sitemap.json 配置文件；
每个页面文件夹中的.json 配置文件

app.json 是以后小程序的全局配置，包含了小程序的所有页面门路、窗口外观、界面体现、底部 tab 等。

app.json 中的局部配置，也反对对单个页面进行配置，能够在页面对应的 .json 文件来对本页面的体现进行配置。页面中配置项在以后页面会笼罩 app.json 中雷同的配置项。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light", // 加载小圆圈的色彩
    "navigationBarBackgroundColor": "#fff", // 导航栏背景色彩
    "navigationBarTitleText": "Weixin", // 导航栏的文本内容
    "navigationBarTextStyle":"black" // 导航栏题目色彩，仅反对 black / white
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

这 4 个配置项的作用：

pages：用来记录以后小程序所有页面的门路

未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。

小程序中新增 / 缩小页面，都须要对 pages 数组进行批改。
window：全局定义小程序所有页面的背景色、文字色彩等
style：全局定义小程序组件所应用的款式版本
sitemapLocation：用来指明 sitemap.json 的地位

文件 project.config.json 是我的项目配置文件，用来记录咱们对小程序开发工具所做的个性化配置，例如

setting 中保留了编译相干的配置
projectname 中保留的是项目名称
appid 中保留的是小程序的账号 ID

{
  "description": "我的项目配置文件",
  "packOptions": {"ignore": [],
    "include": []},
  "setting": {
    "bundle": false,
    "userConfirmedBundleSwitch": false,
    "urlCheck": true,
    "scopeDataCheck": false,
    "coverView": true,
    "es6": true,
    "postcss": true,
    "compileHotReLoad": false,
    "lazyloadPlaceholderEnable": false,
    "preloadBackgroundData": false,
    "minified": true,
    "autoAudits": false,
    "newFeature": false,
    "uglifyFileName": false,
    "uploadWithSourceMap": true,
    "useIsolateContext": true,
    "nodeModules": false,
    "enhance": true,
    "useMultiFrameRuntime": true,
    "useApiHook": true,
    "useApiHostProcess": true,
    "showShadowRootInWxmlPanel": true,
    "packNpmManually": false,
    "enableEngineNative": false,
    "packNpmRelationList": [],
    "minifyWXSS": true,
    "showES6CompileOption": false,
    "minifyWXML": true,
    "babelSetting": {"ignore": [],
      "disablePlugins": [],
      "outputPath": ""},"condition": false
  },
  "compileType": "miniprogram",
  "libVersion": "2.19.4",
  "appid": "","projectname":"miniprogram-92","condition": {},"editorSetting": {"tabIndent":"insertSpaces","tabSize": 2}
}

微信现已凋谢小程序内搜寻，成果相似于 PC 网页的 SEO。sitemap.json 文件用来配置小程序页面是否容许微信索引。

当开发者容许微信索引时，微信会通过爬虫的模式，为小程序的页面内容建设索引。当用户的搜寻关键字和页面的索引匹配胜利的时候，小程序的页面将可能展现在搜寻后果中。

{
  "desc": "对于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  "action": "allow",
  "page": "*"
  }]
}

留神：未显式指明 “disallow” 的都默认被索引

sitemap 的索引提醒（终端黄色正告）是默认开启的，如须要敞开 sitemap 的索引提醒，可在小程序我的项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false。

小程序中的每一个页面，能够应用 .json 文件来对本页面的窗口外观进行配置，页面中的配置项会笼罩 app.json 的 window 中雷同的配置项。

新建小程序页面

只须要在 app.json -> pages 中新增页面的寄存门路，小程序开发者工具即可帮咱们主动创立对应的页面文件。

  "pages":[
    "pages/index/index",
    "pages/list/list",
    "pages/logs/logs"
  ],

只须要调整 app.json -> pages 数组中页面门路的前后程序，即可批改我的项目的首页。小程序会把排在第一位的页面，当作我的项目首页进行渲染。

WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的构造，其作用相似于网页开发中的 HTML。

WXML 和 HTML 的区别

标签名称不同

HTML(div, span, img, a)

WXML(view, text, image, navigator)
属性节点不同

<a href="#"></a>

\`\`<navigator url=”pages/home/home”></navigator>\`
提供了相似于 Vue 中的模块语法

数据绑定

列表渲染

条件渲染

WXSS (WeiXin Style Sheets)是一套款式语言，用于形容 WXML 的组件款式，相似于网页开发中的 CSS。

WXSS 和 CSS 的区别

新增了 rpx 尺寸单位

CSS 须要手动进行像素单位换算，例如 rem
WXSS 在底层反对新的尺寸单位 rpx，在不同大小屏幕小程序会主动进行换算

提供了全局的款式和部分款式

全局：我的项目根目录中的 app.wxss
部分：以后页面的.wxss

WXSS 仅反对局部 CSS 选择器

.class 和 #id
element
并集选择器、后辈选择器
::after 和 ::before 等

通过.js 文件来解决用户的操作。例如：响应用户的点击、获取用户的地位等等。

小程序中的 JS 文件分为三大类，别离是:

app.js

是整个小程序我的项目的入口文件，通过调用 App() 函数 来启动整个小程序

页面的.js 文件

是页面的入口文件，通过调用 Page() 函数 来创立并运行页面

一般的.js 文件

是一般的功能模块文件，用来封装公共的函数或属性供页面应用

宿主环境就是依赖环境，小程序的宿主环境是手机微信

次要蕴含四个内容：通信模型 ， 运行机制 ， 组件，API

通信的主体：渲染层 和 逻辑层

小程序中的通信模型分为两局部:

渲染层和逻辑层之间的通信由微信客户端进行转发。

逻辑层和第三方服务器之间的通信由微信客户端进行转发。

小程序启动的过程

把小程序的代码包下载到本地
解析 app.json 全局配置文件
执行 app.js 小程序入口文件，调用 App() 创立小程序实例
渲染小程序首页
小程序启动实现

页面渲染的过程

加载解析页面的 .json 配置文件
加载页面的 .wxml 模板和 .wxss 款式
执行页面的 .js 文件，调用 Page() 创立页面实例
页面渲染实现

小程序中的组件也是由宿主环境提供的，开发者能够基于组件疾速搭建出丑陋的页面构造。官网把小程序的组件分为了 9 大类，别离是：

视图容器
根底内容
表单组件
导航组件
媒体组件
map 地图组件
canvas 画布组件
凋谢能力
无障碍拜访

view

一般视图区域，相似于 HTML 中的 div，是一个块级元素，罕用来实现页面的布局成果。

实现如图的 flex 横向布局

scroll-view

可滚动的视图区域，罕用来实现滚动列表成果。

scroll-y 或 scroll- x 属性：规定在哪个方向滚动
要给 swiper 容器设置指定的高度或宽度才能够实现滚动

<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

/* pages/list/list.wxss */
.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.container1 view:nth-child(1) {background-color: lightgreen;}
.container1 view:nth-child(2) {background-color: lightskyblue;}
.container1 view:nth-child(3) {background-color: lightpink;}

.container1 {
  border: 1px solid red;
  width: 100px;
  height: 120px;
}

swiper 和 swiper-item

轮播图容器组件和轮播图 item 组件

<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay interval="3000" circular>
    <swiper-item>
    <view class="item">A</view>
  </swiper-item>
    <swiper-item>
    <view class="item">B</view>
  </swiper-item>
    <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

.swiper-container {height: 150px;}

.item {
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item {background-color: lightgreen;}
swiper-item:nth-child(2) .item {background-color: lightskyblue;}
swiper-item:nth-child(3) .item {background-color: lightpink;}

swiper 组件的罕用属性

属性	类型	默认值	阐明
indicator-dots	boolean	false	是否显示面板批示点
indicator-color	color	rgba（0,0,0,.3）	批示点色彩
indicator-active-color	color	#000000	以后选中的批示点色彩
autoplay	boolean	false	是否主动切换
interval	number	5000	主动切换工夫距离
circular	boolean	false	是否采纳连接滑动

text：相似于 HTML 中的 span 标签，是一个行内元素。
```
<view>
  手机号反对长按选中成果
  <text selectable>13800005056</text>
</view>
```
- selectable 属性：实现长按选中文本内容。
rich-text：富文本组件，反对把 HTML 字符串渲染为 WXML 构造。
```
<rich-text nodes="<h1 style='color: red;'> 题目 </h1>"></rich-text>
```
- nodes属性：把 HTML 字符串渲染为对应的 UI 构造。

button

<!-- 按钮组件的根本应用 -->
<!-- 通过 type 属性指定按钮色彩类型 -->
<button> 一般按钮 </button>
<button type="primary"> 主色调按钮 </button>
<button type="warn"> 正告按钮 </button>
<!-- size="mini" 小尺寸按钮 -->
<button size="mini"> 一般按钮 </button>
<button type="primary" size="mini"> 主色调按钮 </button>
<button type="warn" size="mini"> 正告按钮 </button>
<!-- plain 镂空按钮 -->
<button size="mini" plain> 一般按钮 </button>
<button type="primary" size="mini" plain> 主色调按钮 </button>
<button type="warn" size="mini" plain> 正告按钮 </button>

open-type 属性：能够调用微信提供的各种性能（客服、转发、获取用户受权、获取用户信息等）
type 属性：指定按钮色彩类型
- primary：主色调按钮，绿色
- warn：正告按钮，红色
size 属性：
- mini：小尺寸按钮
plain 属性：镂空按钮

image
```

<image></image>
<image src="/images/1.png" mode="heightFix"></image>
```
- 默认宽度 300px，高度 240px
- mode 属性：指定图片的裁剪和缩放模式
  - scaleToFill：默认值，缩放模式，不放弃纵横比缩放图片，使齐全填满 image 元素
  - aspectFit：放弃纵横比缩放，将图片残缺显示进去
  - aspectFill：放弃纵横比缩放，使齐全填满 image 元素，然而可能产生裁剪
  - widthFix：宽度不变，高度主动变动，放弃宽高比不变
  - heightFix：高度不变，宽度主动变动，放弃宽高比不变
navigator
- 页面导航组件，相似于 a 链接

小程序官网把 API 分成三大类

1. 事件监听 API

特点：以 on 结尾，用来监听某些事件的触发

举例：wx.onWindowResize(function callback)监听窗口尺寸变动的事件

2. 同步 API

特点：以 Sync 结尾的 API 都是同步 API，其执行后果能够通过函数返回值间接获取，如果执行出错会抛出异样
举例：wx.setStorageSync('key','value')向本地存储中写入内容

3. 异步 API

特点：相似于 jQuery 中的 $.ajax(optjions) 函数，须要通过 success、fail、complete 承受调用的后果
举例：wx.request()发动网络数据申请，通过 success 回调函数接收数据。

我的项目成员：

示意参加小程序开发、经营的成员
可登录小程序管理后盾
管理员能够增加、删除我的项目成员，并设置我的项目成员的角色

体验成员：

示意参加小程序内测体验的成员
可应用体验版小程序，但不属于我的项目成员
管理员及我的项目成员均可增加、删除体验成员

不同我的项目成员对应的权限

开发者的权限阐明

开发者权限：可应用小程序开发者工具及对小程序的性能进行代码开
体验者权限：可应用体验版小程序
登录权限：可登录小程序管理后盾，无需管理员确认
开发设置：设置小程序服务器域名、音讯推送及扫描一般链接二维码关上小程序
腾讯云治理：云开发相干设置

一个小程序的公布上线，个别要通过上传代码 -> 提交审核 -> 公布这三步。

上传代码

点击开发者工具顶部工具栏中的“上传”按钮
填写版本号以及我的项目备注

在后盾查看上传之的版本

登录小程序管理后盾 -> 治理 -> 版本治理 -> 开发版本，即可查看方才提交上传的版本：

提交审核

提交审核的形式：在开发版本的列表中，点击“提交审核”按钮之后，依照页面提醒填写相干的信息，就能把小程序提交到官网进行审核。

公布

审核通过之后，管理员的微信中会收到小程序通过审核的告诉，此时在审核版本的列表中，点击“公布”按钮之后，即可把“审核通过”的版本公布为线上版本”，供所有小程序用户拜访和应用。

基于小程序码进行推广

获取小程序码的 5 个步骤：登录小程序管理后盾 -> 设置 -> 根本设置 -> 根本信息 -> 小程序码及线下物料下载。

关于小程序:小程序项目结构与组件基础

我的项目构造

理解我的项目的根本组成构造

小程序页面的组成部分

json 配置文件的作用

全局配置文件 app.json

project.config.json 文件

sitemap.json 文件

页面的 .json 配置文件

批改我的项目首页

WXML 模板

什么是 WXML

WXSS 款式

JS 逻辑交互

小程序宿主环境

通信模型

运行机制

组件

小程序中组件的分类

罕用的视图容器类组件

根底内容组件

其它罕用组件

API

小程序成员治理

小程序的版本

公布上线