小程序开发第一天 项目基本结构和组件概述 大龄java程序员转行之路

pages 文件夹

page翻译为页面，就是说微信小程序里包含的页面都放在这个文件夹里。
类比我们常见的index 主页面，login登录页面，这些web页面文件夹转化在微信小程序中就是pages页面。

用户创建的文件夹

就是index ，login等页面文件
官方建议把小程序的页面都放在pages我文件夹中，每个文件夹里都有四个文件，分别是。

.js文件

控制页面的脚本文件，包括存放数据，业务逻辑，事件处理函数等

调用Pages（）函数实现对页面的调用

.json文件

这个页面自己的配置文件，管理窗口外观，表现等

.wxml

相当于html文件，就是存放页面的模板结构
wxml是一种类似于html的标签语言，是由微信自己创建的语言。

.wxss

相当于css文件，存放页面的样式结构

1. 新增了rpx尺寸单位
   css中需要手动单位换算，只需要用rpx自动换算即可
2. 提供了全局样式和局部样式
   app.wxss里的全局样式会修改全局，page里的wxss修改这个页面，同时也有覆盖关系
3. 仅支持部分css选择器
   class 和 id，element选择其，并集选择器后代选择器，伪类选择器等支持

logs文件夹

utils

utils 译为模块，说白了就是一些工具函数，类比java中的工具类。
因此在我们点开默认的小程序页面后，里面放的都是一些被频繁调用的函数。

这是一个箭头函数功能是把当前时间转化为咱们生活中能看懂的常见时间

app.js

是小程序的入口文件

通过App()这个函数启动整个小程序

app.json

是整个项目全局的配置文件

下面我们来一一介绍下面各个节点的作用。

pages

记录的是各个页面的wxml地址，比如pages/index/index就是在 pages文件夹下面index文件下下面的index.wxml文件。

window

管理的是小程序所有页面的背景色，导航栏提示等

style

小程序组件所使用的样式版本，只有v1和v2两个值，不写就是v1老版本

页面配置与全局配置的关系

页面配置可以理解为通常网页开发中的struct总结构，规定了所有元素的默认类型，而页面配置就相当于对这一模块进行细化的修改，因此页面配置必须要可以覆盖全局配置中的相同项

修改主页头外观为绿色

显示绿色而不是默认的fff白色

project.config.json

project config译为项目设置，是对这个项目的自定义个性化配置。

{
  "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": ""
    }
  },
  "compileType": "miniprogram",
  "libVersion": "2.19.4",
  "appid": "wx4786243a6c59165d", //自己小程序的唯一appid
  "projectname": "miniprogram-92", //项目名称，不等于小程序名称
  "condition": {},
  "editorSetting": {
    "tabIndent": "insertSpaces",
    "tabSize": 2
  }
}

注意：setting里面是对本地设置的修改，比如对es6的使用权限等

当我们想使用他人的开源小程序后，可以修改他的appID使得在本机上正常访问

sitemap.json

类似网页的SEO索引，来配置小程序页面是否允许被微信搜索到。
这个类似于H5开发中的mate-content属性，规定被检索的范围。

当为disallow时，表明不可以被索引到。

新页面的创建

手动创建

当前pages里只有两个页面文件夹，一个是index一个是login，现在我想新建一个register页面，操作如下。

1. 右键pages选择新建文件夹，文件夹名字为register
   
2. 右键创建好的新文件夹，选择创建pages
   
   并输入register，后创建成功
   

直接从app.json创建

可以看到json和pages里的元素是一一对应的，我们要创建一个标准页面shop，就采用如下方式。

直接添加pages/shop/shop创建完成！

修改小程序页面首页

JSON里的页面顺序就是小程序的页面顺序，其中第一页的就是首页。
如图中index就是项目首页，如果我们想让login作为项目首页，只需要调换顺序即可

宿主环境

宿主环境就是程序运行的必要环境，比如java要运行在jdk中，在移动端也有自己的宿主环境。
例如Android版本的软件只能运行在Android环境里，不能运行在IOS中，也就是说脱离宿主环境的程序是没有意义的

小程序的宿主环境

小程序依托于微信运行，也就是说小程序必须运行在微信上，以实现完成普通web上不方便运行的功能。
即：调用微信已有的功能方便开发
小程序的一些能力，都是由微信来提供的

小程序宿主包含的功能

通信模型

小程序的通信模型分为渲染层和逻辑层
渲染层包括wxml，wxss。
逻辑层包括js脚本
'而通信又分为渲染层-》逻辑层、逻辑层-》第三方服务器

运行机制

当用户打开我们的小程序后，他会经过小程序启动–小程序渲染两个过程。

小程序启动

1. 代码包下载到本地
2. 解析app.json配置边框等基础配置
3. 执行app.js里的App()函数创建小程序实例
4. 渲染首页
5. 小程序启动完成

页面渲染过程

1. 加载页面.json
2. 加载wxml与wxms
3. 记载.js文件，调用page函数创建页面实例

组件

视图容器

view

view就是一个普通的视图区域，类似于h5的div元素，在小程序里就view元素。
是一个块级元素

也支持wxss的修饰

的出来就是下面的效果

总结：网页里怎么写，小程序就怎么写

scroll-view

可以滚动的列表区域
简单介绍以下scroll - view标签的用法

/* wxml部分*/
<scroll-view class="container2" scroll-y>
	<view>A<view>
	<view>B<view>
	<view>C<view>

标签里的scroll属性决定了滚动组件的滚动方向y是y轴滚动，x是x轴滚动。

注意：一定要设置scroll-view组件和里面包含的view组件的高度！

swiper和swiper组件

实现轮播图的效果

/*wxml*/
<swiper class="container3" indicator-dots="indicator-dots">
  <swiper-item>
    <view class="">A</view>
  </swiper-item>
  <swiper-item>
    <view>B</view>
  </swiper-item>
  <swiper-item>
    <view>C</view>
  </swiper-item>
</swiper>
/*wxss*/
.container3 {
  width: 400px;
  border: 5px, 5px,5px, black,solid;
  height: 100px;
}
.container3 swiper-item view {
  width: 100%;
  height: 100%;
  text-align: center;
 line-height: 100px ;
}
.container3 swiper-item:nth-child(1) view {
  background-color: greenyellow;
}
.container3 swiper-item:nth-child(2) view {
  background-color: greenyellow;
}
.container3 swiper-item:nth-child(3) view {
  background-color: greenyellow;
}

对于轮播图，wx已经给我们提供了一系列常用属性

1. indicator bool 默认 false 显示面板小圆点
2. indicator color 默认 如上图透明，修改小圆点颜色
3. indicator-active-color 选中小圆点的颜色
4. autoplay boolean false 是否自动切换
5. interval number 定时器自动切换毫秒5000 = 5s
6. circular boolean false 是否衔接滑动能从3->0滑动

text

text文本组件
是一个标准的行内元素，类似于html的span标签，常用于基础修饰
通过text的selectable属性，实现长按文本内容选中的效果，这点实际生产中非常有用

<view class="conatiner4">
  <text selectable>1234567890</text>
</view>

长按才允许选择

text-rich

rich-text富文本组件
可以把html，渲染为wxml字符串
有一些耳熟能详的html标签，在wxml里不能使用，比如h1
系列标签。


不能正常使用。因此微信给我们提供了rich-text标签，让我们可以使用原生的html标签。

button 组件

按钮组件

<button>默认按钮</button>
<view>利用type属性修改按钮</view>
<button type="primary">primary</button>
<button type="warn">warn</button>
<view>利用size属性修改按钮</view>
<button size="mini">mini</button>
<button type="primary" size="mini">primary</button>
<button type="warn" size="mini">warn</button>
<view>plain镂空属性修改按钮</view>
<button plain="true">plain</button>

当然这是微信给我们创建的默认按钮组件，我们也可以利用wxss修改自己喜欢的的按钮。

image组件

image组件本身具有固定大小
我们给页面增加了两个image组件，一个是空组件，一个有图片，但是我们发现，空组件有自己的宽和高，这点和html中img标签不同，而有图片的宽高也空组件一样。

可以看到这种大小固定的image格式会导致图片的拉伸变形，因此wxml引入了mode属性来解决这种问题。
下面我们来介绍mode属性的不同值：

1. scalToFill，是默认的放缩模式，为不保证纵横比的放缩，使宽高完全拉伸满。
   
2. aspectFit 放缩模式，保持纵横比放缩，使短边完全露出来。因此图片可以完整显示
   
3. aspectFil 放缩模式，保持纵横比放缩，使长边完全露出来。因此图片可能不完整显示
   
4. widthFix 放缩模式，宽度不变，高度变化，把盒子撑开，保持宽高比不变
   
   可以看到盒子相较于空盒子宽度不变，高度在保证宽高比的时候被撑开的了
5. heightFix 宽高比不变，盒子撑开，高度不变，宽度变化
   

API

API说白了就是一组已经写好的函数，是微信提供给我们的一组函数

事件监听类API

特点：以on开头，用来监视事件的触发
wx.onWindowResize（）监听窗口尺寸的变化事件

同步API

特点：以Sync结尾的API都是同步API
特点：结果从函数返回值直接获得，执行出错抛出异常
说白了就是咱们所说的普通函数

异步API

类似于ajax函数，结果要用success，fail等回调函数接受其结果