微信小程序调用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 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
javascript onmouseout 解决办法
Jul 17 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
Bootstrap布局方式详解
May 27 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 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 引用文件技巧
2010/03/02 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
javascript实现下雨效果
2017/03/27 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
Python图像灰度变换及图像数组操作
2016/01/27 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
django实现支付宝支付实例讲解
2019/10/17 Python
python验证码图片处理(二值化)
2019/11/01 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
python打包生成so文件的实现
2020/10/30 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
杠杆的科学教学反思
2014/01/10 职场文书
幼儿教师求职信
2014/05/24 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
出差报告格式模板
2014/11/06 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫