微信小程序调用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 动态酷效果实现总结
Dec 27 Javascript
理解Javascript_10_对象模型
Oct 16 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 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用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
vue组件与复用详解
2018/04/08 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
python实现画圆功能
2018/01/25 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
django 自定义过滤器的实现
2019/02/26 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
高山背包:High Sierra
2017/11/23 全球购物
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
大学生村官事迹材料
2014/01/21 职场文书
学习决心书范文
2014/03/11 职场文书
绿化工程实施方案
2014/03/17 职场文书
教师师德演讲稿
2014/05/06 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers