1. 新建页面, 在 app.json 中注册页面. 技巧, 直接选中pages, 在上放选择新建page, app.json会自动加入进来.
{
"pages": [
"pages/index/index",
"pages/zcontent/zcontent"
],
"window": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "主标题",
"backgroundTextStyle": "light"
}
}
2. 数据绑定, 2种方法, 1种是放在 data中, 1种是setData 赋值
2.1 放在data中, 然后绑定到页面
Page({
data: {
current: 0,
},
onLoad(){
}
})
<view class="zlogo">
<image src="{{current}}"></image>
</view>
2.2 setData 赋值
that.setData({
items: res.data['data']
})
模板循环
<view s-for="item in items" class="zcontent" bind:tap="clicknr" data-swan="{{item.id}}">
<view class="c01">
<image class="c01img" src="https://baiduapi.bjoral.com{{item.thumb}}"></image>
</view>
<view class="c02">
<view class="c02title">{{item.title}}</view>
<view class="c02description">{{item.description|substr=0,10}}...</view>
<view class="c02time">{{item.addtime}}</view>
</view>
</view>
3. 绑定事件, 并拿到属性值
<view class='xx' bind:tap="clicknr" data-swan="2"></view>
clicknr: function (event) {
// console.log(event.currentTarget.dataset.swan);
swan.navigateTo({
url: '/pages/zcontent/zcontent?id=' + event.currentTarget.dataset.swan
});
},
4. 页面跳转到下一个页面
swan.navigateTo({
url: '/pages/zcontent/zcontent?id=100'
});
5. 接受到上一个页面的值
onLoad: function (options) {
// options.id 这个id就是上一页面传递过来的值
console.log(options.id);
},
6. ajax请求
Page({
onShow() {
//meta信息
var that = this;
swan.request({
url: 'https://baiduapi.bjoral.com/baidu/indexDetail', // 仅为示例,并非真实的接口地址
method: 'POST',
dataType: 'json',
data: {
key: 'value'
},
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
// console.log(res.data.data['img']);
swan.setPageInfo({
title: res.data.data['meta']['title'],
keywords: res.data.data['meta']['keywords'],
description: res.data.data['meta']['description'],
image: res.data.data['img'],
success: function () {
console.log('setPageInfo success');
},
fail: function (err) {
console.log('setPageInfo fail', err);
}
})
},
fail: function (err) {
console.log('错误码:' + err.errCode);
console.log('错误信息:' + err.errMsg);
}
});
}
})
7. php返回json
function show($status, $message, $data = array())
{
$result = array(
'status' => $status,
'message' => $message,
'data' => $data,
);
exit(json_encode($result));
}
8. php中处理 日期和html
public function detail($id)
{
$Art = M('Article');
$arts = $Art->field('id,cid,title,thumb,content,keywords,description,addtime')->where(array('ischecked' => 1, 'isdelete' => 0))->where(array('id' => $id))->limit(1)->find();
//处理html格式
$arts['content'] = htmlspecialchars_decode($arts['content']);
// 替换/Uploads/ 为绝对路径
$arts['content'] = str_replace('/Uploads', 'https://baiduapi.bjoral.com/Uploads', $arts['content']);
// 处理img大小, 加上属性 max-width:100%
$arts['content'] = str_replace('<img', "<img style='max-width:100%' ", $arts['content']);
if (!empty($arts)) {
show(1, '输出成功', $arts);
} else {
show(0, '输出失败');
}
}
//处理字符串
foreach ($arts as &$v) {
$v['title'] = mb_substr($v['title'], 0, 11, 'utf-8');
$v['description'] = mb_substr($v['description'], 0, 20, 'utf-8');
$v['addtime'] = date("Y-m-d", $v['addtime']);
}