|
一：用聚合数据API快速写出小程序
作者：ishxiao，来自原文地址
利用聚合数据API快速写出小程序，过程简单。
1、申请小程序账号：参考：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1989
2、进入开发
3、调用API。比如“苏州实时公交”小程序，选择的是苏州实时公交API。
苏州实时公交API文档：https://www.juhe.cn/docs/api/id/31
如下，是“苏州实时公交”小程序调用代码：
-
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>
|
|
