个人案例
- 豆子碎片
收集了很多经典的库和代码片段,是编程开发必备工具
编程开发必备工具扫码体验
- 豆子工具
内含IP查询、图片格式转换、音频格式转换等工具
实用小工具扫码体验
- 优化小程序内的激励视频广告
加入了激励视频后,进入页面可以看到明显的卡顿,为了增加体验,我们需要做些优化。 首先,广告模板代码会让你在onLoad()函数中初始化广告代码。这里,我们需要将其封装在一个独立函数中。 [图片] 然后,我们定义一个全局变量hasLoadAd,默认为false,当调用播放按钮时,先判断该变量是否为真,当不是真时,我们调用上面封装的loadAd()函数加载广告。 经实践,发现第一次调用vAd.show()时,通常会失败,此时,可参考模板中的示例代码,进行第二次加载。代码如下: [图片] 这样有个弊端,就是第一次会初始化加载两次,并且时间有点长,为了用户体验,我们在调用前,就调用wx.showLoading()。 最后,在onUnload()函数中,将vAd =null ;这样可以避免退出再进入时卡顿。 你有好的想法和建议,欢迎留言。
05-12 - 使用小程序TCP API功能,实现调试本地TCP服务
小程序在基础库2.18.0,开始提供TCP API功能,它可以创建一个TCP SOCKET实例,并与局域网内的TCP服务,或者配置过的服务器域名进行通信。它默认限制了一些TCP端口,在使用的小程序 TCP API进行连接TCP服务时,TCP服务请不要使用这些端口。 小程序在开发工具中调试时,只能创建一个TCPSocket,但是真机调试时,可以创建多个,因此,你在使用时,请注意这些问题。我在开发时,就被这些问题困扰了一段时间。 使用小程序TCP 功能,非常简单。 1,创建TCP Socket实例,使用wx.createTCPSocket()。 var t = null; t = wx.createTCPSocket() 2,设置监听器。 t.onError(that.tErr) t.onConnect(that.tConn) t.onMessage(that.tMsg) t.onClose(that.tClose) 3,打开连接。 t.connect({ address: ip, port: port, timeout: 3, }) 4,发送数据。 t.write(that.data.sendMsg) 5,关闭连接。 t.offMessage() t.offConnect() t.offError() t.offClose() t.close() t = null; 以上,是使用TCP的一些核心代码,你可以根据你的业务需求加以完善。我的小程序实现了一个功能,使用小程序的TCP API,可以调试局域网内的TCP服务。这个功能,对于开发排查一些问题来说,非常有用。 调试界面如下: [图片] 对于一些使用设备服务,或者本地开发环境,可以作为TCP调试客户端使用。
03-25 - 使用小程序UDP API功能,实现调试本地UDP服务
小程序在基础库2.7.0,开始提供UDP API功能,它可以创建一个UDP SOCKET实例,并与局域网内的UDP服务,或者配置过的服务器域名进行通信。小程序的UDP API没有限制端口,只要你的防火墙没有拦截就行。 在开发工具中调试时,我一直未能收到服务端的回复,多次查看文档,发送需要先调用udp.bind(),然后才能收到数据。你在使用时,请注意这个问题。另外,udp.bind()不用调用多次,但是每次重新进入页面时,需要重新调用一次。 使用小程序UDP 功能,非常简单。 1,创建UDP Socket实例,使用wx.createUDPSocket()。 var u = null; u = wx.createUDPSocket() u.bind() // 只进行一次绑定 2,设置监听器。 u.onError(that.uErr) u.onListening(that.uListen) u.onMessage(that.uMsg) 3,发送数据,不需要先连接。 u.write({ address: ip, port: port, message: msg, }) 以上,是使用UDP的一些核心代码,你可以根据你的业务需求加以完善。我的小程序实现了一个功能,使用小程序的UDP API功能,可以调试局域网内的UDP服务。这个功能,对于开发排查一些问题来说,非常有用。 调试界面如下: [图片] 对于一些使用设备服务,或者本地开发环境,可以作为UDP调试客户端使用。
03-25 - 使用小程序WebSocket API功能,实现调试本地Websocket服务
小程序很早就提供了Websocket API功能,现在官方推荐的做法是使用SocketTask的方式去管理WebSocket链接,这样可以使每一条链路的生命周期更加可控。 小程序使用WebSocket功能,非常简单。 1,创建WebSocket 实例,使用wx.connectSocket。 var ws = null; ws = wx.connectSocket({ url: url, timeout: 3000, }) 2,设置监听。 ws.onError(that.wsErr) ws.onOpen(that.wsConn) ws.onMessage(that.wsMsg) ws.onClose(that.wsClose) 3,发送数据。 ws.send({ data: msg, success:()=>{ that.setData({ tips: "发送信息成功" }) } }) 4,关闭连接。 const that = this; if (!utils.isEmpty(ws)) { // console.log('ws close,', res) ws.close() ws = null; that.setData({ isConn: false, tips: "连接关闭" }) } 以上,是使用Websocket的一些核心代码,你可以根据你的业务需求加以完善。我的小程序实现了一个功能,使用小程序的Websocket API,可以调试局域网内的Websocket服务。这个功能,对于开发排查一些问题来说,非常有用。 调试界面如下: [图片] 对于一些使用设备服务,或者本地开发环境,可以作为Websocket调试客户端使用。
03-25 - 我在集成广告时的一些经验和想法
我的小程序已经集成了广告。我分享一下集成广告的一些经验。 1,开通流量主 在小程序管理后台,推广中包含流量主和广告主,选择流量主,我记得当时我的开通条件是小程序使用人数超过1000,开通之后,集成到小程序中就会有收益。广告分为激励视频、插屏、Banner、开屏等,现在又增加了智能接入广告,代码都不用写。广告的几个类型我都使用过。集成非常的简单,按照官方的文档说明即可。 2,发布审核 集成广告之后,你的每次升级小程序,除了小程序审核之外,还添加了广告审核,我印象中,广告审核只被拒绝过一次,在IOS中无法正常显示广告。所以,你集成广告之后,需要在测试环境,多测试一下,看看广告是否正常显示。 3,选用类型和摆放位置 这个可以参考官方文档,已经说的很清楚。这里需要强调的是,如果你的小程序活跃度很低,Banner,激励视频等可暂不集成。开屏广告推荐接入。在页面中,建议广告放在空白比较大的地方,或者专门设计广告区。如果你的页面内容太多,一页显示不完,建议广告放在顶部。 4,提高收益 这个不能靠刷流量,这块我感觉广告平台的防刷机制还是很厉害的。违规之后,扣除的很厉害。最简单的办法,还是提高小程序的质量,增加用户活跃和吸引新用户。 上面是我的一些经验和想法,欢迎评论!
03-12 - 使用wx.chooseMessageFileAPI在微信小程序中处理音频文件
今天介绍,在小程序中如何选择音频文件。 我们知道,小程序提供了选择本机图片、视频的API,但没有提供用于选择音频文件的API。我们可以变通下,使用wx.chooseMessageFile,这个API可以选择聊天会话中的文件,在聊天会话中,我们选择文件,可以选择本机的音频文件,我们选择后,可以发送给朋友,然后使用这个API进行选择音频文件然后再进行处理。这个API我们限制一下,只选择音频文件,所以我们让API选择的音频文件为后缀为.mp3和.m4a的文件。我们需要这样使用API,填写扩展名,并且设置文件类型,我们还可以限制待选取的文件大小,代码如下: wx.chooseMessageFile({ count: 1, type: 'file', extension: ['.m 4a', '.mp3'], success(res) { const filepath = res.tempFiles[0].path const filename = res.tempFiles[0].name const filesize = res.tempFiles[0].size if (filesize <= 2048000) { that.setData({ filepath: filepath, filename: filename, audioExist: true, }); } else { wx.showToast({ title: '文件超过2M', }) } } }) [图片] 上面的代码就选择了音频文件,并且存储了音频文件的路径和名称,这样我们就可以进一步,将音频文件上传到服务器,在服务器端,我们将音频文件进行格式转换工作,转换成功后,我们还需要将转换后的音频文件下载供用户使用。下载后的音频文件虽然无法直接报错,但是可以使用音频播放器进行播放试听。我们还需要再变通一下,我们选择另一个API,wx.shareFileMessage,虽然微信小程序不支持直接将音频文件保存到手机,但是通过这个API,我们可以将文件分享到聊天,然后通过其他方法保存到电脑,或者另存到手机。 音频格式转换功能包含在上面的小程序码中,可以扫码进行尝试。
01-29 - 在navigateTo api中怎么灵活运用变量来优化我的小程序?
有效使用变量使我的小程序减少了体积,简化了步骤,提供了效率 在我的小程序<我爱编程屋>中有一个需求,怎么去使用模板? 爱上编程屋一个包含编程语言入门教程的一个小程序。 原理说明 Java 语言入门教程有34个章节教程,我以前的做法是每个章节写一个页面,一共是34个页面(Pages)。 如果我再新增教程怎么办?想起来就头疼。 其实这34个页面结构是一样的,都是文章头、文章内容,后来经过思考,发现可以通过变量来解决。 核心代码如下: 我的章节通过数组表示,然后通过循环展示 [图片] 然后通过navigateTo 跳转到详情页 [图片] 在模板common页面中设置模板 [图片] 在模板common.js中加载传送过来的参数 [图片] 希望能对大家有帮助!最后放上我的小程序 [图片]
2019-05-13