分类归档

小程序

FWQ
小程序
图文详解微信小程序中调用录音功能和音频播放的方法
老规矩,先几张图. 1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可. 2.按住 录音按钮的时候会出现麦克风.中间的麦克风是个帧动画. 其实就是用js控制图片显示隐藏.没啥好说的.这里值得说一说的是录音.微信的录音API后,如果录音时间太短,会录音失败.所以fail的时候还是需要处理一下.录音时间的限制和微信语音是一样的.60秒. 3.我在录音完成后才加载列表. 下图就是从微信存储的文件里获取到的列表信息.有储存路径,创建时间,文件大小. 这里的文件可能不只是音频.这里我没做判断.下面的路径都是wx:file//store_… 我也去找了下.在Tencent/micromsg/wxafiles/wx…./这一级目录就能找到了. 时间是格式化之后的.文件大小是B,转成KB如下. 手机目录如下.但是打开之后播放不了.目前原因不明. 下面是文件全名称. 1.tempFilePath : 录音之后的临时文件.第二次进入小程序就不能正常使用了. 2.savedFilePath :持久保存的文件路径.值得注意的是微信只给100M的储存空间.还是尽早上传到后台吧. 4.播放录音音频. 点击item就能听到你的声音了.别被自己吓住.哈哈. 上代码: 1.index.wxml <!--index.wxml--> <scroll-view>         <view>                 <block>                 <view>                 <view>                 <view> …
2024-11-25 阅读全文 →
FWQ
小程序
微信小程序组件:textarea多行输入框解读和分析
textarea多行输入框组件说明: textarea 多行输入框。 textarea多行输入框示例代码运行效果如下:     下面是WXML代码: <view class="content"> placeholder: <textarea placeholder="占位符" /> <textarea placeholder="占位符 改变样式style" placeholder-style= "color:blue"/> <textarea placeholder="占位符 改变样式class" placeholder-class="placeholdText"/> </view> 登录后复制 下面是WXSS代码: .content{ border:1px black…
2024-11-25 阅读全文 →
FWQ
小程序
微信小程序wx.uploadfile 本地文件转base64的实现代码
这篇文章主要介绍了微信小程序wx.uploadfile 本地文件转base64的实现方法,文中通过代码讲解给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 微信小程序wx.uploadfile, 利用PHP接口把本地图片转化为base64位。 网上到处都是粘贴复制的wx.uploadfile的解决方案, 但目前还没有具体的代码: 特意呈现出来给需要的伙伴们: 代码: case 'imgBufferToBase64':  <span> </span>$data='';  <span> </span>file_put_contents("1.txt",var_export($_FILES,true)." ",FILE_APPEND);  <span> </span>if(!empty($_FILES['upload']['tmp_name'])){  <span>  </span>if(empty($_FILES['upload']['type'])){  <span>   </span>IO::Debug('文件类型不合法');  <span>  </span>}  <span>  </span>if(!in_array($_FILES['upload']['type'],array(  <span>   </span>'image/gif',  <span>   </span>'image/pjpeg',  <span>   </span>'image/jpeg',  <span>   </span>'image/x-png',  <span>   </span>'image/png',  <span>   </span>'image/bmp'  <span>  </span>))){  <span>   </span>IO::Debug($_FILES['upload']['type'].'文件类型不合法');  <span>  </span>}  <span>  </span>$data=file_get_contents($_FILES['upload']['tmp_name']);  <span>  </span>file_put_contents("1.txt",var_export($data,true)."…
2024-11-25 阅读全文 →
FWQ
小程序
图文详解微信公众平台发布图文消息步骤
每一个公司都会拥有自己的微信公共号,那么,在微信公共号中如何/文章呢?针对微信公众号怎么发布消息的问题,本文就为大家图文详细介绍微信公共平台发送文章的方法,有兴趣的朋友们可以了解下 小编同学的公司也有一个公众号,相信大家的公司做推广都需要的一个微信公众号,既然是需要推广那么自然是要发表文章的。下面小编就为大家介绍一下微信公众号怎么发布消息 1、通过浏览器打开微信公众平台登陆页面,输入用户名和密码,点击登陆 2、点击左侧的“管理”-“素材管理” 3、鼠标移动到页面“+”号的位置,会出现“单图文消息”和“多图文消息”的图标 4、以发布“单图文消息”为例,我们点击“单图文消息”图标,进入“单图文消息”发布页面 5、输入消息“标题”,消息“作者”,点击“”,可以上传消息封面 6、上传封面图片时候,点击“上传”,选择要当做封面的图片,然后点击“打开” 7、点击“添加”,为消息添加一段简短精炼的摘要 8、下边我们来输入正文,点击右侧的“放大编辑”,打开编辑器最大化,我们可在其中输入消息的正文内容,上传图片,上传,修改文字颜色等等。 9、内容编辑完成之后,点击“完成编辑” 10、消息编辑完成后,我们下面就要发布消息了,点击“功能”-“群发功能” 11、点击“图文消息”,选择刚才编辑好的“图文消息” 12、点击“确定” 13、点击“群发”按钮,弹出“温馨提示”对话框 14、点击“确定” 15、OK,消息群发完成,刚刚是对“单图文消息”的操作,其实“多图文消息”的发布方法与“单图文消息”的发布方法是一样的,只是在第5步的时候,选在“多图文消息”就可以,其他步骤的操作方式几乎都是一样的,这里就不多说了,大家可以自己尝试一下。 以上就是图文详解微信公众平台发布图文消息步骤的详细内容,更多请关注米云其它相关文章!
2024-11-25 阅读全文 →
FWQ
小程序
微信小程序的火车票查询的代码
这篇文章主要介绍了微信小程序 火车票查询实例讲解的相关资料,这里提供了简单实例来说明微信小程序的框架及如何开发,需要的朋友可以参考下           微信小程序 简单实例—火车票查询应用,学习掌握小程序框架,及开发步骤的实现。微信小程序体现了轻便,易用的特点,并且上手快,前端知识好学易用。 1. 相关链接 本本项目代码获取地址 Github:https://github.com/VincentWYJ/WXAppTrain.git; Blog file:http://files.cnblogs.com/files/tgyf/WXAppTrain.rar; 微信小程序开发学习资料 微信开发者平台:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=1475052055990,小程序开发工具可以在里面下载,值得高兴的是新版本已经不再需要借助安装0.7版本进行先登录,而是可以直接登录来开发与调试; Flex css layout:http://www.w3cplus.com/css3/flexbox-basics.html,像我这样的非前段开发者,对于Flex layout的使用得先花时间学习一番,不然连最基本的组件布局都比较困难,更不要说设计出美观、交互性强的界面; 小程序:http://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1474632113_xQVCl&token=&lang=zh_CN,点击提示无法打开/回到首页的话请复制粘贴到地址栏进行打开,这里面的内容可以说是和第一个链接中的内容相辅相成,边学边用吧; 2. 界面展示  结合动态图描述一下目前实现的功能: 2.1 主页上半部分显示用户头像与用户名(和微信中的信息一致,这部分组件是工具自带的,我们可以修改这部分组件和内容,稍候会提到);下半部分显示一个经典的问候语“Hello World”,提供一个可点击的按钮“点击获取火车票”; 2.2 点击按钮后,通过事先指定的参数(调用了百度APIStore中去哪网火车票查询接口,站-站查询所需参数为始发地、目的地及时间)发送网络请求,将获取到的JSON数据按火车车次为节点进行解析并在新页面显示基本信息(除了详细座位信息),为每个车次提供一个可点击的按钮“点击查看座位信息”; 2.3 点击某车次中的座位查询按钮后,会将该车次对应的所有座位信息显示在新页面中;…
2024-11-25 阅读全文 →
FWQ
小程序
JS与trick的代码
这次给大家带来JS与trick的代码,使用JS与trick的代码的有哪些,下面就是实战案例,一起来看一下。 浮点数取整 const x = 123.4545; x >> 0; // 123 ~~x; // 123 x | 0; // 123 Math.floor(x); // 123 登录后复制 注意:前三种方法只适用于32个位整数,对于负数的处理上和 Math.floor是不同的。 Math.floor(-12.53); // -13…
2024-11-25 阅读全文 →
FWQ
小程序
微信开发的扫码登录处理的步骤详解
在现今很多网站里面,都使用了微信开放平台的扫码登录认证处理,这样做相当于把身份认证交给较为权威的第三方进行认证,在应用网站里面可以不需要存储用户的密码了。本篇介绍如何基于微信开放平台的扫码进行网站的登陆处理。 1、开放平台的认证 要使用网站的扫码登录处理,就需要先进行微信开放平台帐号的开发者资质认证,提交相关的资料,以及交付每年300元的认证费用。 认证后,建立相关的网站应用后,就有相关的APPID和APPSecret了,这些关键的参数就可以用来获取相关的用户信息了。 网站应用的应用详情界面如下所示。 整个开放平台感觉没有多少东西,不过需要收费认证才能使用这些功能,感觉不是很爽。 我们采用的扫码登录,需要通过开放平台获取用户的信息,因此还需要设置获取用户基本信息接口的域名,否则无法获取信息,从而会导致重定向出错。 设置域名在【接口权限】【网页账号】【网页授权获取用户基本信息】的修改入口,如下图所示。 然后在弹出的对话框里面输入授权回调的域名即可。  这样设置就可以确保获取到用户信息了。 2、扫码登录的说明和具体使用 网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。 在进行微信OAuth2.在进行微信OAuth2.0授权登录接入之前,在微信开放平台注册开发者帐号,并拥有一个已审核通过的网站应用,并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程。 微信OAuth2.0授权登录让微信用户使用微信身份安全登录第三方应用或网站,在微信用户授权登录已接入微信OAuth2.0的第三方应用后,第三方可以获取到用户的接口调用凭证(access_token),通过access_token可以进行微信开放平台授权关系接口调用,从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。 微信OAuth2.0授权登录目前支持authorization_code模式,适用于拥有server端的应用授权。该模式整体流程为: 1. 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据code参数;2. 通过code参数加上AppID和AppSecret等,通过API换取access_token;3. 通过access_token进行接口调用,获取用户基本数据资源或帮助用户实现基本操作。 获取access_token时序图:   从上图我们可以大概了解整个扫码登陆的处理过程。 3、扫码登录的各个步骤处理 1)用户身份的绑定 为了实现二维码扫码登录,我们需要在现有系统里面绑定用户的微信,这样才能在用户扫码的时候,判断用户的身份从而实现自动登录的过程。 我们可以在用户管理里面进行统一设置,也可以在常规用户登录(用户名+密码)后进行设置,这个主要看我们是否需要保留用户名密码登陆这种方式。 例如可以在用户管理里面统一绑定,也就是在创建用户的时候,让用户绑定下微信,获取微信的唯一标识。 也可以在保留用户名密码的登陆方式外,让用户登陆系统后自行进行绑定微信即可。…
2024-11-25 阅读全文 →
FWQ
小程序
微信小程序教程之demo:猫眼电影实例
一、目录结构 采用的开发工具是Egret Wing,主要目录说明: 从目录可知整体结构简单,主要就是三个界面:首页homepage、电影详情页moviedetail、影院列表页cinema。 二、首页 tab代码,打开app.json如图: 这里我想说下,微信小程序自带对tabBar选择效果本猿还是挺喜欢的(如果在Android上还要给每个tab写个selector选择器的XML文件)由于这段没什么技术难点,所以本猿就不多说了。 接下来进入首页homepage,一个界面的文件结构离不开三个文件:xxx.js、xxx.wxml、xxx.wxss 先来看看布局代码: 在这里本猿承认当初写的时候偷了下懒,有些标签属性我直接用style写了,但真正开发时,最好把每个标签的style写在.wxss文件里,通过自定义的class名称(或者id),相同布局的地方可以直接引用同一个class就可以了,不然会像我这样有些属性重复写了几次(手动尴尬)。 .js代码往下看: 电影列表的信息本放到了定义的infos[]数组中,小程序也不存在json解析,在wx.request请求下得到的res取相应的值res.data.data.movie,直接在homepage.html标签中用wx:for=“{{infos}}”遍历,元素默认为item,取值的时候用“item.值的名称”就可以取到数据。 这里有个小地方需要说明下,当时为了解决也是花了点时间:在json数据里有个参数名称为“3d”,而且这个标签不是所有电影都有的,所以定义了threeD:true这个变量,为了能在.wxml中取到值,就可想而知的直接写成了wx:if=”{{item.3d}}”,结果就报错了: 问题就出在这个3d上,后来查资料才得知改写成wx:if=”{{item[‘3d’]}}”就立马解决啦,没什么原因,约定俗成,只是我这只前端小白不知道而已(莫见怪……手动微笑) 为了让大家更清楚了解电影列表快的布局,我画了个草图: 二、详情页 这里不贴全部代码了,只用关键代码说明下当时遇到的几个问题: ①高斯模糊 这里共有两个,一个class=“blur”(高斯模糊背景),一个class=“info”(电影信息)。刚开始是本着Android的布局设计思维去写这个布局,这不就是个RelativeLayout吗,写着写着到最后效果出来,发现本猿还是太天真,信息那一栏我莫名其妙写到高斯模糊的下面了,也就是写成了LinearLayout且orientation=vertical,当时就笑自己:你现在又不是在写Android,醒醒!孩子~主要原因是CSS3的知识不够,所以我就老老实实去学习了一番,下面便是代码: filter:blur(30px)和-webkit-filter:blur(30px)形成了高斯模糊的效果(内心OS:如果是Android的话又是一大堆代码)。info中的position:relative、z-index:1,blur中的position:absolute、z-index:0相结合就能展示出上面的效果,关键在于info中的z-index要大于blur的,表示显示在blur的上方,还要保证info是相对的,blur是绝对的,感兴趣并且没接触过CSS3的盆友可以下载代码自己去试试改改看看效果,不要像本猿我一样以为自己会反而是自作聪明。 ②点击显示全部 这里本猿又要赞扬一下三元运算符了: .js文件中在data里设置三个变量 showall方法 hideText布尔值用来判断当前是否为隐藏状态,用style=”{{hideText?’-webkit-line-clamp:3′:’ ‘}}”设置显示行数,当hideText为true是显示3行,否则不给值,即默认。定义hideClass来控制箭头的指向,‘down’表示当前简介为隐藏,‘up’表示显示了全部,对于图标旋转这里只需给个旋转属性就行 好了,本猿在详情页中花的时间比较多的就在这两处了,还是那句老话:不明白的多去查找些资料。 评论部分就是简单的列表,这里不再详细说明。…
2024-11-25 阅读全文 →
FWQ
小程序
java微信公众号开发之搭建本地测试环境方法
这篇文章主要介绍了java微信公众号开发,主要内容有测试公众号与本地测试环境搭建,需要的朋友可以参考下 俗话说,工欲善其事,必先利其器。要做微信公众号开发,两样东西不可少,那就是要有一个用来测试的公众号,还有一个用来调式代码的开发环境。 测试公众号 微信公众号有订阅号、服务号、企业号,在注册的时候看到这样的信息,只有订阅号可以个人申请,服务号和企业号要有企业资质才可以。这里所说的微信公众号开发指的是订阅号和服务号。 另外,未认证的个人订阅号有一些是没有权限的,并且目前个人订阅号已不支持微信认证,也就是说个人订阅号无法调用一些高级的权限接口,下图就是一个未认证的个人订阅号所具备权限列表,像生成二维码、网页授权、、微信支付这样的接口权限都是不具备的。 立即学习“”; 说了半天,那如果没有企业资质,又想做高级接口的开发怎么办呢。 微信公众平台提供了测试公众账号,登录地址为:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login,只需要到这个页面,点击登录,并用自己的微信客户端扫码,并授权登录,就可以获得属于自己的测试公众号。测试公众号具备几乎所有的接口,平时开发如果没有可用的公众号,就用这个测试的公众号就可以了。 本地测试环境 开发微信公众账号的一大痛苦之处就是问题,每次实现一个功能后都需要部署到一个公网服务器,虽然目前有各种免费云平台可以部署,但是调式基本只能靠日志输出了,而且没次修改->部署->查看日志,这样的操作过程非常浪费时间,时间就是生命,这样难道不是在浪费生命吗。那么,有没有办法可以本地部署,本地调试呢? 当然有,因为每次向公众号发送一条指令,公众号所在的服务器要和你的服务器进行网络交互,所以说你的服务器要保证外网可以访问到,那么只需要将你本地映射到一个外网地址即可实现微信公众号的本地调试。提供这样功能的软件不少,比如花生壳,但是要收费的。这里介绍一个免费的软件,ngrok,访问可能需要FQ。根据本地所需的版本,windows或者版,然后注册账号,成功后,会得到一个免费授权码,这个授权码在第一次启动ngrok时会用到。 以我本地为例,我下载的是windows版本的,下载并解压后,找到解压目录,双击ngrok.exe,第一次启动时,输入如下命令: ngrok -authtoken 授权码 80 之后再启动,双击ngrok.exe即可,启动后输入命令将本机映射到外网,将本地8080端口下的web服务映射到外网80端口,命令如下: ngrok http 8080 启动后的界面如下:    红色部分即为映射的外网地址,现在访问这个地址就是访问本地的8080端口。但是免费版的ngrok,生成的外网映射地址是随机的,每次重新启动都会不一样,但其实并无大碍,因为每天ngrok启动一次中途基本不会关闭,每次启动之后,到微信测试公众号管理页面,重新配置一下即可。 截止到目前为止ngrok是可用的,也就是说ngrok服务器虽然被墙了,但是微信公众号服务器是可以访问的,这样一来也就不妨碍我们做本地调式了。只是下载注册ngrok需要FQ一下。 国内也有一些ngrok服务器,但是没有试过,如果有兴趣可以自行一下。当然如果有能力,可以自己搭建一个ngrok平台,ngrok是go语言实现的。 以上就是用java开发微信公众号实现了公众号测试与本地测试环境搭建,希望对大家的学习有所帮助。 以上就是java微信公众号开发之搭建本地测试环境方法的详细内容,更多请关注米云其它相关文章!
2024-11-25 阅读全文 →
FWQ
小程序
使用progress组件实现微信小程序显示进度功能
本文主要介绍微信小程序使用progress组件实现显示进度功能,涉及progress组件相关属性设置操作技巧,希望能帮助到大家。 本文实例讲述了微信小程序使用progress组件实现显示进度功能。分享给大家供大家参考,具体如下: 1、效果展示 2、关键代码 index.wxml 复制代码 代码如下: progress组件属性说明如下: 感兴趣的朋友可以逐一尝试上述属性设置的具体用法。 相关推荐: 以上就是使用progress组件实现微信小程序显示进度功能的详细内容,更多请关注米云其它相关文章!
2024-11-25 阅读全文 →