利用聚合数据API快速写出小程序，过程简单。
1、申请小程序账号：
2、进入开发
3、调用API。比如“苏州实时公交”小程序，选择的是苏州实时公交API。
苏州实时公交API文档：https://www.juhe.cn/docs/api/id/31
如下，是“苏州实时公交”小程序调用代码：
[php] view plain copy
var url = "https://apis.juhe.cn/szbusline/bus";
//为了您的密钥安全，建议使用服务端代码中转请求，事例代码可参考 https://code.juhe.cn/
var apiKey = "yourKey"; //输入自己的key
Page({
data: {
inputValue: '',
restation: [],
condition: true
},
//获取输入框的值
bindInput: function(e) {
var that = this;
that.setData({
inputValue: e.detail.value
});
},
//点击搜索按钮调用的函数
search:function(e){
var that = this;
//数据加载完成之前，显示加载中提示框
wx.showToast({
title: '加载中。。。',
icon: 'loading',
duration: 10000
});
//输入框没有输入的判断
if(that.data.inputValue == ''){
wx.hideToast();
return;
}
//发起请求，注意 wx.request发起的是 HTTPS 请求
wx.request({
url: url + "?station=" + that.data.inputValue + "&key=" + apiKey,
data: {},
header: {
'content-type': 'application/json'
},
success: function(res) {
var data = res.data;
//将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值
that.setData({
restation: data.result,
condition: false
});
//数据加载成功后隐藏加载中弹框
wx.hideToast();
}
})
}
})
|
4、完整源码下载
提供“苏州实时公交”小程序的完整源码下载，可以通过完整的源码，更好的学习如何通过调用聚合API，快速实现编写小程序。
下载“苏州实时公交”小程序代码：juhewx.zip
二：微信小程序显示cms里的html文章
首先在cms模版中将html文章转化为json数据，识别图片，文本和换行，过滤掉样式和标签。这里是用PHP的正则表达式函数来实现的，$content是cms里的html文章。
<?php
$_arr = preg_split('/(<img.*?>)/i', $content, -1, PREG_SPLIT_NO_EMPTY | PREG_SPLIT_DELIM_CAPTURE);
$_r = array();
foreach($_arr as $_txt) {
if(substr($_txt, 0, 4) == '<img') {
$_matchs = array();
preg_match('/<img.*?src="(.*?)"/i', $_txt, $_matchs);
$_txt = $_matchs[1];
if(preg_match('/^\//', $_txt)) $_txt = $gupload.$_txt;
$_r[]= array('type'=>'img', 'data'=>$_txt);
}else {
$_txt = preg_replace('/&.*?;/', ' ', $_txt);
$_txt = preg_replace('/\s+/', ' ', $_txt);
$_txt = preg_replace(array('/<br.*?>/i', '/<p.*?>/i', '/<li.*?>/i', '/<div.*?>/i', '/<tr.*?>/i', '/<th.*?>/i'),
"\n", $_txt);
$_txt = preg_replace('/<.*?>/', '', $_txt);
$_r[]= array('type'=>'txt', 'data'=>$_txt);
}
}
$_data = array('title'=> $title, 'info'=> $inputtime, 'content'=> $_r);
echo json_encode($_data);
?>
|
小程序显示文章时请求cms生成的json数据，并通过循环和模版将文章内容显示出来。{{content}}是cms模版输出的json数据，是一条条段落或图片数据组成的数组。
<template name="img">
<view>
<image class="content-img" mode="aspectFit" src="{{item.data}}"></image>
</view>
</template>
<template name="txt">
<view>
<text>{{item.data}}</text>
</view>
</template>
<view class="content">
<block wx:for="{{content}}">
<template is="{{item.type}}" data="{{item}}"/>
</block>
</view>
|
