小程序
文章平均质量分 68
光图强
这个作者很懒,什么都没留下…
展开
-
小程序进阶-inline、block和inline-block的区别与联系
每个html标签元素都有默认的元素类型,主要包括两大类:inline内联元素和block块元素。其他则称为可变元素,会根据上下文语境决定该元素为inline元素或者block元素。在css里,有一个display的属性,它规定元素应该生的框的类型,可能的值很多,除inline、block,常用的有table-cell、inline-block等,其中inline-block是css2.1里新增的值。line和block类似于1+1=2的基础概念。原创 2023-09-05 16:45:51 · 594 阅读 · 0 评论 -
小程序进阶-env(safe-area-inset-bottom)的使用
env(safe-area-inset-bottom)和env(safe-area-inset-top)是CSS中的变量,用于获取设备底部和顶部安全区域的大小。所谓的安全区域就是指在iPhone X及以上的设备中,为避免被屏幕的“刘海”和“Home Indicator”所遮挡或者覆盖的有效区域区域,以确保内容在安全区域内显示。原创 2023-09-04 10:52:24 · 4450 阅读 · 0 评论 -
小程序进阶-长(多行)文本内容展开与收起、单行文本溢出隐藏
多行文本和单行文本内容溢出隐藏,多行文本展开与收起。原创 2022-07-01 17:23:25 · 3854 阅读 · 3 评论 -
小程序进阶-图表库uchart
小程序使用uchart绘制图表原创 2022-06-08 16:39:14 · 3366 阅读 · 3 评论 -
小程序进阶-用户消息通知
简介在使用或开发小程序过程中,我们会发现消息通知是非常重要的一个环节。我把小程序消息通知分为“小程序内通知”和“微信内通知”两种。小程序内通知包含各种步骤提示、错误提示以及各种实时消息通知,这些通知只有在用户进入小程序才会看到。微信内通知则是跳出小程序的框架在微信消息列表完成消息提示。例如,我么使用某一个商品小程序下单的时候,当物流到了会通过“服务通知”提示我们“请尽快提取获取~”。下面我主要来介绍一下小程序“微信内通知”如何实现?实现步骤(一)接入微信小程序消息推送服务微信官方文档为我们介绍了三种原创 2022-03-14 15:00:34 · 10197 阅读 · 2 评论 -
小程序进阶-日历面板
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2022-02-22 11:18:02 · 1112 阅读 · 0 评论 -
小程序进阶-内容安全接口
一、应用场景检查文本是否含有违法违规内容。校验图片是否含有违法违规内容。二、安全接口access_token请求地址GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET(1)图片检测security.imgSecCheck调用方式:1.HTTPS 调用检测请求地址: POST https://api.weixin.qq原创 2021-04-05 11:29:19 · 1464 阅读 · 3 评论 -
小程序进阶-emoji表情
一、简介小程序如何发送表情,微信小程序官方文档“扩展能力”为我们提供了emoji组件,即仿微信表情组件。二、开发流程(1)npm方式构建//初始化项目,在node开发中使用npm init会生成一个pakeage.json文件,//这个文件主要是用来记录这个项目的详细信息的,它会将我们在项目开发中所要用到的包,//以及项目的详细信息等记录在这个项目中。 - npm init 或 npm init -y//安装生产环境 - npm install --production//安装vant原创 2021-04-02 17:12:50 · 3314 阅读 · 4 评论 -
小程序进阶-底部弹框动画效果
需求:点击按钮,信息展示或者信息输入。如何在当前页面弹出新的面板?(1)方式一:直接弹出一个面板。(2)方式二:添加动画效果,从界面的一侧如底部弹出。如何实现(1)弹出内容面板样式:如何显示与关闭,有两种方式wx:if和hidden(2)遮罩层,区分弹出内容与原有内容:z-index控制遮罩层、弹出层和原来信息层。(3)动画特效,例如底部弹出:动画特效原理本质上是动态修改transform属性值达到动态效果。底部平移采用translateY,即transform:tran..原创 2021-03-31 17:33:11 · 1382 阅读 · 0 评论 -
小程序进阶-用户转发
1.简介新建一个Page页,JS文件为我们自动生成了一个 onShareAppMessage函数,点击右上角三个点可以将当前页面分享给好友。官方的解释参数返回格式2. 非tab页分享非tab页一般需要接收参数刷新当前页面,所以实现非tab页面转发,我们使用button实现。那么我们如何区分默认转发和我们自定义的转发呢?我们可以检查onShareAppMessage的form参数区分。onShareAppMessage: function (res) { if (res.f原创 2021-03-31 15:31:11 · 91 阅读 · 0 评论 -
小程序进阶-如何去除或隐藏页面滚动条
前言 当小程序页面展示内容超过屏幕高度或宽度,我们想要看到全部内容,这时候就必须用到页面滚动。可是,我们发现滚动页面的滚动条特别的突兀和丑陋,而且参考大部分的小程序都是将滚动条去掉了。那么,我们该怎么去掉滚动条呢?方案一 我们知道,当展示内容超过页面高度,会触发page默认的滚动条。如下:在小程序社区,我找到了一个方案:看代码:index.wxss.intro{ width: 100vw; height: 100vh; overflow: hidden; margin:原创 2021-01-09 11:16:11 · 10586 阅读 · 0 评论 -
小程序 - ECharts,画出好看的图表
简介为了兼容小程序 Canvas,ECharts官方提供了一个小程序的组件,用这种方式可以方便地使用 ECharts。该项目是ECharts微信小程序版本,包含小程序组件和使用的示例。开发者可以通过熟悉的 ECharts 配置方式,快速开发图表,满足各种可视化需求。ec-canvas 是ECharts提供的组件,其他文件是如何使用该组件的示例。ec-canvas 目录下有一个 echarts.js,可以自行从 ECharts 项目中下载最新发布版。默认的echarts.js文件较大,可以从官网自定义原创 2020-12-12 14:34:37 · 1119 阅读 · 2 评论 -
小程序进阶-水平居中和垂直居中对齐
简介学习小程序,掌握一些前端常用的方法和逻辑很重要,平常注意总结,在需要的时候才能信手拈来。居中对齐,在页面布局中太过常见,所以能够有效的实现水平居中和垂直居中的效果尤为重要,能够实现不是目的,我们追求的是效率,一旦遇到类似的问题,能够立马找到对应的解决办法。下面我将会总结我们常用的几种居中对齐方法,与大家一起讨论。水平居中若该元素是行内元素,给其父元素设置 text-align:center,即可实现行内元素水平居中。若是块级元素, 给该元素设置 margin:0 auto即可。若子元素包含原创 2020-11-05 16:18:17 · 2475 阅读 · 0 评论 -
小程序进阶-下拉刷新和上拉加载
简介在小程序中,我们经常使用到下拉刷新和上拉加载来提升用户的体验,例如首页列表展示初始化、加载更多等。目前,有两个比较实用的方法,第一种是使用 scroll-view 组件,第二种是使用 onPullDownRefresh 和 onReachBottom整个页面的刷新。scroll-view可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。WXS(WeiXin Scri原创 2020-10-31 18:28:06 · 590 阅读 · 2 评论 -
小程序进阶-常见问题
小程序首次加载很慢?答:小程序首次加载慢,但是再次打开会快很多,是因为小程序做了缓存,再次打开相同页面或者发送相同请求时使用的缓存的数据。小程序发送第三方服务请求(相同于后台)所用的时间,明显比浏览器花费的时间更多。综合微信社区给出的解释,可以猜测是“SSL证书”的原因,我们一般喜欢使用Let’s Encrypt的免费证书,ios版本对LE的证书处理是有问题的,建议开发者更改为阿里云的免费或付费证书,实践证明是有用的。...原创 2020-10-31 15:54:06 · 1284 阅读 · 2 评论 -
小程序进阶-获取用户手机号和基本信息
简介目前该接口针对非个人开发者,且完成了认证的小程序开放(不包含海外主体)。获取微信用户绑定的手机号,需先调用wx.login接口。因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 button 组件的点击来触发。需要将 button 组件 open-type 的值设置为 getPhoneNumber,当用户点击并同意之后,可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据, 然后在第三方服务端结合 session_key 以及 a原创 2020-10-26 16:46:51 · 2714 阅读 · 3 评论 -
小程序进阶-基础入门
一、简介小程序提供了一个简单、高效的应用开发框架和丰富的组件及API,帮助开发者在微信中开发具有原生 APP 体验的服务。文档小程序开发指南小程序设计指南小程序官方文档与普通网页区别小程序的主要开发语言是 JavaScript,但与普通的网页开发有所区别。网页开发渲染线程和脚本线程是互斥的,而小程序分别运行在不同的程序。前端一些常见的库以及Nodejs的npm包无法在小程序运行。小程序运行环境特色应用触手可及快速的加载和渲染能力,配套云能力、运维能力和数据汇总能力。使得微信原创 2020-10-20 16:44:54 · 465 阅读 · 0 评论