创建实例
简述小程序初始文件结构
创建完小程序后，系统会自动创建一系列初始目录。接下来分别介绍一下它们。
- pages文件夹：用来存放小程序中的页面文件，每个小程序页面都会在其中创建一个对应的页面文件夹（参照下图案例中index）
- utils文件夹：可以将一些公共代码抽离成单独的js文件存放于该文件夹中。需要复用的时候直接使用require引入。注意需要先通过module.exports对外暴露接口才能使用。
- app.js文件（必备）：缺失会导致报错、小程序的全局js文件，可用于监听小程序的生命周期、声明全局变量等用途。
- app.json文件（必备）：缺失会导致报错、小程序的全局配置文件，可配置页面路由、小程序主页面、窗体信息等。
- app.wxss文件：小程序全局CSS样式文件
- project.config.json文件：这只是一个小程序开发工具的个性化配置文件，可以忽视它的存在。
创建新页面
除了默认创建的index和logs页面，接下来我们再创建一个新页面home。
- 右键点击pages文件夹选择新建>目录创建名为home的文件夹。
- 再次右键点击home文件夹选择新建>page创建名为home的页面。（此时会自动创建出相关的js、json、wxml、wxss文件）
页面文件夹中 .wxml、.wxss、.js分别可以对应web网站中的.html、.css、.js 而 .json 文件则负责配置窗口标题、窗口颜色等的项目配置文件
同理在创建完home页面后我们可以再创建一个item页面，用来后继进行跳转测试。
美化ActionBar
创建资源文件夹
熟悉web开发的小伙伴应该会疑惑，小程序中类似图片等资源文件要如何存放。
资源文件其实没有很定性的要求，这边我们以assets命名一个资源文件夹为示例。
点击开发者工具项目目录上的加号，可以在小程序的最外层目录添加新文件。
在小程序目录的最外层创建一个新文件夹assets，为了归类资源我们在assets文件夹中创建一个新文件夹images用于存放图片资源。
在需要使用该图片资源的地方使用相对路径即可。
小提示：由于小程序提交时有限制项目包的大小，所以不建议将太多图片等大型资源存放在项目文件中。
设置小程序tab导航
同样我们需要打开app.json（所有通用配置都需要靠app.json）。
这里需要配置的是tabBar参数：
-
backgroundColor：导航背景色；
-
color：导航默认字体颜色；
-
selectedColor：当前选中导航的字体颜色；
-
list：导航列表；
-
其中list参数又分别有一下几个值：
-
pagePath：栏目对应页面路径；
-
text：栏目标题；
-
iconPath：栏目小图标；
-
selectedIconPath：栏目被选中状态小图标；
示例代码：
"tabBar": {
"backgroundColor": "#ffffff",
"color": "#999999",
"selectedColor": "#ea5a49",
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/assets/images/homepage.png",
"selectedIconPath": "/assets/images/homepage_fill.png"
},
{
"pagePath": "pages/index/index",
"text": "我的",
"iconPath": "/assets/images/mine.png",
"selectedIconPath": "/assets/images/mine_fill.png"
}
]
}
可以将示例代码拷贝到app.json文件中，紧接window参数的后面，记住要再window参数最后加一个 , （逗号），否则会导致json报错哦~
需要将对应的图片资源存放到assets资源文件夹中导航才能正常显示。
美化页面
设置页面框架
打开home页面文件夹中的home.wxml。
接下来我们来搭建一个建议的图片列表页面框架。
将下列示例代码复制到home.wxml页面中替换原有内容。
<!--pages/home/home.wxml-->
<view class="item-group">
<view class="item">
<navigator url="../item/item">
<image class="item-image" src="https://7n.w3cschool.cn/attachments/cover/cover_html.png?t=15547020"></image>
<view class="item-title">HTML教程</view>
</navigator>
</view>
<view class="item">
<navigator url="../item/item">
<image class="item-image" src="https://7n.w3cschool.cn/attachments/cover/cover_html5.png?t=1314520"></image>
<view class="item-title">HTML5教程</view>
</navigator>
</view>
</view>
- 小程序中通常使用view进行页面布局，跟HTML中的div类似。
- 小程序中图片是以image元素包裹的，记住别和HTML中的img搞混了。
- 小程序中可以使用navigator元素实现简单的内部页面跳转，类似a元素同样使用url设置跳转路径（外链跳转需要拥有企业认证并绑定对应域名）。
渲染页面样式
小程序的页面样式渲染语法基本跟CSS一致，接下来我们引用CSS中的flex布局。
打开home页面中的home.wxss，将下列示例代码复制进去。
/* pages/home/home.wxss */
.item-group{
display:flex;
flex-wrap:wrap;
padding:10rpx 12rpx;
}
.item{
width:339rpx;
margin:0rpx 12rpx 30rpx 12rpx;
flex-shrink:0;
}
.item-image{
width:339rpx;
height:180rpx;
border-radius:8rpx;
}
.item-title{
font-size:26rpx;
line-height:1.5;
margin-top:10rpx;
color:#444;
text-align:center;
}
小程序的image元素必须设置具体高度，不能使用auto，否则会导致图片不显示，小程序中有设置默认的image高度，如需自定义请注意。
配置路由
配置首页路由
小程序默认首页是index。而此时项目中需要以home页面来作为首页。
仅需将app.json文件中pages中对应的页面路径提升到第一行就可默认成为首页。
例如：
将home页面对应的路径提升至第一条，则home页面即被设置为首页。
注意：这里需要说明一点 pages 里面的路径其实是指向js文件的。如果一个目录下没有该名称的js文件是会报错的！
丰富页面数据
对首页进行数据渲染
目前的首页数据是通过前端页面直接写入的。接下来将其更改为通过js实现数据动态渲染。
小程序可以通过wx.request调取接口获取对应的数据，demo中我们暂时以固定的json数据来替代接口数据进行展示。
注：由于小程序使用外部图片资源需要在小程序后台配置对应的request合法域名
同理如果想使用小程序调取服务器已写好的接口获取数据，需要至小程序后台将对应的域名配置入业务域名列表中
首先在home.js中将页面初始数据data替换为下例代码。
/**
* 页面的初始数据
*/
data: {
data: [
{ 'src': 'https://7n.w3cschool.cn/attachments/cover/cover_html.png?t', 'title': 'HTML教程' },
{ 'src': 'https://7n.w3cschool.cn/attachments/cover/cover_html5.png?t', 'title': 'HTML5教程' },
{ 'src': 'https://7n.w3cschool.cn/attachments/cover/cover_css.png?t=1556160481', 'title': 'CSS教程' },
{ 'src': 'https://7n.w3cschool.cn/attachments/cover/cover_css3.png?t=1554859196', 'title': 'CSS3教程' },
]
},
接着打开home.wxml为之前写好的页面框架进行数据绑定（可将下列代码直接覆盖原有代码）
<!--pages/home/home.wxml-->
<view class="item-group">
<view class="item" wx:for="{{data}}" wx:key="{{item}}" >
<navigator url="../item/item?title={{item.title}}" >
<image class="item-image" src="{{item.src}}"></image>
<view class="item-title">{{item.title}}</view>
</navigator>
</view>
</view>
通过wx:for与wx:key，将json中的数据循环遍历到页面框架中。
增加事件绑定
对wxml页面设置绑定监听事件
上一节中，介绍过小程序可以通过设置navigator元素的url实现内部页面跳转。
接下来介绍如何通过增加事件绑定实现页面跳转。
首先将home.wxml中的代码进行修改。将原navigator元素去掉url属性，改为绑定bintap监听事件并设置data-title属性。
小程序中wxml页面触发监听事件需要向js传递属性值时可以用
data-***=""的格式设置属性值。
注意：***为自定义参数名，不能使用驼峰命名。
<!--pages/home/home.wxml-->
<view class="item-group">
<view class="item" wx:for="{{data}}" wx:key="{{item}}" >
<navigator data-title="{{item.title}}" bindtap="openItem" >
<image class="item-image" src="{{item.src}}"></image>
<view class="item-title">{{item.title}}</view>
</navigator>
</view>
</view>
上述代码为navigator绑定了bindtap事件监听，当该元素触发单击事件时，会触发openItem事件，并将提供data-title参数。
在js中实现对应接收事件
上一步我们在home.wxml中绑定了对应的监听事件，接下来我们要在home.js中实现对应的事件供其调用。
打开home.js可以发现系统默认已经生成了一些基础的监听事件，我们可以将下列代码复制到末尾，紧接着其他事件。（记住在上一个事件后面增加一个 , ）
/**
* 触发跳转item页面事件，并传递title参数过去
*/
openItem: function(e){
var title = e.currentTarget.dataset.title;
wx.navigateTo({
url: '../item/item?title=' + title
})
}
openItem可供前端调用，这里我们可以通过e.currentTarget.dataset.title获取页面中设置的title参数。
openItem通过wx.navigateTo实现了页面内部跳转的效果。
在item页面中获取参数
首先，在item.wxml中设置一个text元素并绑定title参数为元素内容。
<!--pages/item/item.wxml-->
<text>{{title}}</text>
其次，在item.js中设置title的默认值，并在页面加载监听事件中获取由home页面传递过来的title参数。
/**
* 生命周期函数--监听页面加载
*/
onl oad: function (options) {
this.setData({
title: options.title
})
},
用上述代码替换掉item.js中默认生成的onLoad事件。
代码中通过options对象获取路径传递过来的参数，并通过this.setData对页面初始数据title进行重新赋值。
至此我们就成功的获取到了通过路径传递过来的title参数。