最近接触了微信小程序的开发，在之前使用的过程中，学习的知识点还是很零散的，所以想找个时间将小程序系统学习一下，刚好把之前的零碎知识点连贯起来，以便进一步进阶。

在开始正式学习之前,需要对一些基础知识有所掌握——例如[css、html教程](HTML 简介 | 菜鸟教程 (runoob.com))

好了，话不多说，现在开始本次学习

本次的学习任务：

[1.小程序项目目录 ]
[2.基础内容]
[3.响应式自适应单位rpx与px的差异]
[4.视图容器]
[5.微信小程序app.json全局及页面配置]
[6.媒体组件]

1.小程序项目目录

1.1目录介绍

pages:存放的是微信小程序的页面

注意：Page 构造器适用于简单的页面。但对于复杂的页面， Page 构造器可能并不好用。此时，可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是：方法需要放在 methods: { } 里面。

代码示例：

Component({
  data: {
    text: "This is page data."
  },
  methods: {
    onLoad: function(options) {
      // 页面创建时执行
    },
    onPullDownRefresh: function() {
      // 下拉刷新时执行
    },
    // 事件响应函数
    viewTap: function() {
      // ...
    }
  }
})

index:首页

index.js：存放的是逻辑类的代码（就是你点击了页面上的一个按键，会发生什么事；或者你选择了一个下拉列表里的值会发生什么）

index.json:其中.json是存放插件

index.wxml：其中.wxml是存放html(超文本标记语言)就是网页上有文本框，文字，图片

其中html只能决定页面上有什么，但是他们的元素的大小颜色以及排布由css样式表（index.wxss）决定的

index.wxss：其中 wxss是对于wxml进行修饰

app.js:页面进入后首先加载的部分（可以有生命周期）

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等 { pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等 window用于设置小程序的状态栏、导航条、标题、窗口背景色

tabBar 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），

可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。 }

app.wxss：整个页面的公共样式配置（对于所有页面（例如index,或者其他新建页面）都是有效的，相当于全局配置）

logs：就是它的日志文件

utils:存放的是公共模块的一些代码,以及工具类，存放时间戳

project.config.json:公共配置项（很多对应于本地设置中的详情设置。） project.private.config.json:自己配置的文件（包括项目名称）

sitemap.json：代表所有页面都可以被检索（检索机制）

.eslintrc.js——进行规则配置

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。

// xxx.js const appInstance = getApp() console.log(appInstance.globalData) // I am global data

2.基础内容

2.1组件

2.1.1 view

视图容器view组件及属性

功能描述:视图容器

快捷布局技巧

.box
<!--直接回车enter得到下面结果-->

<view class="box"></view>

.box>.inner>.row
<!--直接回车enter得到下面结果-->
<view class="box">
  <view class="inner">
    <view class="row"></view>
  </view>
</view>

案例展示

<view class="box"  hover-class="boxhover">
华强买瓜
<view class="inner" hover-class="innerhover" hover-stop-propagation="true">七强卖鱼</view>
</view>

.box{
  width:200px;
  height:200px;
  background:orange;
}
.boxhover{
  background:palegreen;
}
.box .inner{
  width:80px;
  height:80px;
  background:pink;
}
.box .innerhover{
  background:red;
}

2.1.2 text

功能描述：文本

1.内联文本只能用 text 组件，不能用 view，如 <text> foo <text>bar</text> </text>

2.新增 span 组件用于内联文本和图片，如 <span> <image> </image> <text>bar</text> </span>

2.1.3 icon

功能描述：图标组件

案例展示：

<icon type="success"></icon>
<icon type="search" size="50" color="pink"></icon>

2.1.4 progress

功能描述: 进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)

案例展示：

<progress percent="50" show-info border-radius stroke-width="3"></progress>

3.响应式自适应单位rpx与px的差异

尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。

规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

(不同设备的rpx和px换算可能有稍微不同)

建议：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

4.视图容器

4.1scroll-view 可滚动视图区域组件

功能描述:

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

（目前只展示一些常用属性）

案例展示：

X轴滚动

<scroll-view class="myScroll" 	scroll-x>
<!-- .row{$}*8 -->
<view class="row">1</view>
<view class="row">2</view>
<view class="row">3</view>
<view class="row">4</view>
<view class="row">5</view>
<view class="row">6</view>
<view class="row">7</view>
<view class="row">8</view>
</scroll-view>

.myScroll{
  width:100%;
  height:220rpx;
  background:#eee;
  /*强制将多出来的元素放在一行*/
  white-space: nowrap;
}
.myScroll .row{
  width:220rpx;
  height:220rpx;
  background:palegreen;
  margin-right:10rpx;
  /*使用srcoll-x的时候需要换成行级块元素*/
  display: inline-block;
}
/*清除最后一行元素块的间隔(使用css选择器)*/
.myScroll .row:last-child{
  margin-right: 0;
}

Y轴滚动

<scroll-view class="myScroll" 	scroll-y>
<view class="row">1</view>
<view class="row">2</view>
<view class="row">3</view>
<view class="row">4</view>
<view class="row">5</view>
<view class="row">6</view>
<view class="row">7</view>
<view class="row">8</view>
</scroll-view>

.myScroll{
  width:100%;
  height:220rpx;
  background:#eee;
  /*强制将多出来的元素放在一行*/
/* white-space: nowrap; */
} 
.myScroll .row{
  width:220rpx;
  height:220rpx;
  background:palegreen;
  margin-right:10rpx;
}

4.2 movable-area自由移动

功能描述: movable-view的可移动区域

4.3 movable-view

功能描述: 可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。

4.4 match-media响应

功能描述: media query 匹配检测节点。可以指定一组 media query 规则，满足时，这个节点才会被展示。通过这个节点可以实现“页面宽高在某个范围时才展示某个区域”这样的效果。

案例展示：

<match-media min-width="300" max-width="600">
  <view>当页面宽度在 300 ~ 500 px 之间时展示这里</view>
</match-media>
<movable-area style="width:400rpx; height:400rpx; background:#ccc;  overflow:hidden">
  <movable-view out-of-bounds  inertia x="20rpx" y="20rpx"
   direction="all"  style="width:150rpx; height:150rpx; background: green ">
    <view>
      demo
    </view>
  </movable-view>
</movable-area>

4.5root-portal子树从页面中脱离出来

功能描述：使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等（使用函数的时候注意版本要求）

实例展示：

<view class="out">
    <view class="box1"></view>
    <view class="box2">
    <root-portal>
      <view class="mask">
      <!--样式会脱离出去-->
      </view>
    </root-portal>
    </view>
</view>


.out{

}

.out .box1{
  position: relative;
  z-index: 10;
  width:300rpx;
  height:300rpx;
  background:#77C1FC;
}

.out .box2{
  position:relative;
  width:350rpx;
  height:350rpx;
  background:palegoldenrod;
  z-index: 9;
  left: 100px;
  top:-100px;
}
/* .out .box2 .mask{
  width:100vw;
  height:100vh;
  background: rgba( 0,0,0,0.8);
  position:fixed;
  top:0;
  left:0;
  z-index: 11;
} */

.mask{
  width:100vw;
  height:100vh;
  background: rgba( 0,0,0,0.8);
  position:fixed;
  top:0;
  left:0;
  z-index: 11;
}
/*使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层*/

5.微信小程序app.json全局及页面配置

5.1 添加以及切换页面

在“pages”里面按照上面的格式直接添加新的页面

将pages的页面路径按照如图添加进去，编译的时候单独编译这个页面

5.2 全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，有以下属性

5.3 页面配置

app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的 .json 文件来对本页面的表现进行配置。

页面中配置项在当前页面会覆盖 app.json 中相同的配置项（样式相关的配置项属于 app.json 中的 window 属性，但这里不需要额外指定 window 字段），具体的取值和含义可参考全局配置文档中说明。

文件内容为一个 JSON 对象，有以下属性(目前只展示常用的配置项)

注：并不是所有 app.json 中的配置都可以在页面覆盖或单独指定，仅限于本文档包含的选项。
注：iOS/Android 客户端 7.0.0 以下版本，navigationStyle 只在 app.json 中生效

配置示例：

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

5.4 sitemap 配置

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引;

6.媒体组件

6.1 image

6.1.1三种引入方式

1.使用"../../"等相对路径

2.使用 "/" 进入根目录

3.使用网络图片（最好上传到自己服务器再使用）

6.1.2 image用法

功能描述：图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。

使用 svg 格式且 mode=scaleToFill 时，WebView 会居中（除非 svg 里加上 preserveAspectRatio="none"），Skyline 则会撑满
svg 格式不支持百分比单位
svg 格式不支持 element

实例展示：

    <image src="../../static/images/flower.png" mode="widthFix"></image>
<image src="/static/images/picture1.jpg" mode="heightFix"></image>

<image src="/static/images/picture1.jpg" mode="top center"></image>
<image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg " mode="aspectFit" 	show-menu-by-longpress></image>
<image src="../../static/images/picture2.jpg" mode="aspectFill"></image>

<!--最短的边显示出来-->
<!--引入本地图片(本地上传不超过5M,图片最好上传服务器)和网络图像-->

6.2 video

功能描述：视频

实例展示：

 <video style="width:100%; height:300rpx;"  src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" 
muted loop  object-fit="cover" 
           poster="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></video>

6.3 navigator页面链接导航

功能描述：

navigator 在 Skyline 下视为文本节点，只能嵌套文本节点（如 text），不能嵌套 view、button 等普通节点，如 foo
新增 span 组件用于内联文本和图片，如 bar

wx.navigateTo(Object object)

功能描述

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

wx.redirectTo(Object object)

功能描述：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

wx.switchTab(Object object)

功能描述：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.reLaunch(Object object)

功能描述：关闭所有页面，打开到应用内的某个页面

wx.navigateBack(Object object)

功能描述：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层

点击图像和文字，都会跳转到相应的界面

实例展示：

    <navigator url="../index/index" class="out" hover-class="hoverNav"> 
首页</navigator>

<navigator url="../index/index" class="out"> 
<image src="../../static/images/picture1.jpg" class="img" > </image>
</navigator>

    .hoverNav{
  color:#00B26A;
}

    <navigator url="../demo/demo" open-type="redirect"> go demo page</navigator>

参考资料：微信开发者工具文档

微信小程序开发——零基础学习（1）

1.小程序项目目录

1.1目录介绍

2.基础内容

2.1组件

2.1.1 view

2.1.2 text

2.1.3 icon

2.1.4 progress

3.响应式自适应单位rpx与px的差异

4.视图容器

4.1scroll-view 可滚动视图区域组件

4.2 movable-area自由移动

4.3 movable-view

4.4 match-media响应

4.5root-portal子树从页面中脱离出来

5.微信小程序app.json全局及页面配置

5.1 添加以及切换页面

5.2 全局配置

5.3 页面配置

5.4 sitemap 配置

6.媒体组件

6.1 image

6.1.1三种引入方式

6.1.2 image用法

6.2 video

6.3 navigator页面链接导航