代码片段: [https://developers.weixin.qq.com/s/KLaD5MmD7V45) GitHub: https://github.com/WozHuang/Miniprogram-Demo/tree/master/emoji-parser 本来有人提出要使用表情的时候并不需要做那么多功能,因为utf8字符集中本来就已经定义有表情了,我只要将mysql的字符集改成utf8mb4就可以实现预期的功能. 但是后来又有人嫌弃那个表情丑(我懒得告诉他是因为安卓版本低系统自带的e…

代码地址如下:http://www.demodashi.com/demo/14243.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 实现横版日历,tab栏 可控制显示时间 2.案例目录结构 二.程序实现具体步骤 1.index.wxml代码 <!--index.wxml--> <view class="conta…

1. 常见组件 重点讲解小程序中常用的布局组件 1.1 view 代替 原来的div标签 <!-- pages/index/index.wxml --> <view hover-class="h-class"> 点击我试试 </view> /* pages/index/index.wxss */ .h-class{ color: green; } 1.2 text 文本标签 只能嵌套text 长按文字可以复制 (只有该标签有这个功能) 可以对空格 回…

编写组件 基本结构 接上文:微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ① 只提供Header部分以及容器部分 ② 容器部分的HTML结构由业务层提供 ③ 容器部分对应样式由业务层提供 我们如果要在小程序中实现这类组件,意味着我们需要往小程序中动态插入WXML结构,我们这里先做个demo,试试往动态插入WXML是不是可行 this.setData({'wxml': `…

ylbtech-小程序-文章:微信小程序常见的UI框架/组件库总结 1.返回顶部 1. 想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库. 1:WeUI  小程序–使用教程 https://weui.io/ 官方介绍:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.小程序开发中最常用到的一款框架,受广大…

想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库. 1:WeUI 小程序–使用教程 https://weui.io/ 官方介绍:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.小程序开发中最常用到的一款框架,受广大开发人员的欢迎. 2:美团小程序框架mpvue Github:https://github…

2017年1月9日,张小龙在2017微信公开课Pro上发布的微信小程序正式上线.在过去的2年多的时间里,微信小程序领头,各大互联网平台也不甘落后,陆续推出自己的小程序.2018年7月4日,百度智能小程序正式上线.2018年9月12日,支付宝小程序正式上线2018年11月17日,今日头条发布节跳动小程序2018年12月5日,QQ浏览器小程序推出并宣布与微信小程序打通,微信小程序只需适配下即可移入到QQ浏览器上运行.2019年6月QQ小程序将于正式上线.2019年7月5日,360小程序公测发布会在京…

第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情页面 第7章 开始制作电影资讯页面 第8章 更多电影及电影搜索页面的实现 第9章 构建电影详情页面 第10章 Form表单类组件与Map地图组件 第11章 扩展内容ES6在小程序中的使用与微信小程序后台账号配置 第12章 0.15.152900 版本重要API.功能讲解 微信小程序入门与实战 常用组…

问题 在基于mpvue+Vant Weapp组件库实战过程中,问题越来越多.网络上所谓的"坑"总结,仅仅不过是其开发中所遭所遇之"坑"而已--估计后面的"坑"还多着呢!根据本人粗浅分析,这些"坑"与微信官方格式有密切关系.另一方面,只有"不会导致内存泄漏"的坑,广大开发人员应该还是会体谅的. 言归正传,今天在使用card组件显示价格时出现问题了.问题的最初来由是我想把官方提供的H5版本转换成小程序版本,参考…

1. 自定义组件 类似Vue或react中的自定义组件 小程序允许我们使用自定义组件的方式来构建页面 1.1 创建自定义组件 类似于页面, 一个自定义组件由json wxml wxss js 4个文件组成 可以在微信开发者工具中快速创建组件的文档结构 在文件夹内 components/myHeader, 创建组件 名为myHeader 1.1.1 声明组件 首先需要在组件的 json文件中进行自定义组件声明 myHeader.json { "component": true, } 1.…

为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持.从2018年4月30日开始,小程序与小游戏的体验版.开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败.正式版暂不受影响.开发者可使用以下方式获取或展示用户信息: UnionID 机制说明 如果开发者拥有多个移动应用.网站应用.和公众帐号(包括小程序),可通过 UnionID 来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用.网站应用和公众帐号(包括小程…

何为框架 你对微信小程序的技术框架了解多少? 对wepy 框架进行一系列的深入了解 微信小程序框架解析和探究 小程序组件化框架WePY 在性能调优上做出的探究 开发者培训班上海专场PPT分享:小程序框架深度解析 干货众多!微信小程序官方公开课:框架解析,官方小程序案例解析等等 干货:微信小程序框架全解脑图,一张图看清组件构造,学习必备! 微信小程序框架解析PPT--渠宏伟 微信小程序框架详解(直播分享) 小程序底层框架实现原理解析 微信小程序框架解析 微信小程序开发框架MINA分析 扩展微信小程…

picker组件时一个从底部弹起的可滚动的选择器(嵌入页面滚动器组件picker-view查看https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker-view.html),支持5种选择器 : 普通选择器.多列.时间.日期和省市区 , 通过mode区分 , 默认是普通选择器 (分别对应的mode值为selector,multiSelector,time,date和region) 例如 : <picker mode='selector'…

小程序这么火,一直没有做过.因为公司有个业务需要做小程序就顺带学习了一把. 1)本次是采用<微信开发者工具 Stable v1.02.1904090>进行的开发: 2)前端使用的是微信官方提供的WeUI. 小程序基础业务功能做好了,想发布一个版本试试效果,怎么发布呢? 1.小程序要在手机端使用必须要通过具有域名的后台网站作为应用接口的提供者,并且是绑定了SSL证书. 我是在阿里云的万网中购买的域名. 步骤:域名购买->域名备案->阿里云获得免费SSL证书->应用服务器安装证书…

---为了方便用户可以拨打电话和复制微信号(下面就要实现这样的两个功能) 注意:在小程序中是没办法直接的添加用户的微信的,所以就只能是复制微信号 (这种东西的话可以直接去做,也可以做成组件,做出组件的好处就是可以在其他地方也可以用的) 下面也演示了如何创建一个组件 在components下面,新建一个callPhone目录,然后在这个目录下面新建一个callPhone的component文件 然后如果要在detail详情页面中使用的话,就可以点开detail.json配置文件 "usingCom…

一.问题描述: 在小程序的项目中,封装公共的饼图组件,并在需要的页面引入使用.要求一个页面中有多个饼图,动态渲染不同的数据. 二.效果实现: 1. 查看——小程序使用Echarts的方式 2. 封装饼图公共组件 // pie.wxml <view class="containers"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }…

分享之前我们先来看看地图能力在小程序架构体现中所处的位置. 小程序架构图解 如图标黄处为地图能力所处的一个位置,举个例子,比如调用定位能力获取用户当前位置的一个流程: 首先调用 JS API wx.getLocation 接口 -> 调用地图 sdk 获取位置接口 -> 地图 sdk 成功后回调 -> JS API 成功后回调. 回归正题,了解了整体的调用流程,下面我们对具体的地图能力进行详细讲解. 小程序位置服务能力目前微信小程序下,提供了丰富的组件和 API 供开发者使用,其中原生提…

由于本人最近在开发小程序项目,期间对小程序有花点时间去研究,同时也找了网上大牛的一些案例,在这里分享部分自定义组件,部分代码是copy大牛案例的,有对小程序有兴趣的伙伴拿走,不谢! 源码下载地址:https://github.com/Jacky-MYD/WeChat-assembly.git 下面直接看组件的效果,代码我就不说了,有兴趣的可以直接下载源码研究: 1.个人认为比较完美的自定义Toast组件,效果如下: 2.抽屉层组件,类似于日期选择的功能,效果如下: 3.三级市联动组件,个人觉得官…

{ "pages": [ "pages/index/index", "pages/logs/logs", "pages/login/login" ], "window": { /** * 以下是页面顶部导航栏设置 **/ "navigationBarBackgroundColor": "#ffffff", // 导航栏背景颜色,默认值:#000000 "na…

前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己的业务逻辑,可以看做一个独立的page页面.简单来说,如果只是展示,使用template就足够了,如果涉及到的业务逻辑交互比较多,那就最好使用component组件了. 一. template模板: 1. 模板创建: 建议单独创建template目录,在template目录中创建管理模板文件. 由于…

[WePY小程序框架实战一]-创建项目 [WePY小程序框架实战二]-页面结构 父子组件传值 静态传值 静态传值为父组件向子组件传递常量数据,因此只能传递String字符串类型. 父组件 (parent.wpy) <view> <child name="leinov"></child> </view> 子组件(child.wpy) <template lang="wxml"> <view> {{…

前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本次主要分享下小程序自定义组件的一点思路,小程序官方提供的框架比较简陋,原始,可复用较差,没有实现自定义组件的功能,这让很多使用vue ,react前端开发非常难受.网上存在各种吐槽,也有分享实现自定义组件的方法,但是要么过于复杂,要么是微信小程序升级之后就不兼容,反正是各种坑你没商量.在这分享下本人…

类似于页面,自定义组件拥有自己的 wxml 模版和 wxss 样式. 官方链接 组件化,反过来理解,写重复的页面,方法,写第二遍就烦了,抽取出来就是组件化,可以理解为公用的方法 对于通用的数据,最先想到或者理应接触的是template,但是template有个缺点,那就是只是页面效果,不会有对应的js操作. 微信小程序组件化,为什么要有自定义组件呢每个页面有对应的js(JavaScript),json(配置config),wxml(html),wxss(css)还差什么不挺好的嘛,为什么需要自定…

转自:https://www.cnblogs.com/likun123/p/9543376.html 小程序解析html标签,就需要用到wxParse啦.但是在解析连续图片的时候,会发现图片之间会有间隔,这是因为微信小程序本身的img标签自带间隔 解决:在wxss中设置  .wxParse-img{   display: flex; }…

前言: 与微信小程序不同,支付宝小程序的富文本组件并不能直接支持html代码,如: 如上,支付宝小程序的富文本组件只支持数组类型,html代码需要使用 mini-html-parser 转换,具体用法后文详细说明. mini-html-parser2: 1. 插件安装: 小程序开发者工具左侧文件列表界面空白处单击右键——在终端中打开: 2.输入以下代码安装插件: npm install mini-html-parser2 --save 安装完成后文件列表中就多了node_modules目录了:…

微信小程序没找到构建npm或者没找到node_modules目录解决方法如下: 按照微信小程序提供的文档npm install是不行的,直接提示没找到可构建的npm包. 1.直接安装:npm init就可以啦 2.接着npm install你的引入包命令(比如npm i vant-weapp -S --production),然后点击微信开发工具中的工具栏目下的构建npm,就会出现 例子:比如引入vant weapp: 直接 npm i vant-weapp -S --production 可以…

微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/master/custom-tabbar 首先创建一个底部导航栏组件,名为:navBar <view class='tabbar'> <view wx:if='{{_auth >= item.auth}}' class='tabbar-item' wx:for='{{tabbarList}…

最近做微信小程序时,用到小程序的原生组件camera时,踩到一个bug. 在给camera设置样式position:absolute;绝对定位后,IOS调用camera原生组件拍照后退不出来. 不使用绝对定位即可.…

最新有个微信小程序的开发需求,需要从网页中提取一些元素信息,获取有效数据 1. 了解到微信小程序里面不能直接操作dom元素,所以我们需要使用一些其他的npm包 2. 经过查到各方面的文档,最新决定用xpath来实现对应功能 a. 先安装对应的npm包,安装步骤见上一篇文章 小程序使用npm包 b. 我们安装了如下的npm包, https://github.com/yaronn/xpath.js c. 安装完后后,我们用测试代码验证 var select = require('xpath.js')…

一.前言 最近公司要做一个酒店入住的小程序,不可避免的一定会使用到日历,而小程序没有内置的日历组件.在网上看了一下也没有非常适合需求的日历,于是自己写了一个. 二.代码 1. 原理分析 写一个日历只需要知道两件事情: 一个月有多少天: 每个月的第一天是星期几. 2. 功能分析 由于是酒店入住的日历,所以需要实现如下功能: 渲染日历,一般是从本月开始,到半年之后的日历 过去的日期不可选 实现点击获取入住日期.退房日期,以及改变相应日期的颜色和整个时间段的颜色 3. 数据分析 根据最后的功能实现,我…