微信小程序知识总结

在对一个程序或者界面编译之前，需要有充足的知识储备，同时需要一个良好的编程软件，因此微信团队开发了一个适用于大众及专业人员的软件：稳定版 Stable Build | 微信开放文档

---

进入软件界面之后，首先会看到app.js、app.json,app.wxss、project.config.json、sitemap.json，他们的功能为

sitemap.json配置文件

project.config.json配置文件

wxml类似于html中的html 书写页面结构

wxss类似于html中的css 书写页面样式

app.wxss书写全局样式

app.json配置文件

---

一、如何创建一个页面

例如我要创建一个名为box的页面，首先，我们要找到app.json文件中的pages,在pages中输入

"pages/box/box", (在微信小程序中，逗号（,）相当于Java中的分号(;）有分开代码的作用，但不同的是，小程序可以不用在最后一个语句中加逗号），编译box之后模拟器中会显示pages/box/box.wxml，此时代表创建成功，此时可以在资源管理器中的pages文件里看到文件box，因此我们可以知道每个页面都有一个独立的文件夹每一个页面文件都包含后缀为wxml  wxss js json四个文件。

---

知识点（WXML）

1.在页面中添加图片

<image  src="../../images/图片名称.后缀"></image>

在标签 image 中加入mode="aspectFit"可以使图片保持纵横比，完整的显示图片

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

3.图标组件
icon图标组件:
icon的类型，有效值：success, success_no_circle, 
info, warn, waiting, 
cancel, download, search, clear
<icon type="success" size="100" color="lime"></icon>
<icon type="success_no_circle" size="100" ></icon>
<icon type="info" size="100"></icon>
<progress percent="30" backgroundColor="orange" active="true" color="red"></progress>

4.导航
navigator导航：navigator实现页面跳转
<navigator url="/pages/index/index">首页</navigator>
url跳转的地址  /根路径
如果跳转页面在tabbar中出现过，不能直接跳转 ,加open-type="switchTab
<navigator url="/pages/my/my" open