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


Posted in Javascript onJune 13, 2017

微信小程序调用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);
  }
 }

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
vue时间格式化实例代码
Jun 13 #Javascript
详解vue slot插槽的使用方法
Jun 13 #Javascript
详解Vue.js分发之作用域槽
Jun 13 #Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 #Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 #Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 #Javascript
微信小程序动态显示项目倒计时效果
Jun 13 #Javascript
You might like
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
FF IE兼容性的修改小结
2009/09/02 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
python 循环while和for in简单实例
2016/08/16 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
python实现自动登录
2018/09/17 Python
python and or用法详解
2019/06/26 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
上海方立数码笔试题
2013/10/18 面试题
探亲邀请信范文
2014/01/30 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
python中的3种定义类方法
2021/11/27 Python