用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

面向新手《十九》用聚合数据API快速写出小程序,显示cms里的html文章 ...

天下雪 2017-1-11 16:23

一:用聚合数据API快速写出小程序作者:ishxiao,来自原文地址利用聚合数据API快速写出小程序,过程简单。1、申请小程序账号:参考:http://www.wxapp-union.com/forum.php?mod=viewthreadtid=19892、进入开发3、调 ...

一:用聚合数据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

如下,是“苏州实时公交”小程序调用代码:

[php] view plain copy
  1. var url = "https://apis.juhe.cn/szbusline/bus";  
  2.     //为了您的密钥安全,建议使用服务端代码中转请求,事例代码可参考 https://code.juhe.cn/  
  3.     var apiKey = "yourKey";    //输入自己的key  
  4.   
  5.     Page({  
  6.       data: {  
  7.         inputValue: '',  
  8.         restation: [],  
  9.         condition: true  
  10.       },  
  11.       //获取输入框的值  
  12.       bindInput: function(e) {  
  13.         var that = this;  
  14.         that.setData({  
  15.           inputValue: e.detail.value  
  16.         });  
  17.       },  
  18.   
  19.     //点击搜索按钮调用的函数  
  20.       search:function(e){  
  21.         var that = this;  
  22.   
  23.         //数据加载完成之前,显示加载中提示框  
  24.         wx.showToast({  
  25.           title: '加载中。。。',  
  26.           icon: 'loading',  
  27.           duration: 10000  
  28.         });  
  29.   
  30.         //输入框没有输入的判断  
  31.         if(that.data.inputValue == ''){  
  32.             wx.hideToast();  
  33.             return;  
  34.         }  
  35.   
  36.         //发起请求,注意 wx.request发起的是 HTTPS 请求  
  37.         wx.request({  
  38.           url: url + "?station=" + that.data.inputValue + "&key=" + apiKey,  
  39.           data: {},  
  40.           header: {  
  41.               'content-type''application/json'  
  42.           },  
  43.           success: function(res) {  
  44.             var data = res.data;  
  45.             //将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值  
  46.             that.setData({  
  47.               restation: data.result,  
  48.               condition: false  
  49.             });  
  50.             //数据加载成功后隐藏加载中弹框  
  51.             wx.hideToast();  
  52.           }  
  53.         })  
  54.   
  55.       }  
  56.     })  

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>  

 

鲜花
鲜花 (2)
鸡蛋
鸡蛋

刚表态过的朋友 (2 人)

分享至 : QQ空间
收藏
原作者: ishxiao 来自: 原文地址

相关阅读