下面做一个非常简单的小程序(列出新闻列表,点击标题后进入详细页面)用来体会小程序的开发方式
共有两个页面,一个是列表页,一个是详细页
通过这个示例,我们可以了解:
小程序开发工具下载地址
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055364
打开后选择 “添加项目”
如果没有appid,就点击“无AppID”,功能会受限,主要是API调用方面的,视图层的开发没什么限制
如果想从自己的服务器获取数据,需要在公众平台的小程序配置中添加自己的域名才可以
我没法设置,所以只能使用假的测试数据,在项目的根目录下新建一个数据文件
data.js
内容形式为:
module.exports = [
{
image: '...',
title: '...',
content: '...'
},
...
]
是一个JSON数组,每条的结构是:新闻图片、标题、内容
在 app.js 中引入测试数据
// app.js
var newsdata = require('data.js');
App({
globalData:{
data:newsdata
}
})
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' 是默认对象,用来代表循环中的单个条目
在 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"
],
...
}
注意:不要写具体的文件后缀名
页面的跳转通过 navigator 组件来实现
pages/index/index.wxml
...
<navigator url="../detail/detail?index={{index}}">
<view class="title">{{item.title}}</view>
</navigator>
...
就像html中的a链接一样,指向目标页面地址,'?' 后面跟着参数,{{index}}中的‘index’是 wx:for 循环中的默认参数,是当前循环索引值
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>
很小的例子,适合作为入门了解,上面给出了主要部分的代码,如需完整代码,请在此下载: