宁皓网 微信小程序：组件 有大用

view 组件是一种视图容器，你可以用它来包装一些其它的组件，可以使用 view 去构建页面的布局 .. 在这个 wxml 页面的视图文件里 . 我们可以去做一些练习 .. 理解一下小程序里的各种组件 ..

添加一个 view .. 上面可以加上一个 css 类，比如 view-container .. 在页面或者小程序的样式文件里，你可以设计这个类的样式 ..

它里面再包装一个 view .. 上面加上一个表示颜色的类 .. 比如 red .. 在这个 view 的下面，再包装一个 text 组件 .. 里面是要显示的文字 .. .

然后再添加两块 view ..

emmet 技巧

如果编辑器里安装了 emmet 插件，我们可以使用缩写的形式去创建这种标签结构 .. view 点 view-container ，大于号 .. 括号 .. 包装的是 view.color ，它下面还有个 text，这个 text 里面有一些数字 .. 需要三组 ..

view.view-container>(view.color>text{$})*3

再按一下 emmet 展开缩写的快捷键 .. mac 上是 shift + command + E ..

继续

修改一下组件上用的 css 类的名字， red. 这个是 yellow .. 最后这个组件上的类是 blue ...

然后打开页面的样式文件 .. 定义一下 red 类的样式 .. 设置一下 background .. 颜色是一种红色 .. #db2828 .. 再定义一下 yellow 类的样式 .. 把 background 的值设置成 #fbbd08 .. 一种黄色 .. 再去设置一下 .blue 类的样式 .. background 的值是 #2185d0 ..

再去设计一下 .view-container 的样式 .. 先用一个 display ，把组件的显示设置成 flex ，让它变成一个 flexbox ，关于 css 的 flexbox 宁皓网有个专门的课程 ..

flex-direction 设置成 column ... justify-content 设置成 space-around ... 再添加一个 height ，高度设置成 100vh ..

然后设置一下 .view-container 下面的 view 组件的样式 .. width 可以是 100% .. height 高度，也可以是 100% ..

最后再设置一下 .view-container 下面的 text 的样式 .. color 是白色 .. . padding 添加点内边距 .. 大小是 16px .. display 设置成 block .. 再用 font-size 设置一下字号 .. 大小是 32px ..

这里如果我们把 view-container 的 flex-direction 设置成 row ... 页面上这几个颜色块会横着排 .. 先把它设置成 column ..

属性

在 view 组件上，有几个专有属性 .. 在这个带颜色类的 view 上面，添加一个 hover-class .. 它可以指定按下这个元素以后应用的样式类 .. 比如我们添加一个 lighten ... .

回到样式文件 .. 设置一下 lighten 的样式 .. 可以用一个 opactiy 设置一下不组件的透明度 .. 大小是 0.85

到开发者工具上试一下 .. 打开 调试 .. wxml ..

按下页面上的颜色块 ... 在这个组件上会应用在 hover-class 里面指定的样式 .. 这个按下去触发 hover 状态的时间，可以用 hover-start-time 属性来控制 .. 松开以后，保留 hover 状态的时间可以用 hover-stay-time 这个属性来控制 ..

来自 https://ninghao.net/video/5099#info

在页面上的一块视图，你可以滚动显示它里面的内容，可以使用 scroll-view 这个组件包装一下这块视图 .. 你可以设置可以滚动的方向，可以配置滚动的行为，还有添加一些跟滚动相关的事件处理等等 ..

这里我们用一组 scroll-view 组件 .. 包装一下前面我们添加的这块视图 .. 选中这块代码 .. 安装了 emmet 插件，可以用一下 ctrl + W .. 输入包装 .. scroll-view ..

让这个滚动视图里面的东西可以垂直滚动，可以添加一个 scroll-y .. 把它的值设置成 true ..

允许视图横向滚动，可以把 scroll-x 设置成 true ..

滚动视图需要一个固定的高度 .. 这里我们直接在上面添加一个 style ，在组件上应用点样式 .. 用 height 设置一下它的高度 .. 大小是 180px ..

现在，页面上这块视图，就可以垂直滚动显示它里面的内容了 ..

scroll-into-view

scroll-into-view 这个属性可以指定当前滚动到的元素 .. 添加一个这样的属性 .. 它的值是个字符串 .. 这里给它绑定一个来自页面的初始数据 .. 名字可以是 currentView

然后再设置一下滚动视图里的这几个组件 .. 都给它们添加一个 id 属性 .. 这个是 red ... 下面这个是 yellow ... 最后这个可以叫 blue ..

打开页面的主逻辑文件 .. 在 data 里面，添加一个 currentView .. 给它一个初始的值 .. 比如 yellow .. 保存 ..

你会发现当前这个滚动视图显示的就是 yellow .. 这个值我们可以动态的去设置一下 .. 先把它设置成 red ..

回到视图 .. 这里可以添加几个按钮组件 ... 用的是 button .. 按钮上的文字是 red .. 再给这个按钮绑定一个 tap 事件 .. 事件处理的名字可以是 setScrollIView ... 然后可以在这个元素上面添加一个自定义的 data 属性 .. 属性的名字可以是 data-view .. 这个按钮的 data-view 的值是 red ..

再添加两个这样的按钮 .. 这个按钮的 data-view 的值是 yellow ... 按钮上的文字也是 yellow .. 下面这个 data-view 是 blue .. 按钮上的文字是 blue ..

这个自定义的 data 属性的值我们可以在事件对象里得到 ..

回到页面的主逻辑文件 .. 添加按钮上用的事件处理 .. 名字是 setScrollView .. 接收一个 event 参数 .. 里面可以用一下 this.setData 去设置一下页面上的数据 .. 设置的数据是 currentView ，把它的值设置成发生 tap 事件上的元素上的自定义的 data-view 这个属性的值 .. 它的值是在 event 里面的 target .. dataset 里面 .. 名字是 view

再把页面上这几个按钮添加点样式 .. 要设置的是 button 组件的样式 .. 给它添加一个外边距，大小是 8px ..

预览

然后到开发者工具去试一下 ... 点一下页面上的按钮 .. 这样会滚动显示对应的元素 ..

注意在 wxml 面板上 . . 滚动视图上的 scroll-into-view 属性的变化 .. 还有 scroll-top 属性的变化 ..

滚动的时候可以添加一个动画效果 .. 在滚动视图上，再添加一个 scroll-with-animation 属性，把它的值设置成 true ..

这样在滚动显示的时候，就会有一个动画效果了 ..

来自 https://ninghao.net/video/5100#info

swiper 是个幻灯片或者叫旋转木马组件 .. 在小程序的页面上添加一个幻灯片，可以先用一组 swiper .. 幻灯片里的每个项目单独用一个 swiper-item 组件 ..

它里面包装的就是可以循环显示的幻灯片项目 .. 这里先用一个 image 组件，在项目里添加一个图片 .. 上面加上 src 属性，指定一下图片的位置 ..

在 ninghao-images 这个仓库里面
https://github.com/ninghao/ninghao-images/tree/master/weixin/app
有几张图片 .. 可以用一下 .. 复制图片的地址 .. 粘贴到 src 属性里面 ..

然后再复制两个项目 .. 修改一下项目里的图像的地址 ... 复制 ... 粘贴 .. 每个项目都让它使用不同的图像 ..

打开页面的样式文件 .. 可以设置一下 image 组件的样式 .. 把它的 width 设置成 100% ..

现在页面上就会显示一个幻灯片 .. 可以左右滑动 .. 显示幻灯片里的不同的项目 ..

swiper 组件有些属性可以配置幻灯片的显示还有行为 .. 比如先添加一个 indicator-dots .. 让它等于 true .. 这样会在幻灯片上显示一组指示点 ..

indicator-color 可以设置一下这个指示点的正常状态的颜色 ... 可以用 rgba 表示 .. 颜色是白色 .. 不透明度是 0.3 ..

indicator-active-color .. 设置的是激活状态下的指示点的颜色 .. 这里把它设置成白色 ..

指示点可以提示用户幻灯片里面有几个项目 .. 当前显示的是哪一个 ..

这个 swiper-item 可以用一个wx:for 循环来显示 .. 我们先在页面的主逻辑的初始化数据里面，添加一组数据 .. 这个组数据就是幻灯片里的项目要用的一些东西 .. 比如添加一个 images .. 它里面就是一些图像的地址 ..

然后回到页面的视图文件 .. 可以用一个 block .. 它可以包装一块视图 .. 这个 block 并不是一个实际的组件 .. 因为这里我们不需要使用一个多余的组件 ..

在它上面添加一个 wx:for .. 循环的一组数据是页面里的 images .. 里面包装一个幻灯片项目 .. image 的 src 属性的值可以使用 item 表示 ..

这个 block 里的东西，有点像是幻灯片项目的一个模板 ..

保存一下 ..

页面上仍然会显示之前的幻灯片 ..

来自 https://ninghao.net/video/5101#info

一个东西可以在一块区域内自由地移动，可以使用微信小程序的 movable-view 组件 .. 先在页面上用一个 movable-area 去定义一块可移动的区域 ..

它里面可以包装一下可移动的视图容器 .. movable-view .. 在这个组件上添加一个 direction 属性，它可以设置一下可移动的方向，默认是 none ，就是不能移动 .. 它的值还可以是 all 任意方向 ，vertical 垂直方向，还有 horizontal 水平方向 .. 先把它设置成 all

然后打开页面的样式文件，去定义一下可移动区域还有可移动视图的样式 .. movable-area .. 设置一下可移动区域的宽度 .. 100vw .. 还有它的高度 .. 50vh .. 再给它添加一个背景颜色 .. #ededed

可移动视图 .. movable-view ，用 width .. 设置一下它的宽度 .. 让它等于 80px .. height 可以设置高度 .. 也把它设置成 80px .. 最后再给它添加一个背景颜色 .. #6435c9 ..

现在页面上的灰色的背景这块就是一块可移动的区域 .. 它里面包装的这个紫色的方块就是一个可移动视图 .. 它可以在这块可移动区域以内自由地移动 ..

属性

inertia [ɪˈnɜ:rʃə] 可以在可移动视图上添加惯性 .. 添加一个 inertia ，把它的值设置成 true .. 现在这个紫色的块就会有惯性 .. 移动它的时候，停止以后，它仍然会继续移动一段距离 ..

默认这个可移动视图不能越过它所在的可移动区域 .. 我们可以给它添加一个 out-of-bounds 属性 .. 让它等于 true ...

这样这个可移动视图就可以越过一点它的可移动区域 .. 松开手以后，会自动弹回去..

在可移动视图上可以添加 x 还有 y 属性 .. 它们可以控制可移动视图在水平还有垂直的位置 ..

来自 https://ninghao.net/video/5102#info

icon 组件可以在页面上添加微信小程序里定义好的一些常用的小图标 .. 用一个 icon 组件 .. 上面加上一个 type 属性，它可以控制小图标的类型 .. 比如把它设置成 success 就会显示一个成功小图标 .. 设置成 info，就显示一个信息小图标 .. search ，表示搜索 .. .. cancel .. 是取消 ..

在 icon 组件上可以再用一个 size 来设置图标的大小 .. 比如设置成 56 .. 这个大小的单位是像素 ..

text

text 组件可以显示一般的文字 .. 一组 text .. 里面包装的就是要显示的文字 ..

rich-text

我们如果有一组元素或者文本要显示的话，可以用一下 rich-text 组件 .. 它有个 nodes 属性 .. 对应的值就是一组节点 .. 节点可以是元素类型，也可以是文字类型 .. 默认是元素类型 .. 元素类型的节点里面可以包含 html 的标签名 .. 比如 h1，code，blockquote 等等 .. 元素类型的节点里面还可以包含元素的属性 .. 比如 style 属性 .. class 属性等等 ..

给它绑定一个数据，名字可以是 nodes .. 然后在小程序的初始化数据里面，添加这个 nodes .. 它的值应该是一个数组 ..

每个节点又是一个对象 .. 里面先添加一个 name .. 设置一下标签的名字 .. 比如 img .. 是一个 html 的图像标签 ..

再添加一个 attrs ，它表示元素上的属性 .. 它的值是个对象 .. 里面是属性还有对应的值 .. 比如标签上有个 class 属性，值是 image .. 再添加一个 src 属性 .. 它的值是一个图像的地址 ...

保存 .. 你会发现，页面上会显示一张图片 .. 这个图片上有个 image 类，可以用这个类去给它添加一些样式 ..

在样式文件里，添加一个 .image .. 把 width 的值设置成 100% ..

在这个 nodes 里面，可以再添加一个节点试一下 .. 一个对象 .. name 是标签的名字 .. 这里用一下 h3 .. attrs .. 是标签上的属性 .. 一个 class .. 添加一个类 .. 名字是 header

元素类型的节点还可以有一个 children 属性，它里面的东西是元素的子元素 .. 它应该是个数组 .. 每个子元素又是一个单独的对象 .. 这个子元素可以用一下 type 去设置节点的类型，把它设置成 text ，表示这是一个文本类型的元素 ..

然后再添加一个 text ，设置一下元素里的文本内容 .. 输入一个 hello ~

现在页面上会显示两个元素， 一张图片，还有一个用 h3 标签包装的文字 ..

progress

再试一下 progress 组件 .. 它会在页面上显示一个进度条 .. 表示当前进度，可以用一个 percent 属性 .. 表示进度的百分比 ..

激活状态的进度的颜色 .. 可以用 activeColor 属性设置 ..

来自 https://ninghao.net/video/5104#info

在小程序的页面上添加一个表单，可以先用一个 form 组件 ... 它里面可以包装一些表单元素 .. 比如文本框，复选框这些东西 .. 先用一个简单的 slider 组件 .. 组件上添加一个 show-value 属性，这样在滑动这个 slider 的时候，会实时地显示 slider 的值 ..

表单一般会带个提交按钮 .. 点击这个按钮以后，会触发表单的 submit 事件，也就是提交事件 .. 在事件处理里面，可以得到表单里的元素上的数据 .. 可以再配置一下提交表单具体要做的事情 .. 比如把数据发送给后端服务接口去处理 ..

用一个 button 组件 .. 按钮上的文字是 提交 .. 上面加上一个 form-type ，把按钮的表单类型设置成 submit .. 它的值还可以是 reset ，表示重置 .. 这样会触发表单的 reset 事件，重置表单上的数据 ..

在表单上可以添加一个事件处理 .. 用一个 bindsubmit ，这个属性的值就是 submit 事件的处理方法 .. 名字可以是 formSubmit ..

打开页面的主逻辑文件 .. 在 Page 里面添加一个事件 .. formSubmit ... event 是它的参数，表示事件 .. 在事件的 detail 里面的 value ，就是表单元素上的值 ..

页面上这个 slider 组件显示有点问题 .. 这跟我给小程序添加的样式有关 .. 在小程序的样式里面 .. 设置一下 form 组件的样式 .. 把 width 设置成 100vw ..

再回到开发者工具 .. 用一下页面上的这个 slider .. 再提交一下 ..

控制台上会输出一个空白的对象 .. 这里我们需要给表单元素起个名字 .. 这样它的值才会包含在 事件对象，detail 下面的 value 属性 ..

在 slider 组件上面 ，添加一个 name 属性，给这个元素起个名字 .. 比如叫它 slider ..

再回到开发者工具试一下 .. 滑动选择一个值 .. 点一下 提交 按钮 .. 这次你会发现，控制台上输出的表单值对象里面，有了一个 slider ... 它的值就是我们在 slider 上选择的值 ..

label

表单元素可以配一个 label，就是标签，说明一下表单元素的作用 ... 添加一组 label .. 标签里的文字可以放在 text 组件里面 ..

我们可以用这个 label 去包装一下表单元素 ..

或者也可以在 label 上面添加一个 for 属性 .. 属性的值就是跟这个标签对应的表单元素上的 id .. 比如 slider .. 然后在这个 slider 表单元素上再添加一个 id 属性 .. 它的值应该是 slider ..

来自 https://ninghao.net/video/5106#info

input 是文本框 .. 在我们的表单里添加一个 input .. type 的值是这个 input 元素的类型 .. 默认是 text .. 想在表单里包含这个元素里的值需要给它起个名字 .. 用一个 name 属性 .. 名字可以是 text ..

placeholder 可以在文本框里面添加一个点位符文字 .. 提示用户这个文本框里应该输入什么样的信息 ..

在页面的样式文件里再去设计一下 input 的样式 . 添加一个 input .. 先用 padding 添加点内边距 .. 大小是 8px .. background ，背景颜色是白色 .. 再用 margin 添加点外边距 .. 然后再给它添加一个边框 ..

1 个像素的灰色实线 .. 然后用 border-radius 添加点圆角效果 ..

预览

在这个文本框里输入点东西 .. 按一下提交 .. 这个文本框里的值会在表单的 submit 事件处理里面得到 ..

在表单组件上绑定事件可以使用 bind ，后面加上事件的名字 .. 比如 bind 一个 input 事件，添加的属性就是 bindinput ，属性的值就是事件处理方法 .. 比如 inputHandler ..

在页面的主逻辑里面定义一个 inputHandler .. 接收一个 event 参数 .. 然后在控制台上我们可以输出 event，detail 下面的 value 属性的值 ..

再试一下

在文本框里输入内容 .. 会实时的在控制台上输出我们输入的内容 ..

textarea

再添加一个 textarea .. 文本区域，可以用这种组件向用户收集大块的内容 .. 同样需要一个 name 属性，给它起个名字 .. placeholder 是点位符文字 .. textarea ... 也可以用 bind 去绑定事件 .. 这里给它绑定一个 input 事件 . 也用 inputHandler 来处理 .

然后再设置一下文本区域的样式 .. 添加一个 textarea ... 再把 width 的值设置成 auto ...

再到开发者工具去试一下 .. 输入内容 .. 然后提交 ..

表单里面的数据，会包含表单里的文本框还有文本区域里的内容 ..

来自 https://ninghao.net/video/5107#info

checkbox 是复选框 .. 在小程序的页面上添加一组复选框，可以先用一组 checkbox-group .. 上面可以用一个 name ，给这组复选框起个名字 .. 每一组复选框都可以放在一组单独的 checkbox-group 里面 ..

它里面是不同的复选框项目 .. 每个项目可以用一个 label ，添加一个标签 .. 在 text 组件里面设置一下标签文字 ..

复选框项目用的是 checkbox 组件 .. 它上面 value 属性表示的是这个复选框的值 .. 也就是用户如果勾选了这组复选框里的这个项目 .. 这个 value 属性的值就会包含在复选框群组里面 ..

添加两个这样的项目 ..

然后在 checkbox-group 上面可以绑定一个 change 事件 .. 复选框发生变化会触发这个事件 .. 我们可以用之前创建的 inputHandler 来处理一下 ..

保存一下 ..

再到开发者工具里面去预览一下 .. 勾选一下复选框 .. 注意控制台上会输出复选框群组的值 ..

再提交一下表单 .. 复选框群组里的数据可以在表单里得到 .. 这个数据是一个数组 ... 数组项目就是被勾选的复选框的值 ..

一般如果我们有一组复选框 .. 可以用一下循环来输出 .. 可以在页面的 data 里面添加一组数据 .. 比如 items .. 每个对象里都可以有个 name 属性，表示项目的名字 .. 还有一个 value 属性，表示对应的值 ..

再添加两个这样的项目 ..

回到视图文件 .. 这里只留下一个复选框项目 .. 然后在这个 label 上面用一个 wx:for ，循环一下页面里的 items .. 再添加一个 wx:key ，指定一下项目的索引的名字 ..

text 组件里的东西可以绑定一个 item.name .. 复选框的值是 item.value ..

回到开发者工具 .. 页面上会显示一组复选框项目 ...

radio

radio，单选按钮的用法跟 checkbox 差不多 .. 一组单选按钮要放在 radio-group 里面 .. 再修改一下它的名字 .. 同样可以 bind 一个 change 事件 ..

单选按钮也需要一个 label .. 单选按钮项目用的是 radio 组件 .. 保存一下文件 ..

现在页面上会显示一组单选按钮 ..

用户可以选择这组单选按钮里面的其中的一个 .. 提交一下表单 .. 单选按钮组的值可以在表单的 submit 事件处理里面找到 ..

来自 https://ninghao.net/video/5108#info

picker 组件可以在屏幕底部弹出一个可以滚动选择项目的东西 .. 它的 mode 属性可以设置这个选择器的类型 ..

我们先在页面的初始化数据里面，给 picker 组件准备一组数据 .. 添加一个 items .. 里面添加几个项目 .. 中国 .. 泰国 .. 日本 ..

再添加一个表示当前选择值的数据 .. 这里我们用 pick 来表示 .. 先让它的值等于 0 .. 我们可以使用 picker 组件的 change 事件处理动态的设置这个 pick 的值 ..

比如一会我们用一下 inputHandler 作为 picker 组件的 change 事件处理 .. 在这个方法里面，可以用一下 this.setData 去设置一个数据 .. 要设置的是 pick 这个数据 .. 对应的值设置成 event.detail.value .. 这里事件里的 detail 下面的 value 属性，就是 picker 变化之后的那个值 ..

回到视图文件 .. 用一个 picker 组件 .. 添加一个 range 属性，它的值就是一个可以选择的范围 .. 或者叫可以选择的项目 .. 这里我们给它绑定一个 items .. bindchange ，绑定一个 change 事件 .. 用 inputHandler 来处理 .. 再用 name ，给这个 picker 起个名字 .. 比如 picker

它里面包装一组 view .. 里面嵌套一个text .. 这里可以输出 picker 当前所选择的项目 .. 绑定显示 items 里面的对应的项目 .. 这个项目的索引就是当前 picker 所选择的项目 ..

再到小程序的样式文件 .. 可以给 picker 添加点样式 ...

回到开发者工具 .. 点开这个 picker ... 会出现我们给它绑定的这组数据 .. 这里可以滚动选择某个项目 ..

点一下确定 ..

picker 上会显示当前所选择的项目 ..

来自  https://ninghao.net/video/5109#info

时间

再试一下时间选择器 .. 先去修改一下页面的初始化数据 .. 把这个 pick 的值换成一个时间 .. 格式就是两位数字表示的小时，冒号，加上两位数字表示的分钟 .. 比如 09:00 ..

回到视图 .. 改造一下这个 picker .. 绑定输出当前选择 .. 这里就是 pick ..

然后在 picker 组件上添加一个 mode，设置一下它的模式 .. 使用时间选择器的话，这个 mode 的值应该是 time ..

默认一天的时间都可以选择，如果你想规定个范围，可以加上一个 start .. 设置一个开始的时间 .. 再用一个 end ，添加一个截止的时间 .. 这样用户只能选择这个时间范围以内的时间 ..

回到开发者工具 .. 打开这个 picker .. 左边可以滚动选择小时 ... 右边这栏选择的是分钟 ..

date

这个 picker 的 mode 还可以是 date，也就是日期选择器 .. 可以再试一下 .. 这回我们把 pick 的值设置成一个日期 .. 这个日期用四位数字的年，横线，两位数字的月份，横线，再加上两位数字的日子 ..

再回到视图 .. 把这个 picker 改造成 date 类型 .. 它跟 time 类型的 picker 的用法差不多 .. mode 属性的值要设置成 date ..

这里我们同样可以使用 start 还有 end 去设置一个可选范围 .. start 设置成 1911-01-01 .. end 设置成 2060-12-31

保存一下文件 .. 回到开发者工具 ..

打开这个 picker .. 会出现一个日期选择器 .. 这里用户可以选择年份 .. 月份 .. 还有一个日子 ..

在 date 类型的 picker 组件上，我们还可以使用一个 fields 去设置一下可选的颗粒度 .. 默认它的值是 day，就是用户可以选择到日期的具体的日子 ..

如果你只想让用户选择到月份 .. 可以把 fields 的值设置成 month ..

现在这个 picker 只会让用户选择年份 ... 还有月份 ...

region

还有个地域类型的 picker，可以很容易创建地域选择器 .. 还是先去设置一下初始化数据 ..

这个 pick 表示的是当前选择的项目 .. 地域应该是个数组 .. 第一个项目是省份 .. 比如山东省 .. 第二个项目是市 .. 比如济南市 .. 第三个项目是区 .. 比如槐荫区 ..

回到视图文件 .. 改造一下这个 picker .. 先去掉不需要的属性 ..

mode 的值要设置成 region ，表示区域 .. 然后添加一个 value 属性，绑定一个值，这里就是 pick ..

回到开发者工具再试一下..

打开 picker .. 这里会有三栏内容 .. 用户可以选择省份 .. 市 .. 还有某个区 ..

来自 https://ninghao.net/video/5110#info

navigator 组件可以创建小程序里面的页面与页面之间的链接 .. 在这个视图页面添加一组 navigator .. 里面可以包装一个文字 ..

这个 navigator 有几个类型，我们先看一下 switchTab .. 添加一个 open-type 属性，设置一下打开页面的类型 .. 先把它设置成 switchTab .. 它可以切换标签 ..

再添加一个 url 属性，它的值就是页面的地址 .. 这里应该是一个标签页面的地址 .. 比如 /pages/index/index ..

到开发者工具上试一下 .. 按一下页面上的 demo .. 页面会切换到 首页 这个标签 .. 因为这个页面的地址就是 pages/index/index

我们可以再添加一个页面 .. 打开 编辑 .. 先新建一个目录 .. 名字是 demo .. 在这个目录的下面，再新建一个 Page .. 名字也可以是 demo

回到视图页面 .. 把这个 open-type 设置成 navigate .. 这种链接可以保留当前页面，然后打开新的页面 ..

这个页面的地址就是刚才我们创建的 pages/demo/demo ..

再按一下页面上的 demo .. 这样会打开一个新的页面 .. 就是这个 demo 页面 .. 这里有个返回按钮，用户还可以返回到这前打开的页面 ..

再试一下 redirect 类型的 navigator .. 把 open-type 的值换成 redirect

然后再按一下页面上的 demo .. 这回小程序会关掉当前打开的页面，然后打开新的页面 ..

这里我们再把它换成 navigate ..

在打开页面的时候，我们可以给页面传递参数 .. 在页面地址里面，添加一个问号 .. 然后是参数的名字 .. 比如 id .. 等号右边的东西是参数的值 .. 随便输入一个数字 ..

在打开 demo 页面的主逻辑文件 .. 在它的 onLoad 生命周期里面，它的 options 参数里会包含传递过来的参数 .. 我们把这个 options 输出到控制台可以检查一下 ..

再按一下 demo .. 在控制台上输出的对象里面，会有一个 id .. 这就是我们传递给页面的参数 ..

来自 https://ninghao.net/video/5112#info

audio 组件可以在小程序页面上添加音频 .. 用一个 audio .. poster 属性设置的是音频的海报 .. 设置一个图像的地址 .. https://resources.ninghao.net/deng-deng-deng-1x1.jpg

src 属性的值是音频文件的地址 .. https://resources.ninghao.net/deng-deng-deng.mp3

然后可以再添加一个 author 属性设置一下音频的作者 ... 再用一个 name 属性，设置一下音频的名字 .. 再添加一个 controls .. 显示控制音频播放的东西 ..

现在页面上会显示一个音频 .. 点一下播放 ... 可以播放这个音频 ..

事件

有几个常用的事件，可以绑在 audio 组件上 .. 先用一个 bindplay .. 播放音频的时候会执行它 .. 用一下 play .. 再添加一个 bindpause .. 事件处理用 pause .. 暂停的时候会用它 .. bindended ，结束播放的时候执行一下 ended ..

再到页面的主逻辑里面添加这几个事件处理 .. 一个 play .. 把事件对象交给它 .. 然后在控制台上输出 event 对象 ..

再添加一个 pause .. 同样在控制台上输出事件对象 .. 还有一个 ended ..

到开发者工具再去预览一下 .. 播放 .. 触发 paly ... 暂停 .. 触发 pause 事件 .. 你会看到事件的 type 是 pause ..

结束播放以后，会触发 ended 事件...

视频

添加视频用的是 video 组件 .. 添加一个 video .. 它的 poster 属性设置的就是视频的封面图像 ..
 

poster="https://resources.ninghao.net/deng-deng-deng.jpg"
src="https://resources.ninghao.net/deng-deng-deng.mp4"

src 属性的值是视频的地址 ..

现在，页面上现在会显示一个视频 ..

video 的 objectFit 属性可以设置内容的填充方式 .. 比如我们把它设置成 cover ..

这样视频内容会保持自己的比例，填满视频容器 ..

图像

要显示图像，可以使用 image 组件 .. 添加一个 image .. 图像的地址可以放在 src 属性里面 .. 页面上会显示一张图片 ..
 

https://raw.githubusercontent.com/ninghao/ninghao-images/master/weixin/app/demo-3.jpg

我们可以把之前为 image 添加的样式去掉 ...

你会发现，现在这个图像的显示比例有点问题 .. 这是因为图像容器的比例与图像比较不一致 .. 我们先在 image 组件上面用一个 style .. 添加点样式 .. 设置一下背景颜色 ..

然后再添加一个 mode 属性 .. 先把它设置成 aspectFit .. 图像会保持它的比例，并且会缩放显示(没有截取 长短边均完整显示) .. 注意它的上面还有下边露出来的灰色部分其实就是图像容器的多余部分 ..

再把这个图像的宽度设置成 100vw ...

让图像保持自己的比例，并且占满整个图像容器显示(会有截取 短边完整显示) .. 可以把 mode 设置成 aspectFill ..

来自 https://ninghao.net/video/5114#info

map ，是一个地图组件 .. 先在页面视图文件里面添加一个 map ... 地图有个中心位置，这个位置可以使用 longitude 经度 .. 还有 latitude .. 纬度的值来控制 ..

先添加一个 longitude .. 设置一下地图的经度值 .. 117.0311013 .. 再添加一个 latitude ... 设置一下位置的纬度 .. 36.662447 ... 这个位置是济南的黑虎泉 ..

然后再去设置一下 map 的宽度还有高度 .. 在小程序的样式文件里面 .. 设置一下 map 的样式 .. width 设置成 100vw .. height .. 设置成 100vh ..

scale 属性可以设置地图的缩放级别 .. 它的值最小可以是 5 .. 最大可以是 18 .. 默认它的值是 16 ..

markers

在地图上我们可以添加一些标记 .. 这些标记要放在 markers 里面 .. 添加一个 markers 属性 .. 然后给它绑定一个数据 .. 名字可以是 markers .. 在页面的初始化数据里面 .. 添加一个 markers .. 它是一个数组 .. 里面的项目就是在地图上添加的标记 ..

可以先给 marker 添加一个 id ..

然后再用一个 longitude ，设置一下标记的经度 .. 117.0311013 .. 再用一个 latitude . 设置一下标记的纬度 .. 36.662447 ..

标记还需要一个小图标 .. 添加一个 iconPath 属性 .. 它的值就是小图标的位置 .. /assets/icons/pin.png ..
https://github.com/ninghao/ninghao-icons/tree/master/weixin/app

callout

在标记上面可以显示一个提示文字 .. 这个东西叫 callout .. 在刚才添加的这个 marker 里面，添加一个 callout 属性 .. 它的值是一个对象 .. 里面又包含一些属性 ..

content .. 它的值就是 callout 里的内容 .. 黑虎泉 .. 想让这个 callout 可以在正常的位置上显示的话，我们还需要去设置一下 maker 用的小图标的宽度还有高度 .. 添加一个 width .. 我用的小图标的宽度是 22 .. height，高度是 40 ..

然后继续再设计这个 callout .. 添加一个 fontSize .. 它控制的是 callout 里的文字的大小 .. 大小可以是 14 ... color 可以设置文字的颜色 .. 这里我们设置成黑色 .. #000 .. 再用一个 padding 可以添加点边距 . 大小是 8 .. bgColor 可以设置 callout 的背景颜色 .. 这里用一下白色 #ffffff .. borderRadius .. 是圆角效果 .. 大小是 4 .. 再添加点阴影效果 .. boxShadow .. 4px 8px 16px 0 rgba(0,0,0,0.18)

再到开发者工具的模拟器上预览一下我们设计的这个地图 ...

来自  https://ninghao.net/video/5116#info