微信小程序PHP文件建在哪里,微信小程序解析H5文件方法_Pellegrini的博客-程序员宝宝

技术标签: 微信小程序PHP文件建在哪里  

经常有网友问怎么让微信小程序解析H5文件或者类似封装H5网页到APP里面?我一开始觉得这是不可能的,因为官方的解答是这样的:

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。

上面的意思就已经很清楚了。翻译过来就是:

.js就是javascript

.wxss相当于css

.wxml相当于html

然而,wxml与wxss的语法是微信自己定义,不同于html与css语法。既然语法都不一样,微信小程序自然无法加载H5页面。微信只能加载在工程内已经注册的page页面,无法打开外部链接,只能从服务器抓取数据

前段时间,由于微信的编写文件不再是html格式,所以也无法解析 html代码,这个着实令人难过. 我在用网上的API接口获取数据时, 遇到了一个大坑, 那就是 API返回的数据竟然是 含有标签的字符串, 让我无从下手, 在尝试过正则失败后, 不断在网上看有没有可以解析的插件, 终于让我找到了, 那就是wxParse-微信小程序富文本解析组件, 它支持Html及markdown转wxml可视化, 下面不多说, 代码贡献上:

API返回的数据:

c777241edc3a96f30e3a1f3ca88f359a.png

注意:

message 对应的 value 值 为

[AppleScript]"

材料


\n

雪梨一个、冰糖适量、牙签几根

做法


\n

1、雪梨洗好,用刀切去尾部,用勺子挖出梨核,最好挖干净,不然影响口感。

\n

2、放几颗冰糖进去,插几根牙签,隔水蒸30分钟左右就OK了。

",

"name": "冰糖雪梨"

这个小程序是无法解析的, 所以, 重点来了.

wxParse-微信小程序富文本解析组件, 通过这个组件, 小程序就可以解析部分的 html文件 还包括 表情包哦, 下面是大礼包, 我将演示如何使用:下载官方demo

Copy文件夹wxParse,与 pages文件目录同级//wxParse目录

- wxParse/

-wxParse.js(必须存在)

-html2json.js(必须存在)

-htmlparser.js(必须存在)

-showdown.js(必须存在)

-wxDiscode.js(必须存在)

-wxParse.wxml(必须存在)

-wxParse.wxss(必须存在)

-emojis(可选)

3.引入必要文件

3.1 在目标 wxml文件中添加以下代码

3.2 在 wxss文件 中添加以下代码(可以是全局wxss,也可以是目标的 wxss文件)@import "/wxParse/wxParse.wxss";

3.3 数据绑定(在目标的 js文件中添加)//在 onLoad 函数里添加哦,

var article = '

我是HTML代码

';

/**

* WxParse.wxParse(bindName , type, data, target,imagePadding)

* 1.bindName绑定的数据名(必填)

* 2.type可以为html或者md(必填)

* 3.data为传入的具体数据(必填)

* 4.target为Page对象,一般为this(必填)

* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)

*/

var that = this;

WxParse.wxParse('article', 'html', article, that,5);

4.你已成功,不信你看模拟器

fedc6d4f43c8718c8d1cf72403a37aa1.png

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42496673/article/details/115594303

智能推荐

学习笔记(1):Linux操作系统及常用基础命令深入讲解-知识回顾及shell的类型_sdiiit的博客-程序员宝宝

本课程为全新马哥linux全套系列课程之一--Linux基础入门和架构了解,从Linux起源,Linux架构和Linux形成历史开始逐步讲解,让你彻彻底底了解Linux的诞生,之后介绍了Linux相关文化和核心组成结构,以及Linux常用命令和基本用法,课程由浅入深,讲授方法受到98%学员一致好评!...

golang调度器底层实现( G、M、P)_wilson_go的博客-程序员宝宝_golang p

go的调度器只要实现在 runtime 包中,路径为: ./src/runtime/proc.go 文件中。go语言其实是在操作系统提供的内核线程之上搭建了一个特有得 【两级线程】模型。下面再说两级线程模型前,有三个必知的核心元素。(G、M、P)G:Goroutine的缩写,一个G代表了对一段需要被执行的Go语言代码的封装M:Machine的缩写,一个M代表了一个内核线程P:Process...

STL知识准备: 1. C++关键字typename_myan的博客-程序员宝宝

/******************************************************************************* *  SGI*STL是STL之父Alexander Stepanov和STL巨匠Matt Austern等人的作品, 是当今  * *  最富盛名、最出色的STL实现版本,全部源代码和说明文档可从www.sgi.com/STL/下  * 

Web安全-一句话木马_Tr0e的博客-程序员宝宝_一句话木马

概述在很多的渗透过程中,渗透人员会上传一句话木马(简称Webshell)到目前web服务目录继而提权获取系统权限,不论asp、php、jsp、aspx都是如此,那么一句话木马到底是什么呢?先来看看最简单的一句话木马: <?php @eval($_POST['attack']) ?>【基本原理】利用文件上传漏洞,往目标网站中上传一句话木马,然后你就

2021阿里+头条+腾讯等大厂Java笔试题分享_普通网友的博客-程序员宝宝

说明Java生鲜电商平台中由于采用了微服务架构进行业务的处理,买家,卖家,配送,销售,供应商等进行服务化,但是不可避免存在分布式事务的问题。业界有很多的解决方案,对此我相信大家都百度一下子就有很多,但是我巨人大哥想说的是:微服务架构中应当尽量避免分布式事务。下面就是来讨论下,分布式事务中主要聚焦于强一致性和最终一致性的解决方案。内容介绍这是一本程序员面试宝典!书中对IT名企代码面试各类题目的最优解进行了总结,并提供了相关代码实现。针对当前程序员面试缺乏权威题目汇总这一痛点,本书选取将近200道真

WordPress背景特效,给知更鸟主题添加随鼠标变幻的动态线条_小任博客的博客-程序员宝宝

今天一个群里的朋友看到我的背景问我怎么做的,我就把这个做法分享给大家,就是一个js特效。应该全主题的操作方式是差不多的,我这里以知更鸟为例子。 下载js这是一个基于canvas绘制的网页背景效果。(下载地址在文末原地址)引用js文件下载完后解压压缩包,将canvas-nest.min.js文件,放到主题begin\js目录中,然后找到页脚footer.php文件里的...

随便推点

__attribute__ ((aligned (n), packed))_mrwangwang的博客-程序员宝宝

下记转载:http://chentravel.blogspot.com/2007/11/attribute.htmlGNU C扩展的__attribute__ 机制被用来设置函数、变量、类型的属性,其用得较多的是处理字节对齐的问题。__attribute__ 的语法为:__attribute__ ((语法列表))参数aligned(number) [number为最小对齐的字节数]是用得...

知到大学计算机基础见面课答案广西师范大学,2020知到广西师范大学网课大学计算机基础见面课答案..._我只匆匆而过的博客-程序员宝宝

发布时间:2020-6-10详细信息2020知到广西师范大学网课大学计算机基础见面课查题解析参考,同时提供大学网课,选修课,外语类,财会类,建筑类,职业资格,,类,外贸类,计算机类等;是一个料下载与在线、,是各类考生顺利通过的! 金吾卫的主要工作为( )Ja语言中的布尔型boolean只有两个取值,即true和false,且不能和其他任何类我国少数民族地区都有饮茶习惯,其中酥油茶是()的饮茶习惯...

图论基本概念_大漠知秋的博客-程序员宝宝_图论的基本概念

图是用来对 的成对关系建模的数学结构,由 或 以及连接这些顶点的 组成。值得注意的是,图的顶点集合不能为空,但边的集合可以为空,通俗的讲,一张图,没有点不行,没有边可以,大不了点与点之间不相连。图可能是无向的,这意味着图中的边在连接顶点时无需区分方向。否则,称图是有向的。下面左图是一个典型的无向图结构,右图则属于有向图,无向图也可以看成是一种特殊的有向图。连接顶点与顶点的边是否有数值与之对应,有的话就是有权图,否则就是无权图。在一个无向图 G 中,若从顶点 i 到顶点 j 有路径相连(当然从 j 到

STM32自学笔记(三)外部中断_pmj110119的博客-程序员宝宝

stm32每个IO口都可以作为外部中断输入口。F103支持共19个外部中断/事件请求。每个中断设有状态位,有独立的触发和屏蔽装置。STM32F103的19个外部中断为:线0~15:对应IO口的输入中断线16:连接到PVD输出线17:连接到RTC时钟事件线18:连接到USB唤醒事件中断线与GPIO的映射GPIO 的管脚 GPIOx.0~GPIOx.15(x=A,B,C,D,E...

ionic2/3环境变量,真机调试_weixin_33860722的博客-程序员宝宝

2019独角兽企业重金招聘Python工程师标准>>> ...

how2heap-first_fit_一点.的博客-程序员宝宝

标题1.first_fit (unsorted bin)first-fit是一个glibc堆管理策略,当程序在分配内存时,malloc会现在first bin或者unsorted bin中查找适合的chunk,如果有适合的chunk,就会直接分配给程序使用,如果没有找到合适的chunk,就会把unsorted bin中的所有chunk放到所属的bins链中去,然后再从这些bins中查找合适的chunk分配给程序,下面是网上基于64位的程序来做的一个展示,代码如下:#include <stdio.

推荐文章

热门文章

相关标签