微信小程序调用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中的有名函数和无名函数
Oct 17 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 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
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
ThinkPHP php 框架学习笔记
2009/10/30 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
python获取本机所有IP地址的方法
2018/12/26 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
大学生冰淇淋店商业计划书
2014/01/14 职场文书
党员评议个人总结
2014/10/20 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
房屋维修申请报告
2015/05/18 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
Jsonp劫持学习
2021/04/01 PHP
解析MySQL binlog
2021/06/11 MySQL
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
Redis基本数据类型String常用操作命令
2022/06/01 Redis