微信小程序调用PHP后台接口 解析纯html文本

微信小程序调用PHP后台接口,解析纯html文本,效果图片预览

1、微信js动态传参:

wx.request({
    url: 'https://m.****.com/index.php/Home/Xiaoxxf/activity_detail?a_id='+options.id,//含富文本html
    data: {
     is_detail:1
    },
    method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
    header: {
     'Content-Type': 'application/json'
    },
    success: function (res) {
     that.setData({
      Article: res.data  //一维数组json编码后对象
     })

    /**
     * html解析
    */
     var article = that.data.Article;
    console.log("article = " + article);
     WxParse.wxParse('article', 'html', article, that, 5);
     console.log(res.data);
    },
    fail: function (res) { },
    complete: function (res) { },
   }),

其中,options.id是由前一个wxml页面动态传过来的参数。

2、wxParse插件使用:

github地址: https://github.com/icindy/wxParse,版本0.2
解决问题:微信小程序富文本html、md解析组件

1)复制wxParse文件夹到pages同目录
2)在wxml页面引入模板代码:

<import src="../../wxParse/wxParse.wxml"/>
<!--这里可以添加其他的任何wxml代码-->

富文本html框内容:<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

3)在js的page({})里面引入执行文件

// 引入wxParse.js解析文件
var WxParse = require('../../wxParse/wxParse.js');
page({...})

4)在js文件里面解析获取的纯html字符串,注意:这里必须得是字符串(如:'<div>2112</div>'),如果有'\'就要去掉。
示例代码:

wx.request({
    url: 'https://m.*****.com/index.php/Home/Xiaoxxf/activity_detail?a_id='+options.id,//含富文本html
    data: {
     is_detail:1
    },
    method: 'GET',
    header: {
     'Content-Type': 'application/json'
    },
    success: function (res) {
     that.setData({
      Article: res.data  //一维数组json编码后对象,全部数据
     })

    /**
     * html解析
    */
     var article = that.data.Article;
    console.log("article = " + article);
     WxParse.wxParse('article', 'html', article, that, 5);
     console.log(res.data);
    },
    fail: function (res) { },
    complete: function (res) { },
   })

3、PHP后台接口(本接口仅做示例,未做安全和过滤校验):

public function activity_detail(){
    $is_detail = I('is_detail');
    if(!empty($is_detail)){     //富文本html文章
      $a_id = I('a_id');
      $a_id = intval($a_id)?$a_id:0;
      if(empty($a_id)){
        $data['code'] = 500;
        $data['msg'] = '抱歉,文章已失效';
        echo json_encode($data);
      }else{
        /* php方法:stripslashes() 将html文章去掉json转移字符\ --xzz0608*/
        //获取结果为指定字段的二维数组,下面截取一维数组
        $data =D()->query("select act_detail from xxf_witkey_activity where is_show = 1 and a_id = ".$a_id." order by a_id desc");
        //var_dump($data);return ;
        $data = $data[0];
        $data = stripslashes(implode(',', $data));
        $data = str_replace(array('src="/data/uploads/','src="data/uploads/'),array('src="http://www.xxiangfang.com/data/uploads/','src="http://www.xxiangfang.com/data/uploads/'),$data);
        echo $data;
      }
    }else{       //普通字段(封面、特色、活动名称)
      $a_id = intval(I('GET.a_id'));
      $data =D()->query("select a_id,act_name,pic_url,introduction from xxf_witkey_activity where is_show = 1 and a_id = ".$a_id." order by a_id desc");
      if($data)
        $data = $data[0];
        echo json_encode($data);
    }
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序图片宽100%显示并且不变形

    微信小程序图片宽100%显示并且不变形 按照HTML习惯进行写,代码: <view class="meiti"> <image src="http://10.0.0.171:9001/images/2017/0619/20170619115150713_progressive.jpg" style="width:100%;"></image> </view> 效果如下: 很明显变形了 找到一篇关于微

  • 微信小程序图片自适应支持多图实例详解

    微信小程序图片自适应支持多图实例详解 微信小程序图片自适应,是一个比较常见的需求,平时我们在WEBView中,只需要设置max-width:100%.在微信里面虽然widthFix也能实现,但有一个缺陷就是图片的宽度值要大于或者等于设定的值,否则就会发生拉伸变形,本文通过另外一种来适应. 首先我们来看看图片组件给的一些说明: 属性名 类型 默认值 说明 src String 图片资源地址 mode String 'scaleToFill' 图片裁剪.缩放的模式 binderror HandleE

  • 详解微信小程序 template添加绑定事件

    详解微信小程序 template添加绑定事件 对于模板的使用,我是想将模板的事件单独出来,其他引用模板的页面中不再掺杂模板事件,比较方便管理,如果还有其他好的解决办法, 请赐教. template.wxml <view bindtap="clickView" class="tempClass">temp模板</view> template.js var temp = { clickView: function () { console.log

  • 详解微信第三方小程序代开发

    详解微信第三方小程序代开发 微信申请第三方之后可以获取授权方的很多权限,主要的是生码和待开发,生码的第三方授权之前已经写了一篇文章,最近做了小程序待开发,总结一下写下来供大家参考 注意事项:如果在调试过程中返回了错误码请到小程序代开发api页面查看,   小程序代开发使用的域名是你申请第三方时候填写的域名, 小程序代码模板最多只有50个,可以删除然后重新添加. 准备工作: 申请微信第三方并且权限那边要选上代开发,第三方申请成功之后就是准备小程序了,需要两个小程序,一个作为小程序代码库,一个作为用

  • 微信小程序实现皮肤功能(夜间模式)

    老规矩,先上效果图 个人对夜间模式这个功能情有独钟 晚上黑灯瞎火的看手机,屏幕亮度就算调到最低依然很是刺眼呀 所以我一直用某浏览器,因为有夜间模式 言归正传,依然是分析功能点 1.点击按钮,切换一套css(这个功能很简单) 2.把皮肤设置保存到全局变量,在访问其它页面时也能有效果 3.把设置保存到本地,退出应用再进来时,依然加载上次设置的皮肤 先从切换开始吧,switch很少用,还是贴一下吧 <switch bindchange="switchChange" color =&qu

  • 微信小程序组件 marquee实例详解

    微信小程序组件 marquee实例详解 1. marquee标签 html是有marquee标签的,可以实现跑马灯效果,但小程序没有,所以要实现.这里考虑使用css3的animation实现. html的marquee是这样使用的. <marquee direction="left" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1"

  • 微信小程序调用PHP后台接口 解析纯html文本

    微信小程序调用PHP后台接口,解析纯html文本,效果图片预览 1.微信js动态传参: wx.request({ url: 'https://m.****.com/index.php/Home/Xiaoxxf/activity_detail?a_id='+options.id,//含富文本html data: { is_detail:1 }, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT heade

  • 微信小程序request请求后台接口php的实例详解

    微信小程序request请求后台接口php的实例详解 后台php接口:http://www.vueyun.com/good/info 没有处理数据,直接返回了,具体再根据返回格式处理 public function getGoodInfo(Request $request) { $goods_datas = $this->Resource->get(); return response()->json(['status' => 'success','code' => 200,

  • 微信小程序调用微信支付接口的实现方法

    前言:应项目要求,需要使用微信小程序做支付,写完后告知手续费太高方案不予通过(宝宝心里苦,但宝宝不说).此次开发在因站在巨人的肩膀上顺利完成. 微信支付文档传送门:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3 1.开发工具: Eclipse+Tomcat+微信web开发工具 2.开发环境: java+maven 3.开发前准备: 3.1 所需材料 小程序的appid,APPsecret,支付商户号(mch_i

  • 详解微信小程序调用支付接口支付

    我前段时间做微信支付,遇到了很多坑,网上也没有讲解的特别明白的,通过借鉴各路人才的经验,最后也完成了,网上有很多讲解,我在这只讲一些注意点和解决的方法.我就讲讲我从完全懵到完成的过程吧. 在微信提供的接口文档中提供了一个微信支付接口,应该是直接调用这个接口就可以发起微信支付 文档路径:https://developers.weixin.qq.com/miniprogram/dev/api/api-pay.html#wxrequestpaymentobject 但是,当开始信心满满的去看所需参数时

  • 微信小程序调用支付接口的完整流程记录

    目录 当然在开发之前,我们需要有下面这些东西: 步骤如下: 总结 官方的文档路径------>文档路径:developers.weixin.qq.com/miniprogram… 当然在开发之前,我们需要有下面这些东西: appId(小程序分配) 小程序密钥(小程序配置界面获取) 商户号 api密钥(商家后台自己设置) 首先我们要知道把大象放进冰箱拢共需要三步(不是),那么我们调起支付也是一样的 步骤如下: wx.login获取用户临时登录凭证code,发送到后端服务器换取openId 在下单时

  • Thinkphp5微信小程序获取用户信息接口的实例详解

    Thinkphp5微信小程序获取用户信息接口的实例详解 首先在官网下载示例代码, 选php的, 这里有个坑 官方的php文件,编码是UTF-8+的, 所以要把文件改为UTF-8 然后在Thinkphp5 extend文件夹下建立Wxxcx命名空间,把官方的几个类文件放进去(这里要注意文件夹名, 命名空间名, 类名的, 大小写,一定要一样,官方的文件名和类名大小写不一样) 然后是自己的thinkphp接口代码: <?php /** * Created by PhpStorm. * User: le

  • 微信小程序网络请求实现过程解析

    这篇文章主要介绍了微信小程序网络请求实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 配置服务器域名: 每个微信小程序需要事先设置一个通讯域名,小程序只可以跟指定的域名进行网络通信. 服务器域名在:小程序后台=> 开发=> 开发设置 => 服务器域名中配置,配置时需注意: 1.域名只支持https(request, uploadFile,downloadFile)和wss(connectSocket)协议. 2.域名不能使用i

  • 微信小程序使用map组件实现解析经纬度功能示例

    本文实例讲述了微信小程序使用map组件实现解析经纬度功能.分享给大家供大家参考,具体如下: 声明 bug: 页脚的详细地址在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图采用cover-view,放在map中. 感谢: 感谢Lrj_estranged指出问题! 效果图 实现原理 1. map组件实现定位标记或者指定定位标记,并保存location. 2. 采用高德地图微信小程序开发API(

  • 微信小程序调用摄像头隐藏式拍照功能

    微信小程序最近非常火热,小编最近做了一个新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大家,具体内容如下: 问题 今天小编遇到了这么个问题,就是在用户使用App参加考试的时候调用摄像头抓拍用户是否作弊,其实这也没什么,关键在于不能打扰用户考试,不能被用户发现什么时候抓拍的,也不能给用户查看图片,只有考完是后才能查看.这系统相当于考驾照时的上机答题部分.开始经理的要求是调用小程序外部的手机拍摄功能,这

  • 解决微信小程序调用moveToLocation失效问题【超简单】

    上图所示,mapUpdated表示地图加载完成后,再初始化数据. 为什么moveToLocation失败? 第一:可能你的ID取错了: 第二:调用moveToLocation时,必须需要调用wx.getLocation,并且用户授权后,才能使用moveToLocation方法 总结 以上所述是小编给大家介绍的解决微信小程序调用moveToLocation失效问题[超简单],希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 如果你觉得本文

随机推荐