微信小程序入门示例
下面做一个非常简单的小程序（列出新闻列表，点击标题后进入详细页面）用来体会小程序的开发方式
共有两个页面，一个是列表页，一个是详细页
通过这个示例，我们可以了解：
- 视图中如何获取数据
- 如何添加页面
- 页面间如何跳转，如何参数传递
- 如何控制视图样式
主要步骤
1. 创建项目
小程序开发工具下载地址
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055364打开后选择 “添加项目”
如果没有appid，就点击“无AppID”，功能会受限，主要是API调用方面的，视图层的开发没什么限制
2. 准备测试数据集合
如果想从自己的服务器获取数据，需要在公众平台的小程序配置中添加自己的域名才可以
我没法设置，所以只能使用假的测试数据，在项目的根目录下新建一个数据文件
data.js内容形式为：
module.exports = [
{
image: '...',
title: '...',
content: '...'
},
...
]是一个JSON数组，每条的结构是：新闻图片、标题、内容
在 app.js 中引入测试数据
// app.js
var newsdata = require('data.js');
App({
globalData:{
data:newsdata
}
})3. 列表页的逻辑代码中获取数据，视图代码中循环展示
pages/index/index.js
// 取得 app 对象
var app = getApp()
Page({
data: {
// 获取全局数据，设置到本页的数据对象
news: app.globalData.data
}
})pages/index/index.wxml
<view class="news_item" wx:for="{{news}}">
...
{{item.title}}
...
</view>外层的
wx:for="{{news}}" 用来遍历 news，视图代码中可以直接调用 Page 对象的 data 中设置的数据
内层代码中使用
{{item.title}} 获取本条数据中的 title 值，'item' 是默认对象，用来代表循环中的单个条目
4. 新建详细页，添加到配置文件
在 pages 目录下新建目录 detail，在其中新建3个文件 detail.js、detail.wxml、detail.wxss
└── pages
├── detail
│ ├── detail.js （页面业务逻辑代码）
│ ├── detail.wxml （页面视图代码）
│ └── detail.wxss （样式代码）页面以目录为单位，以后需要新建页面时，就在 pages 目录下新建子目录及相关文件
新建页面后，需要告诉app，修改 app.json，添加新建的 detail 页面
{
...
"pages":[
"pages/index/index",
"pages/detail/detail"
],
...
}注意：不要写具体的文件后缀名
5. 点击列表中的标题跳转到详细页
页面的跳转通过 navigator 组件来实现
pages/index/index.wxml
...
<navigator url="../detail/detail?index={{index}}">
<view class="title">{{item.title}}</view>
</navigator>
...就像html中的a链接一样，指向目标页面地址，'?' 后面跟着参数，{{index}}中的‘index’是 wx:for 循环中的默认参数，是当前循环索引值
6. 详细页获取目标新闻的ID，从数据集合中取得此新闻的详细信息，视图代码中展示出来
pages/detail/detail.js
var app = getApp() //取得 app 对象
Page({
onLoad: function (options){
// 获取传递过来的参数
var news_index = options.index;
// 根据 index 从数据集合中取得目标数据
// 设置到 Page 对象的 data 中，供视图代码中调用
this.setData({
news : app.globalData.data[news_index]
});
}
})setData 方法非常重要，用来设置本页面中的 data 对象
视图中展示，pages/detail/detail.wxml
<view class="title">{{news.title}}</view>
<view class="content">{{news.content}}</view>Demo代码下载
很小的例子，适合作为入门了解，上面给出了主要部分的代码，如需完整代码，请在此下载：