微信小程序调用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 相关文章推荐
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
js实现一键复制功能
Mar 16 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 Javascript
JS实现打砖块游戏
Feb 14 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 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 setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
python中mechanize库的简单使用示例
2014/01/10 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
英语专业个人求职自荐信
2013/09/21 职场文书
大学生入党自我鉴定
2013/10/31 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
道德与公民自我评价
2015/03/09 职场文书