百度小程序概述

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']);
}