---效果图片预览---
 

 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);
}
}

原创:微信小程序调用PHP后台接口,解析纯html文本的更多相关文章

  1. 原创:微信小程序开发要点总结

    废话不多少,下面是对我从开发微信小程序的第一步开始到发布的总结,觉得对您有帮助的话,可以赞赏下,以对我表示鼓励. 一:首先注册登录微信公众平台,这个平台很重要,以后查文档全在上面看.https://m ...

  2. 微信小程序与Java后台通信

    一.写在前面 最近接触了小程序的开发,后端选择Java,因为小程序的代码运行在腾讯的服务器上,而我们自己编写的Java代码运行在我们自己部署的服务器上,所以一开始不是很明白小程序如何与后台进行通信的, ...

  3. 微信小程序与Java后台的通信

    一.写在前面 最近接触了小程序的开发,后端选择Java,因为小程序的代码运行在腾讯的服务器上,而我们自己编写的Java代码运行在我们自己部署的服务器上,所以一开始不是很明白小程序如何与后台进行通信的, ...

  4. 微信小程序的Web API接口设计及常见接口实现

    微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,通过小程序的请求Web API 平台获取JSON数据后,可以在小程序界面上进行数据的动态展示.在数据的关键 一环中,我们 ...

  5. 微信小程序登录JAVA后台

    代码地址如下:http://www.demodashi.com/demo/12736.html 登录流程时序登录流程时序 具体的登录说明查看 小程序官方API 项目的结构图: springboot项目 ...

  6. 微信小程序需要https后台的创业机会思考

    最近比较关注微信小程序,而且微信小程序的后台必须强制要求https, https相对http成本要高很多了. 这里我感觉有2个商机 (1)提供https 中转服务器 ,按流量来收费 (2) 微信小程序 ...

  7. 图解微信小程序---调用API操作步骤

    图解微信小程序---调用API操作步骤 什么是API API(Application Programming Interface,应用程序编程接口:是一些预先定义的函数,目的是提供应用程序与开发人员基 ...

  8. 小程序调用wx.chooseLocation接口的时候无法获取权限(ios)

    ios手机小程序调用wx.chooseLocation接口的时候,获取权限的时候报authorize:fail:require permission desc这样子的错误,这是由于苹果的安全机制导致需 ...

  9. 记录一次用宝塔部署微信小程序Node.js后端接口代码的详细过程

    一直忙着写毕设,上一次写博客还是元旦,大半年过去了.... 后面会不断分享各种新项目的源码与技术.欢迎关注一起学习哈! 记录一次部署微信小程序Node.js后端接口代码的详细过程,使用宝塔来部署. 我 ...

随机推荐

  1. EntityFramework(EF)贪婪加载和延迟加载的选择和使用

    贪婪加载:顾名思议就是把所有要加载的东西一 次性读取 1 using (var context = new MyDbContext()) 2 { 3 var orders = from o in co ...

  2. Android之NDK开发环境r9

    需要的软件: android-ndk-r9-windows-x86_64.zip(我的系统是64位的,所以下载的是64的)下载地址:http://developer.android.com/tools ...

  3. .NET:CLR via C# Exceptions and State Management

    重点学习的个概念 unhandled exceptions constrained execution regions code contracts runtime wrapped exception ...

  4. win7下安装配置ftp服务器

    1. win7操作系统自带了ftp组件,所以不需要另外下载.只需要在控制面板中,添加或删除组件中启用即可. 2. 在管理上,ftp和iis是属于同一个目录的.ftp也可以算是internet info ...

  5. Mac 卸载MySql的方法

    sudo rm /usr/local/mysql sudo rm -rf /usr/local/mysql* sudo rm -rf /Library/StartupItems/MySQLCOM su ...

  6. 在oracle中查询已知表名的表中所有字段名,每个字段是否是主键,是否是外键,是否为空的sql语句

    查询表的所有列及其属性:select t.*,c.COMMENTS from user_tab_columns t,user_col_comments c where t.table_name = c ...

  7. JQuery文件上传及以Base64字符串形式呈现图片

    一:上传之 首先,你必然得有一个 file input,如下: <td>     <img id="imgGif" style="display: no ...

  8. russian-doll-envelopes

    https://leetcode.com/problems/russian-doll-envelopes/ // Use map (Russian doll number -> vector o ...

  9. LeetCode 84. Largest Rectangle in Histogram 单调栈应用

    LeetCode 84. Largest Rectangle in Histogram 单调栈应用 leetcode+ 循环数组,求右边第一个大的数字 求一个数组中右边第一个比他大的数(单调栈 Lee ...

  10. 理解js中的new

    new 操作符 在有上面的基础概念的介绍之后,在加上new操作符,我们就能完成传统面向对象的class + new的方式创建对象,在Javascript中,我们将这类方式成为Pseudoclassic ...