微信小程序入门示例

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

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

通过这个示例，我们可以了解：

视图中如何获取数据
如何添加页面
页面间如何跳转，如何参数传递
如何控制视图样式

主要步骤

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代码下载

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

微信小程序DEMO-news.zip