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

 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. Mac 安装 brew

    安装方法:命令行输入 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/ma ...

  2. RecyclerView 缓存机制详解

    一 前言 RecyclerView据官方的介绍,该控件用于在有限的窗口中展示大量数据集,其实这样功能的控件我们并不陌生,例如:ListView.GridView.RecyclerView可以用来代替传 ...

  3. winform禁用标题栏

    protected override void WndProc(ref Message m) { if (m.Msg == 0x112) { switch ((int)m.WParam) { //禁止 ...

  4. [10] 圆管(Pipe)图形的生成算法

    顶点数据的生成 bool YfBuildPipeVertices ( Yreal radius, Yreal assistRadius, Yreal height, Yuint slices, YeO ...

  5. find-k-pairs-with-smallest-sums

    // https://discuss.leetcode.com/topic/50527/java-10ms-solution-no-priority-queue class Solution { pu ...

  6. UNIX 域套接字——UNIX domain socket

    /*********************程序相关信息********************* * 程序编号:015 * 程序编写起始日期:2013.11.30 * 程序编写完成日期:2013.1 ...

  7. Android实现图片轮显效果——自定义ViewPager控件

    一.问题概述 使用ViewPager控件实现可横向翻页.水平切换图片等效果,但ViewPager需要手动滑动才能切换页面,图片轮显效果的效果本质上就是在ViewPager控件的基础上让它能自动的进行切 ...

  8. android 多线程概述

    android多线程,一直是一个麻烦的事情,要掌握它的本质,我们需要搞清楚一个问题,linux多线程的本质. 我们这篇文章,来讨论以下的议程: 了解linux的历程,了解android的异步任务机制, ...

  9. python3 把excel文件合并并保存到csv文件

    具体是这样,某路径下有很多 excel文件,文件名中包含相同关键字的是一类文件,把包含相同关键字的文件合并成一个文件,生成一个新的csv文件 # coding=utf-8 import xlrd im ...

  10. hdu 5326

    Work Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...