微信小程序调用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 相关文章推荐
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 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和ACCESS写聊天室(十)
2006/10/09 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
Python pass 语句使用示例
2014/03/11 Python
在Python中处理XML的教程
2015/04/29 Python
Python入门_条件控制(详解)
2017/05/16 Python
python实现堆排序的实例讲解
2020/02/21 Python
Python实现壁纸下载与轮换
2020/10/19 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
活动总结怎么写
2014/04/28 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
2015国庆节宣传语
2015/07/14 职场文书
班主任培训研修日志
2015/11/13 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
Python打包为exe详细教程
2021/05/18 Python
SpringBoot集成Redis的思路详解
2021/10/16 Redis