【澳门葡京】微信小程序,微信小程序调用PHP后台接口

微信小程序 富文本转文本实例详解,小程序转文

微信小程序-富文本转文本

前不久小程序这么火,笔者也来搞搞。开掘了一个恶心的标题。小程序未有组件能扶助富文本内容的,改接口又不太适宜,于是有了那问,没技艺含量纯粹记录

率先我们看眼未有被格式的富文本呈现:

*.wxml内代码。content是富文本内容

 <view>
   <text>{{content}}</text>
  </view>

展现结果:

澳门葡京 1

由以上海体育地方片看来,小程序不能够解析html文件

咱俩供给管理html富文本内容,让其出示赏心悦目点

下边间接上代码了,首要成效正是行使js的replace
对富文本草求原行管理,大家能够看一下。一齐优化,方便对富文本更加好的拍卖。

convertHtmlToText: function convertHtmlToText(inputText) {
  var returnText = "" + inputText;
  returnText = returnText.replace(/<\/div>/ig, '\r\n');
  returnText = returnText.replace(/<\/li>/ig, '\r\n');
  returnText = returnText.replace(/<li>/ig, ' * ');
  returnText = returnText.replace(/<\/ul>/ig, '\r\n');
  //-- remove BR tags and replace them with line break
  returnText = returnText.replace(/<br\s*[\/]?>/gi, "\r\n");

  //-- remove P and A tags but preserve what's inside of them
  returnText=returnText.replace(/<p.*?>/gi, "\r\n");
  returnText=returnText.replace(/<a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 ($1)");

  //-- remove all inside SCRIPT and STYLE tags
  returnText=returnText.replace(/<script.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/script>/gi, "");
  returnText=returnText.replace(/<style.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/style>/gi, "");
  //-- remove all else
  returnText=returnText.replace(/<(?:.|\s)*?>/g, "");

  //-- get rid of more than 2 multiple line breaks:
  returnText=returnText.replace(/(?:(?:\r\n|\r|\n)\s*){2,}/gim, "\r\n\r\n");

  //-- get rid of more than 2 spaces:
  returnText = returnText.replace(/ +(?= )/g,'');

  //-- get rid of html-encoded characters:
  returnText=returnText.replace(/ /gi," ");
  returnText=returnText.replace(/&/gi,"&");
  returnText=returnText.replace(/"/gi,'"');
  returnText=returnText.replace(/</gi,'<');
  returnText=returnText.replace(/>/gi,'>');

  return returnText;
}

将下面代码放入任意适合的小程序js文件中,
然后在急需处理数量的js文件里,引进文件,上面给出放入app.js文件中的调用示

例:

var app = getApp()//获取app小程序实例
 onLoad: function (options) {
    wx.request({
   url: 'http://example.com/api' + options.id+'.json',
   headers: {
    'Content-Type': 'application/json'
   },
   success: function (res) {
    res.data.content = app.convertHtmlToText(res.data.content )
     that.setData({
      art: res.data.content
     })
     console.log(res.data)
   }
  })
}

下一场编译刷新下,能够看到结果了:

澳门葡京 2

此间可以持续调治下css,使呈现得更加美观点。

谢谢阅读,希望能扶助到大家,多谢我们对本站的帮衬!

富文本转文本实例详解,小程序转文
微信小程序-富文本转文本
近来小程序这么火,笔者也来搞搞。开掘了二个恶意的难点。小程…

微信小程序-富文本转文本

近年来小程序这么火,笔者也来搞搞。开掘了贰个恶心的标题。小程序尚未组件能帮忙富文本内容的,改接口又不太方便,于是有了那问,没本领含量纯粹记录

微信小程序调用PHP后台接口,解析纯html文本,效果图片预览 

近来小程序这么火,小编也来搞搞。发掘了一个黑心的主题素材。小程序尚未组件能支撑富文本内容的,改接口又不太适宜,于是有了那问,没工夫含量纯粹记录

*.wxml内代码。content是富文本内容

澳门葡京 3

【澳门葡京】微信小程序,微信小程序调用PHP后台接口。先是大家看眼未有被格式的富文本展现:

 <view> <text>{{content}}</text> </view> 

 1、微信js动态传参:

*.wxml内代码。content是富文本内容

呈现结果:

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) { },
   }),
 <view>
   <text>{{content}}</text>
  </view>

澳门葡京 4小程序不可能深入分析html

内部,options.id是由前一个wxml页面动态传过来的参数。

来得结果:

由以上海教室片观察,小程序相当的小概分析html文件

2、wxParse插件使用:

澳门葡京 5

上边直接上代码了,首要作用就是利用js的replace
对富文德宏药录行管理,大家能够看一下。一齐优化,方便对富文本越来越好的拍卖。

github地址: ,版本0.2
釜底抽薪问题:微信小程序富文本html、md分析组件

由以上海教室片来看,小程序不只怕剖析html文件

convertHtmlToText: function convertHtmlToText(inputText) { var returnText = "" + inputText; returnText = returnText.replace(/<\/div>/ig, '\r\n'); returnText = returnText.replace(/<\/li>/ig, '\r\n'); returnText = returnText.replace(/<li>/ig, ' * '); returnText = returnText.replace(/<\/ul>/ig, '\r\n'); //-- remove BR tags and replace them with line break returnText = returnText.replace(/<br\s*[\/]?>/gi, "\r\n"); //-- remove P and A tags but preserve what's inside of them returnText=returnText.replace(/<p.*?>/gi, "\r\n"); returnText=returnText.replace(/<a.*href="".*><\/a>/gi, " $2 ; //-- remove all inside SCRIPT and STYLE tags returnText=returnText.replace(/<script.*>[\w\W]{1,}[\w\W]{1,}<\/script>/gi, ""); returnText=returnText.replace(/<style.*>[\w\W]{1,}[\w\W]{1,}<\/style>/gi, ""); //-- remove all else returnText=returnText.replace(/<*?>/g, ""); //-- get rid of more than 2 multiple line breaks: returnText=returnText.replace(/(?:(?:\r\n|\r|\n)\s*){2,}/gim, "\r\n\r\n"); //-- get rid of more than 2 spaces: returnText = returnText.replace/g,''); //-- get rid of html-encoded characters: returnText=returnText.replace(/ /gi," "); returnText=returnText.replace(/&/gi,"&"); returnText=returnText.replace(/"/gi,'"'); returnText=returnText.replace(/</gi,'<'); returnText=returnText.replace(/>/gi,'>'); return returnText;}

1)复制wxParse文件夹到pages同目录
2)在wxml页面引进模板代码:

咱俩供给管理html富文本内容,让其出示雅观点

将上面代码放入任性适合的小程序js文件中,然后在急需处理数据的js文件里,引进文件,下边给出归入app.js文件中的调用示例:

<import src="../../wxParse/wxParse.wxml"/>
<!--这里可以添加其他的任何wxml代码-->

上边直接上代码了,首要职能正是采纳js的replace
对富文神农业成本草经行管理,大家能够看一下。一齐优化,方便对富文本更加好的拍卖。

var app = getApp()//获取app小程序实例 onLoad: function  { wx.request({ url: 'http://example.com/api' + options.id+'.json', headers: { 'Content-Type': 'application/json' }, success: function  { res.data.content = app.convertHtmlToText(res.data.content ) that.setData({ art: res.data.content }) console.log } })}

富文本html框内容:<template is=”wxParse”
data=”{{wxParseData:article.nodes}}”/>

convertHtmlToText: function convertHtmlToText(inputText) {
  var returnText = "" + inputText;
  returnText = returnText.replace(/<\/div>/ig, '\r\n');
  returnText = returnText.replace(/<\/li>/ig, '\r\n');
  returnText = returnText.replace(/<li>/ig, ' * ');
  returnText = returnText.replace(/<\/ul>/ig, '\r\n');
  //-- remove BR tags and replace them with line break
  returnText = returnText.replace(/<br\s*[\/]?>/gi, "\r\n");

  //-- remove P and A tags but preserve what's inside of them
  returnText=returnText.replace(/<p.*?>/gi, "\r\n");
  returnText=returnText.replace(/<a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 ($1)");

  //-- remove all inside SCRIPT and STYLE tags
  returnText=returnText.replace(/<script.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/script>/gi, "");
  returnText=returnText.replace(/<style.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/style>/gi, "");
  //-- remove all else
  returnText=returnText.replace(/<(?:.|\s)*?>/g, "");

  //-- get rid of more than 2 multiple line breaks:
  returnText=returnText.replace(/(?:(?:\r\n|\r|\n)\s*){2,}/gim, "\r\n\r\n");

  //-- get rid of more than 2 spaces:
  returnText = returnText.replace(/ +(?= )/g,'');

  //-- get rid of html-encoded characters:
  returnText=returnText.replace(/ /gi," ");
  returnText=returnText.replace(/&/gi,"&");
  returnText=returnText.replace(/"/gi,'"');
  returnText=returnText.replace(/</gi,'<');
  returnText=returnText.replace(/>/gi,'>');

  return returnText;
}

接下来编写翻译刷新下,能够看出结果了:

3)在js的page({})里面引入试行文书

澳门葡京,将地点代码放入跋扈适合的小程序js文件中,
然后在必要管理多少的js文件里,引进文件,上边给出放入app.js文件中的调用示

澳门葡京 6结果

// 引入wxParse.js解析文件
var WxParse = require('../../wxParse/wxParse.js');
page({...})

例:

此处能够继续调解下css,使展现得更加雅观点。

4)在js文件之中分析获取的纯html字符串,注意:这里不可不得是字符串(如:'<div>2112</div>’),假若有’\’将要去掉。
示范代码:

var app = getApp()//获取app小程序实例
 onLoad: function (options) {
    wx.request({
   url: 'http://example.com/api' + options.id+'.json',
   headers: {
    'Content-Type': 'application/json'
   },
   success: function (res) {
    res.data.content = app.convertHtmlToText(res.data.content )
     that.setData({
      art: res.data.content
     })
     console.log(res.data)
   }
  })
}

设若有更加好的点子还请留言

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后台接口(本接口仅做示范,未做安全和过滤校验):

澳门葡京 7

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

那边能够延续调度下css,使展现得更加赏心悦目点。

以上便是本文的全体内容,希望对我们的读书抱有支持,也目的在于大家多多帮助脚本之家。

多谢阅读,希望能帮忙到大家,感谢我们对本站的支撑!

您大概感兴趣的小说:

  • 微信小程序
    PHP后端form表单提交实例详解
  • 微信小程序图片采用、上传到服务器、预览(PHP)实现实例
  • PHP:微信小程序
    微信支付服务端集成实例详解及源码下载
  • 微信小程序
    音讯推送php服务器验证实例详解
  • 微信小程序
    支付作用完结PHP实例详解
  • 微信小程序
    自动登入PHP源码实例(源码下载)
  • 微信小程序
    PHP生成带参数二维码
  • 微信小程序与php
    实现微信支付的简约实例
  • Thinkphp5微信小程序取得客户消息接口的实例详解
  • PHP后台完成微信小程序登入

您恐怕感兴趣的小说:

  • 微信小程序 for 循环详解
  • 微信小程序 WXML、WXSS
    和JS介绍及详解
  • 微信小程序 参数字传送递详解
  • 微信小程序 (十七)input
    组件详细介绍
  • 微信小程序 wx:key详细介绍
  • 微信小程序
    完成列表刷新的实例详解
  • 微信小程序
    页面跳转传参详解
  • 微信小程序(九)scroll-view组件详细介绍
  • 微信小程序入门教程
  • 微信小程序 条件渲染详解
  • 微信小程序选择第三方库Immutable.js实例详解
  • 微信小程序
    (八)View组件详细介绍
  • 微信小程序 loading
    组件实例详解
  • 微信小程序
    radio单选框组件详解及实例代码

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website