小程序

栏目介绍如何自定义小程序icon组件图标。 一个问题 微信小程序中的 icon 组件只有 9 种类型 success、success_no_circle、info、warn、waiting、cancel、download、search、clear。具体可以参考 icon 组件官方文档。 一个想法 我们往往希望不受上述 9 种图标的限制，拓展 icon 组件的图标。这就涉及到如何自定义图标的问题。自定义图标有多种方法，比如使用图片、精灵图、CSS 样式绘制、SVG 矢量文件等方法。本文着重介绍如何使用矢量字体自定义小程序的 icon 组件图标。 一个概念 什么是矢量字体？ 字体包括点阵字体和矢量字体。矢量字体目前用的比较广泛，分为三类：Adobe 的 Type1、Apple 和 Microsoft 主导的…

相关学习推荐：微信小程序教程 前言 前段时间我的小伙伴已经将网易云音乐小程序的音乐播放功能详细的介绍出来了，作为前端小白学习了一段时间，最近也比较忙，没有及时将实时搜索这块内容及时写出来跟大家分享（其实代码和功能之前就写的差不多了），那么今天就给大家讲一讲个人在里面的一些细节和优化吧。 搜索功能很常见，很多地方都能用到，希望能够给大家分享到有用的东西，同时，有不足的地方，也希望各位大佬指出，给出一些修改的意见，小白在此感谢了！ 实时搜索功能里面我们也需要用到API接口，从input框输入值到搜索建议，再到搜索结果，最后到跳转歌曲播放，不再只是接那么简单，传值很关键，同时不同功能下不同容器框的隐藏与显示，还有一些搜索当中涉及的细节内容和优化。让我们一起来看看吧！ 界面预览 界面分析 头部搜索栏中：左边返回箭头，中间输入框，右边歌手排行榜页面跳转;至于清除按钮呢我们隐藏了起来，只有在输入输入值之后才会出现。 往下时历史记录，像每个搜搜的记录值这里都是一小块一小块等隔距离分布，搜索值有多长，这小块就有多长，这里用到的是display: flex;flex-wrap: wrap;，对这个界面样式感兴趣的小伙伴可以待会看看全部代码。 接下来是热搜榜，这里没有太多讲究，就是发起接口请求数据，把数据埋进去显示出来就行了。 搜索建议会在输入结束后才会出现，并且是很立体的一块覆盖在整个页面上，用box-shadow: 1px 1px 5px #888888达到立体效果，z-index起到覆盖的效果。 搜索结果会在点击搜索建议中的某一条或者点击搜索历史或者热搜才出现，同时界面上其他所有的容器快都会隐藏起来，这里其实就是一个容器框的隐藏与出现的小细节了，待会在功能中我们会详细讲到。这里我们先讲一下组件(容器)如何进行隐藏与显示，以免下面的功能中看到这几项内容蒙圈 几个容器的头部展示 <!-- 点击×可以清空正在输入 --> <image class="{{showClean ? 'header_view_hide' : 'clean-pic'}}"…

测试手机为IPHONE6,开发者工具版本0.10.102800 微信小程序里的canvas 非 h5 canvas有很多不一样的地方，以下把微信小程序的canvas叫做wxcanvas 下面全是我一点点测试出的干货，耐心看： 1.wxcanvas,不像h5canvas那样有width和height属性和width和height的style样式。他只有style样式，可以理解为他就是个框吧； 2.wxcanvas不要当成真的H5canvas，就当它是个p就行，画出范围的东西也是存在的，改变width,height就显示出来了，或者说这里有重绘，但具体如何实现的不知道； 3.改变wxcanvas的style的width,height，并不改为原画布上的东西的大小； 4.css transform变换中的变大缩小也无法改变原画布上的东西大小 5.官方说法：context只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟 不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个 。 实际上，context.getActions()后，context中的信息会被清空，如果想重复利用，需要var temp=context.getActions()将操作数组保存下来，才可重复用于wx.drawcanvas； 6.注意 wx.drawCanvas({ 　　canvasId: 'target', 　　actions: context.getActions() }); 登录后复制 默认会清空画布，想不清空需要 wx.drawCanvas({     canvasId: 'target',     actions: context.getActions(),     reserve:true });…

小程序如何设置类目？ 登录小程序公众平台，在基本设置中找到服务类目，点击详情即可添加。 建议添加类目“工具-信息查询”，以提高审核通过率 相关推荐： 以上就是小程序如何设置类目的详细内容，更多请关注米云其它相关文章！

本文介绍了如何建立一个基于node.js的websocket服务器，并在小程序中使用这个提供实时服务的服务器，希望对学习小程序开发的朋友有帮助。 微信小程序如何建立服务器通信 node.js中已经有很多现成的第三方库，用于构建WebSocket服务。我们今天选用一个叫做websocket的库，来构建一个可以提供标准WebSocket接口的node.js服务端程序。先建一个空文件夹，名叫ws-server，然后进入该文件夹，在命令行执行: npm install websocket 登录后复制 然后在ws-server文件夹下，再新建一个名为app.js的文件，内容如下： 因为WebSocket服务是建立在HTTP之上的，所以我们看到，代码中建立了一个http server, 然后建立了一个使用了该http server的WebSocket server，并让http server监听8080端口对外提供服务。 这个服务端的功能也很简单，就是收到客户端发送的消息并打印出来，然后在接收到的消息前面加上一个[from server]的前缀后，返回给客户端。 推荐学习：《》 好，我们来实现调用该服务的微信小程序代码： 首先我们需要用wx.connectSocket()方法去连接目标服务器，因为我们开发环境用的是非安全的http，所以这边的url参数是ws://打头的，在以后微信的实际运行环境中，你的服务端必须使用SSL，所以连接url就会是wss://的了。 然后需要调用wx.onSocketOpen()方法来设置WebSocket连接打开时的回调函数。当连接打开后，就可以开始向服务端发送数据了，我们在这里使用wx.sendSocketMessage()方法，向服务端发送了一个后面跟随一个随机数的Hello,World字符串。我们运行一下程序，可以看到，服务端的控制台上会打印出这样的结果： 说明服务端已经成功接收到了客户端发送的字符串消息。 之后服务端会向客户端再反馈这个消息，那客户端这边如何接收这个从服务端过来的消息呢？我们可以在小程序中，使用wx.onSocketMessage()方法，监听服务端发送到客户端的消息，正如我们上面的示例代码写的那样： wx.onSocketMessage(function (msg) { console.log(msg) }) 登录后复制 我们在小程序的Console上，简单的打印了从服务端过来的消息，如下所示： 这样，一个简单但完整的客户端和服务器端的WebSocket交互就完成了。如果你想关闭这个WebSocket连接，那么你可以调用wx.closeSocket()来进行关闭。 更多微信小程序开发教程，请关注！ 以上就是小程序如何建立服务器通信的详细内容，更多请关注米云其它相关文章！

今天栏目介绍小程序登录的前端设计与实现。 一. 前言 对于登录/注册的设计如此精雕细琢的目的，当然是想让这个作为应用的基础能力，有足够的健壮性，避免出现全站性的阻塞。 同时要充分考虑如何解耦和封装，在开展新的小程序的时候，能更快的去复用能力，避免重复采坑。 登录注册这模块，就像个冰山，我们以为它就是「输入账号密码，就完成登录了」，但实际下面还有各种需要考虑的问题。 在此，跟在座的各位分享一下，最近做完一个小程序登录/注册模块之后，沉淀下来的一些设计经验和想法。 立即学习“”； 二. 业务场景 在用户浏览小程序的过程中，由业务需要，往往需要获取用户的一些基本信息，常见的有： 微信昵称 微信手机号 而不同的产品，对于用户的信息要求不尽相同，也会有不一样的授权流程。 第一种，常见于电商系统中，用户购买商品的时候，为了识别用户多平台的账号，往往用手机号去做一个联系，这时候需要用户去授权手机号。 第二种，为了让用户信息得到基本的初始化，往往需要更进一步获取用户信息：如微信昵称，unionId 等，就需要询问用户授权。 第三种，囊括第一种，第二种。 三. 概念 秉着沉淀一套通用的小程序登录方案和服务为目标，我们去分析一下业务，得出变量。 在做技术设计之前，讲点必要的废话，对一些概念进行基本调频。 2.1 关于「登录」 登录在英文中是 「login」，对应的还有 「logout」。而登录之前，你需要拥有一个账号，就要 「register」（or…

一、登陆授权 1.小程序的登录机制 传统登陆（jwt 方式为例） 用户输入用户名密码（密码需要通过某些算法进行加密），访问登录接口 后端校验用户名密码，将用户的这些信息加密成一个 token 字符串，返回给前端 前端将 token 保存下来（就本地化存储咯，这里涉及一个面试题：localstorage,sessionstorage,cookie 区别是啥？自己问问自己咯） 前端每次发请求都带着 token 发给后端，由后端去判断是否合法登录状态（token 怎么传，放在头还是体里自己和后端商量哈） 立即学习“”； 然后前端根据返回情况去判断是否执行什么操作 小程序登录授权 小程序没有登录框，就一个授权使用用户信息，那处理过程是怎么样的呢？简单讲步骤就是： 获取用户信息做授权—–>调用 wx.login 接口——>拿到返回的唯一的身份认证 code—–>连 code 带用户信息传给你的后端—–>后面就跟上面一样的了 需要注意的是 code…

这篇文章主要介绍了微信小程序animation 详解及实例代码分享的相关资料,需要的朋友可以参考下 水还是比较深的，这里只是简单介绍下小程序中动画的一些和注意事项，做动画前一定要整理好思路将动画一步步分解，再进行组合！这里只做引入。 wx.createAnimation() 看官方介绍 1.创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。 2.调用动画操作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的属性 这还是比较好理解的比如第一条对应代码animation: this.animation.export() 第二条比如缩放动画，也就说是一组scale，scaleX, scaleY…为一缩放动画组的一个动画方法，缩放动画组和旋转动画组通过step()链接，按顺序执行。代码中体验吧！看效果反过来看会更容易理解 主要属性： 这里主要树下timingFunction和transmOrigin timingFunction 设置动画效果 linear 默认为linear 动画一直较为均匀 ease 开始时缓慢中间加速到快结束时减速 ease-in 开始的时候缓慢 ease-in-out…

这篇文章利用java开发微信公众号案例代码，如何接入公众号，订阅号怎么样,具有一定的参考价值，感兴趣的小伙伴们可以参考一下 微信公众号开发一般是针对企业和组织的，个人一般只能申请订阅号，并且调用的有限，下面我们就来简单的描述下接入公众号的步骤： 1、首先你需要一个邮箱在微信公众号平台进行注册；     注册的方式有订阅号、公众号、小程序和企业号，个人我们这里只能选择订阅号 2、注册完后，我们登录到公众号平台—>开发—>基本配置,这里需要填写URL和token，URL就是我们使用服务器的接口； 3、Java Web服务器程序编译好且在服务器上部署可以运行的话，可在微信公众号进行在线接口： 立即学习“”；     1）、选择合适的接口    2）、系统会生成该接口的参数表，您可以直接在文本框内填入对应的参数值（红色星号表示该字段必填）    3）、点击检查问题，即可得到相应的调试信息    eg:获取access_token的步骤：    1）、接口类型：基础支持   2）、接口列表：获取access_token接口/token   3）、填写相应的参数：grant_type、appid、secret   4）、点击检查问题   5）、验证成功会返回结果和提示，结果为：200 ok,提示：Request successful即表示验证成功    我们这里验证比较多的是消息接口调试：文本消息、消息、语音消息、消息、etc 4、接口有不理解的地方，可进入开发–>开发者工具–>开发者文档进行 5、接口权限：订阅号主要有基础支持、接收消息及网页服务里面的一些接口 下面我们主要讲订阅号怎么样接收消息的案例： 1、需要申请一个个人微信订阅号2、url服务器和服务器端代码部署（可以用腾讯云or阿里云服务器）…

第五章已经讲了怎么处理用户发送的消息，本章就来讲讲怎么响应用户的请求。想必新手看到这个标题也就懵了，千万别懵，微信的接口就这样，在回复图片、音乐、语音等都需要将我们的媒体文件上传到微信的服务器才能使用。不知道这样的做法是出于什么考虑的，而且同是给用户回复消息，客服接口和群发接口发送的消息体格式竟然是不同的。估计是这几处接口不是同一个人写的，没有做好代码的统一，咱们屌丝开发者只能无力吐槽了。在讲上传下载接口前，需要先将下先来讲讲access_token获取方法。在微信接口开发的过程access_token是至关重要的，是公众号的全局唯一票据，公众号调用各接口时都需使用access_token。开发者需要进行妥善保存。access_token的存储至少要保留512个字符空间。access_token的有效期目前为2个小时，需定时刷新，重复获取将导致上次获取的access_token失效。需要注 1. 简介：本章就来讲讲怎么响应用户的请求。想必新手看到这个标题也就懵了，千万别懵，微信的接口就这样，在回复图片、音乐、语音等都需要将我们的媒体文件上传到微信的服务器才能使用。不知道这样的做法是出于什么考虑的，而且同是给用户回复消息，客服接口和群发接口发送的消息体格式竟然是不同的。估计是这几处接口不是同一个人写的，没有做好代码的统一，咱们屌丝开发者只能无力吐槽了 2. 简介：这篇文章主要介绍了Java开发微信公众号接收和被动回复普通消息的相关资料,需要的朋友可以参考下 3. 简介：申请了微信开发的微信测试号，已在管理测试号页面成功配置及验证。想要测试“被动回复用户消息”的接口时，在微信公众平台接口调试工具中可以正确返回消息，如下图： 微信的开发者文档上还说： 一旦遇到以下情况，… 4. 简介：相比于最常用的短信和邮件的通知方式，微信有着无可比拟的优势：快速、免费，特别适合用在报警通知类应用上。 但是微信并没有提供现成的api接口来给好友发送信息，公众平台也只能被动回复。那么如何才能主动发信息呢？答案就在微信网页版。 仔细观察微信网页 【相关问答推荐】： 以上就是有关被动回复的文章推荐的详细内容，更多请关注米云其它相关文章！