下面做一个非常简单的小程序(列出新闻列表,点击标题后进入详细页面)用来体会小程序的开发方式

共有两个页面,一个是列表页,一个是详细页

通过这个示例,我们可以了解:

1. 视图中如何获取数据
2. 如何添加页面
3. 页面间如何跳转,如何参数传递
4. 如何控制视图样式

主要步骤

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.jsvar 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  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 >{{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 >{{news.title}}</view><view >{{news.content}}</view>

Demo代码下载

很小的例子,适合作为入门了解,上面给出了主要部分的代码,如需完整代码,请在此下载: