一个小程序实战开发的分享 号外！号外！烹饪无忧上线了！！扫码下图体验，如果觉得满意，帮忙点击右上角三个点，然后点击头部烹饪无忧进入小程序资料页面点赞，谢谢先！特性可以根据当前时间段推荐食谱；食谱分类能附加导航;可以离线访问详情页面；可以转发详情页面；支持深色模式；使用免费云服务（Serverless）；界面整洁，无广告烹饪无忧是我最近开发的食谱类个人小程序，麻雀虽小，五脏俱全，也自有它的价值。关键还是无广告的、免费的。What？赤裸裸的打广告？No，No，别急~~，立马上干货。首页下图是首页。导航栏默认是早餐、午餐等时间段，按常识做了推荐的，比如，用户上午11点至下午3点之间进入该小程序 ，会自动推荐午餐食谱。另外分类页选择的参数会轮换添加到导航栏最后，如果刚好是时间段参数，会直接选择该项。代码如下实现如下：let item = navs[4] // 根据时间段推荐 const hour = new Date().getHours() if (10 <= hour && hour < 15) { item = navs[1] } else if (15 <= hour && hour < 18) { item = navs[2] } else if (18 <= hour && hour < 20) { item = navs[3] } else if (6 <= hour && hour < 10) { item = navs[0] }首页分类列表主要使用scroll-view，实现了向下滚动加载数据渲染。因为数据量不太大我就没怎么优化，性能肯定没长列表扩展组件recycle-view好，感兴趣的同学可以试一试。分类、搜索列表页面公用了baselist组件，大家在做项目的时候一定要注意组件的复用以及公有方法、逻辑的封装。详情页下图是详情页。因为云服务在分类、搜索时已经返回了每个食谱的详情，因而就没有必要请求详情接口了。虽然列表加载是慢了，但请求少了，可以节约带宽。值得一提的是我还做了收藏页面，用到小程序的数据缓存，可以离线访问详情页面。实际开发中，云服务返回的数据有些不合理。比如做法步骤描述绝大部分不会出现回车换行符号，也没有数字序号，但极小数部分又有返回。前后端数据不统一想必大家开发中也遇到过吧，原则是要协商再协商，尽量不要两边都改。此处只能前端处理了，可以用正则表达式来处理。但在接口返回列表后做循环处理，还是在绑定模板时用wxs函数做过滤处理呢？显然后者处理速度更快更合理。实际上，朋友点击转发链接访问详情页面的同时也就添加了该小序，这种访问很直接，但无法获取其它页面传递的缓存数据，因此该场景下必须用接口返回的数据来渲染页面。不知道大家有没有注意到，该页面内容较多，所以更好的排版和布局尤其重要，这就要看大家的CSS功底了。至于图片，本来打算做个懒加载的，没想到云服务速度太给力了，根本就用不着呀。京东云的同学有点“不讲武德”，这里给他们点个赞！！分类页下图是分类页面。分类使用了附加导航方式，就是选项卡组件和选项卡内容容器可以双向操作。有点类似于Android的分组列表（section-list）。这个功能实现还是有点技术难度的，我使用了官方的纵向选项卡扩展组件vtabs。不过这个组件有些Bug。比如说有时点击选项卡时，当前选项会错位。微信开放社区有同学反映过这个问题，不过我要求内容之间是没有间隔连续的，设置选项内容固定高度的方法就有点牵强了，对吧？我跟了一下代码，选项卡组件的bindtabclick事件处理函数错误地触发了handleContentScroll事件处理函数。这不仅仅影响了性能，最不应该的是两个函数计算出来的当前选项index值还不一样。还有一个问题就是初始设定active-tab的值不起作用。因为不影响我的需求就没有修改了。获取云服务后台使用的京东万象 > API > 生活服务 >菜谱大全云服务，运行前需要去京东云申请一个账号。该云服务是免费的，每天1000次，有前面介绍的离线技术支持，已经够用了。当然每天2000、3000次也是有办法的，给我点赞我就私下告诉你，呵呵~~参考源码烹饪无忧业务比较简单，没有使用 WePY、mpvue等小程序框架，也没有使用UniApp、Taro等多端工具生成。这些技术没太大难度，关键看你怎么选型。话又说回来，这个项目我既是产品又是开发，还搞运维，虽然辛苦但也收获不小。想进一步了解本小程序代码的同学，可以参考我的Github repo。::(胜利)Happy coding!

微信公众平台开发入门教程 假设我们已经做好了开发前期准备并使用php脚本接入微信公众平台开发，现在我们就来说说怎样使用微信JS-SDK。

微信公众平台开发入门教程（准备） 一、什么是微信公众平台微信公众平台是腾讯为了让用户申请和管理微信公众账号而推出的一个Web平台，而微信公众账号的操作管理在这个平台下进行。所有用户都在腾讯提供的统一微信公众平台下进行相关操作：平台地址:https：//mp.weixin.qq.com。

用HTML5实现手机微信摇一摇的功能 在做活动页面的时候，经常会需要实现手机微信摇一摇功能。用h5怎样来实现呢？我们来看看摇一摇的底层事件。