致谢 https://www.jianshu.com/p/9458083214cc 效果图   代码 js部分 // pages/volunteer/active/info/activeInfo.js const app = getApp(); Page({   /**    * 页面的初始数据    */   data: {     active:{},//活动详情     val:false   },   /**    * 生命周期函数--监听页面加载    */   onLoad: fun…

最近小程序蛮火的,公司要做于是学了一点点小程序 不知道你们有没有遇到过这种问题: 从公司服务器获取的文章内容是有HTML标签格式的一段内容,但是微信是不支持这些标签的,怎么办呢? 1.一般网站后台的文章是这样的,带有很多的html标签(这里是截取的今日头条某文章内容),但是小程序并不支持,它会以文本直接显示 怎么办呢? 2.在这个时候可以考虑 wxParse wxParse信息 版本号0.1 历史版本号0.2 具体代码请查看仓库分支V1 github地址: https://github.com/…

微信小程序开发使用rich-text组件渲染html格式的代码,常常因为不能自定义css导致文本不能缩进,以及图片不能居中等问题,这里可以考虑使用js的replace方法,替换字符串,然后在渲染的同时加载行内样式. let content = `<div id="article_content273475" class="article-content-wrap"> <p><strong>宅是一种信仰.</strong>…

1.组件使用: 之前微信小程序的富文本渲染组件用的wxParse,对普通富文本确实可以,但是对于代码格式pre标签则无法使用. 下面这个html2wxml很不错,可以支持代码高亮. 详细文档:https://github.com/qwqoffice/html2wxml 2.Java版自行搭建服务 文档:https://github.com/mumengmeng/html2wxml4J 3.遇到问题:html2wxml代码块格式化在ios下字体过大问题 html2wxml富文本代码格式化在安卓下字…

一.插件准备 在github上可以直接下载该插件:https://github.com/icindy/wxParse 二.基本使用 1.将插件导入项目: 将wxParse文件夹放在项目目录下,如图: 其中: - wxParse/ -wxParse.js(必须存在) -html2json.js(必须存在) -htmlparser.js(必须存在) -showdown.js(必须存在) -wxDiscode.js(必须存在) -wxParse.wxml(必须存在) -wxParse.wxss(必须存…

这个问题我在小程序社区中提的,后来有个帮我回答了这个问题,我试了一下可以. 解决办法是过滤富文本内容,给图片标签添加一个样式,限制图片的最大宽度. replace(/\<img/gi,   '<img class="rich-img" ' ); 就可以了 rich-text   .rich-img { width: 100% ; height: auto ; }…

wxml <view class='containers'> <text class="content {{ellipsis?'ellipsis':'unellipsis'}}"> 飞房间卡了飞机而来发发色法尔范发疯安峰山粉色案发前二十阿里附近发打发打发是范德萨发放就开了房间爱离开房间爱卡房间爱疯爱疯飞房间卡了飞机而来发发色法尔范发疯安峰山粉色案发飞房间卡了飞机而来发发色法尔范发疯安峰山粉色案发 </text> <view bindtap='e…

异常描述: 如下图,输入手机号码之后,点击右侧的获取验证码,在开发工具是OK的,真机测试无反应: 页面编码跟H5差不多的,H5没出现这个问题,但是小程序就不一样了. 异常分析: 页面结构层面,为了方便样式排版,手机号码输入框跟验证码输入框是一样宽的,获取验证码的层以绝对定位的方式固定在手机号码输入框的右边,如下: 对于H5来说,这个并没有什么影响,但是小程序中,这种排版,就不行了. 光标一旦进入文本框,在没有收起输入键盘或者点击文本框外其他地方的时候,文本框的聚焦状态是不会改变的. 也就是说上边…

感谢GitHub https://github.com/icindy/wxParse/wiki/wxParse%E5%A4%9A%E6%95%B0%E6%8D%AE%E5%BE%AA%E7%8E%AF%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95 介绍 介绍如何使用wxParse在回复等多条HTML共同渲染的方法 方法介绍 /** * WxParse.wxParseTemArray(temArrayName,bindNameReg,total,that) * 1.tem…

<div class="weui-panel__bd pad-all fs13 " > <rich-text nodes="{{detail.content}}"></rich-text> </div>…

废话不多说,直接上方法: 首先 npm 安装 mpvue-wxparse npm i mpvue-wxparse 接下来:使用 <template> <div> <wxParse :content="article" @preview="preview" @navigate="navigate" /> </div> </template> <script> import wx…

---效果图片预览---    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, …

最近做了一个微信小程序开源项目库汇总,里面集合了OpenDigg 上的优质的微信小程序开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wemark ★85 - 微信小程序Markdown渲染库 WeZRender ★36 - 微信小程序Canvas增强…

UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wemark ★85 - 微信小程序Markdown渲染库 WeZRender ★36 - 微信小程序Canvas增强组件 wetoast ★21 - 仿照微信小程序提供的showToast功能 wxapp-charts ★20 - 微信小程序图表charts组件 WeiXinProject ★18 - 列…

作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/8079095.html 内容持续更新,维护中 邮箱:moyi@moyibolg.com 日期:2017-12-15 UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wemark ★85 - 微信小程序Mar…

近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GET! 优质微信小程序 - 环球小镇 移动端商城客户端 掘金微信小程序:收藏集.排名简单示例 微信小程序-像素鸟游戏 微信小程序-百度音乐播放器 场地派微信小程序demo 微信精品小程序-仿找事吧app附近三公里 一个精品微信小程序-petty妈咪 微信小程序todolist 4个页面 一个音乐播放器…

awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. (链接:https://github.com/opendigg/awesome-github-wechat-weapp) 内容 UI组件 开发框架 实用库 开发工具 服务端 其他 Demo UI组件 weui-wxss ★804 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★116 - 针对微信小程序整…

UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wemark ★85 - 微信小程序Markdown渲染库 WeZRender ★36 - 微信小程序Canvas增强组件 wetoast ★21 - 仿照微信小程序提供的showToast功能 wxapp-charts ★20 - 微信小程序图表charts组件 WeiXinProject ★18 - 列…

UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wemark ★85 - 微信小程序Markdown渲染库 WeZRender ★36 - 微信小程序Canvas增强组件 wetoast ★21 - 仿照微信小程序提供的showToast功能 wxapp-charts ★20 - 微信小程序图表charts组件 WeiXinProject ★18 - 列…

这个周末对WordPress版微信小程序进行了小版本的升级,第一个版本做得比较粗糙,性能上也有些差.本次升级主要调整和优化功能包括: 1.在主页面,加入浮动按钮,用来打开侧滑导航菜单. 2.增加侧滑导航菜单,菜单上包括页面及文章分类. 移除上一版本有关“页面”导航,原来把“页面”的导航放在顶端的设计不够美观,此次改版把“页面”和“文章分类”加入到侧滑菜单里实现,在每个分类旁边显示分类里文章的数目. 侧滑菜单采用遮罩层,下层页面会被遮住变暗.浮动按钮及侧滑菜单的代码参考WechatSmallApp…

简介 移动开发者想学习微信小程序需要学习一点HTML ,CSS和JS才能够比较快速的上手,参考自己学习Android学习过程,阅读源码是一个很好的方式,所以才收集了一些WeApp的开源项目. awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. 内容 UI组件 开发框架 实用库 开发工具 服务端 其他 Demo UI组件 weui-wxss ★804 - 同微信原…

wxParse是一个微信小程序富文本解析组件.现在小程序里面自带了一个<rich-text>组件也能解析富文本,但是表现不尽人意.所以我还是采用的wxParse来解析富文本的. wxParse git地址:https://github.com/icindy/wxParse.可以先稍作了解.下面具体讲一下我实现的步骤: 1.下载 wxParse,解压,将 wxParse 放入小程序中. 如下图: 2.在 你需要引用这个插件的 wxml 文件中引用  wxParse.wxml //路径根据你实际情…

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教…

开发文档 官方开发文档 开发IDE 官方工具下载 UI组件 WeUI:是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,新手建议使用: ZanUI-WeApp:是有赞移动 Web UI 规范 ZanUI 的小程序现实版本,结合了微信的视觉规范 MinUI:是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架,各种小程序组件主流框架等 富文本解析组件 wxParse:微信小程序富文本解析自定义组件,支持HT…

| UI组件 | | | | | | | | | weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库 | | | | | | zanui-weapp ★794 - 好用易扩展的小程序 UI 库 | | | | | | wx-charts ★449 - 微信小程序图表工具 | | | | | | Wa-UI ★164 - 针对微信小程序整合的一套UI库 | | | | | | wux ★163 - 微信小程序自定义组件 | | | | | | wemark ★161 - 微信小…

微信小程序相关的文档.教程.开源项目等资源的整理,以便于开发学习使用. —— —— 收录仅作个人学习使用,涉及侵权行为及时联系: maple_6392@163.com 项目地址:GitHub | 码云 | Coding 开发文档 开发文档 微信公众平台 · 小程序文档 微信公众平台 | 小程序 小程序介绍 小程序设计 小程序开发 - 简易教程· 小程序 小程序运营 简易教程· 小程序(非官方) | 项目地址 微信小程序设计指南 微信小程序平台运营规范 WeUI 微信官方设计团队为微信Web开发量…

在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个富文本转化插件wxParse,方便我们使用,前人种树后人乘凉,我们使用它来解析HTML就很方便了,这对于我们在后端已经完成的一些HTML内容,展示在小程序里就非常不错. 这个插件的Github地址如下:wxParse-微信小程序富文本解析组件,官方称它支持支持HTML及markdown解析,我这里主…

微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder="{{geren.nickname}}" value='{{geren.nickname}}' bindinput="nickname" maxlength='15' auto-height/> // 获取昵称 nickname: function(e) { this.set…

小程序本身并不太支持html代码,比如html的img.span.p这个时候改这么办呢?需要用到一个小插件WxParse来实现. 小程序高级交流群:336925436  微信小程序支持富文本编辑器代码 一:下载:https://github.com/icindy/wxParse 二:将wxParse文件夹粘贴到项目 三:引入文件 index.js文件中引入 var WxParse = require('../wxParse/wxParse.js'); onLoad: function (e) {…

代码源自于:微信小程序示例官方 index.wxml <block wx:for-items="{{list}}" wx:key="{{item.id}}"> <view class="kind-list-item"> <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show…