最近刚好接手支持了每日出击运签的小程序，在小程序完成以后，整理了一下初次接手小程序的一些体验，所以有了现在这篇小总结。在小程序需求的进行期间，十分感谢泽贤，小苏，俞焕，花花的指导~ 话不多说，立马送上小程序码，大家可以扫码体验一下 [图片] 每日出击运签小程序主要划分为几个功能模块： 摇一摇 抽签并显示运签结果 保存图片 预约功能 签到功能 积分功能 评论功能 下面重点介绍一下摇一摇、抽签并显示运签结果、保存图片三个功能。 关于摇一摇功能 花叔早前已经写过文章（链接如下：http://www.ifanr.com/minapp/880378）介绍过摇一摇的实现思路了，这里简单归纳一下摇一摇功能的几个主要的思路。 准备： 需要设置一组变量，保存摇一摇x,y,z三轴的数值，需要设置一个变量来记录摇一摇的时间。 实现注意事项： 我们需要定一个阈值，作为摇一摇的判断基准。 需要通过公式来计算单位时间内运动的路程，也就是我们想要的速度。如果这个速度超过了我们定下来的阈值，那么就算作用户已经摇一摇 [代码]//计算 公式的意思是 单位时间内运动的路程，即为我们想要的速度[代码][代码]var[代码] [代码]speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;[代码] 另外我们需要注意两个小程序提供的API： wx.onAccelerometerChange(CALLBACK)：用于监听加速度数据，在发生有加速度的动作的时候，执行摇一摇的判断逻辑 wx.stopAccelerometer：在摇一摇的逻辑执行期间，需要停止监听加速度数据，避免多次触发摇一摇 为了给予用户更好的摇一摇反馈，建议在执行摇一摇以后设置振动反馈，这个小程序API里面也带有相关的接口：wx.vibrateShort(OBJECT) 关于抽签并显示运签结果的功能 每日出击运签的小程序其中有一个需求是抽签并显示运签结果。在用户每天进入小程序的时候，通过摇一摇，得到一个抽签结果，如图所示： [图片] 关于这块功能，这里需要着重介绍vine在实现小程序的过程中比较关注的两个点，一个是随机显示抽签结果，一个是用于显示签纸的动画效果。 随机显示抽签结果 这个小程序中，随机显示抽签结果的需求具体如下： 随机出现五个运签结果，大吉、吉、平、凶、大凶；不同结果对应下面不同文案；每个用户每天只能获取同一个结果。随机文案，每个用户在用完库存前不重复 这里我们可以提炼出两个关键点：一个是每个用户每天获取的结果不变，一个是，在库存用完前不重复出现文案 也就是说，我们需要把用户的抽签结果和用户id关联起来。另外我们需要准备储存抽签结果的数组，每天从数组里面取出一个值作为抽签结果，从而保证在库存用完前不重复出现文案。贴代码： [代码]// 打乱数组顺序[代码][代码]      [代码][代码]function[代码] [代码]shuffle(a) {[代码][代码]        [代码][代码]var[代码] [代码]j, x, i;[代码][代码]        [代码][代码]for[代码] [代码](i = a.length - 1; i > 0; i--) {[代码][代码]          [代码][代码]j = Math.floor(random() * (i + 1));[代码][代码]          [代码][代码]x = a[i];[代码][代码]          [代码][代码]a[i] = a[j];[代码][代码]          [代码][代码]a[j] = x;[代码][代码]        [代码][代码]}[代码][代码]      [代码][代码]}[代码] [代码]      [代码][代码]var[代码] [代码]m_w = 123456789;[代码][代码]      [代码][代码]var[代码] [代码]m_z = 987654321;[代码][代码]      [代码][代码]var[代码] [代码]mask = 0xffffffff;[代码] [代码]      [代码][代码]function[代码] [代码]seed(i) {[代码][代码]        [代码][代码]m_w = i;[代码][代码]        [代码][代码]m_z = 987654321;[代码][代码]      [代码][代码]}[代码]  [代码]      [代码][代码]function[代码] [代码]random() {[代码][代码]        [代码][代码]m_z = (36969 * (m_z & 65535) + (m_z >> 16)) & mask;[代码][代码]        [代码][代码]m_w = (18000 * (m_w & 65535) + (m_w >> 16)) & mask;[代码][代码]        [代码][代码]var[代码] [代码]result = ((m_z << 16) + m_w) & mask;[代码][代码]        [代码][代码]result /= 4294967296;[代码][代码]        [代码][代码]return[代码] [代码]result + 0.5;[代码][代码]      [代码][代码]}[代码] [代码]//获取用户id      [代码][代码]      [代码][代码]var[代码] [代码]userid = parseInt(gbConfig.user_id, 16);[代码][代码]      [代码][代码]seed(userid);[代码][代码]      [代码][代码]// 随机生成抽签描述[代码][代码]      [代码][代码]var[代码] [代码]qian = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];[代码][代码]      [代码][代码]var[代码] [代码]result = [];[代码][代码]      [代码][代码]for[代码] [代码]([代码][代码]var[代码] [代码]i = 0; i < 10; i++) {[代码][代码]        [代码][代码]shuffle(qian);[代码][代码]        [代码][代码]result = result.concat(qian);[代码][代码]      [代码][代码]}[代码] [代码]      [代码][代码]// 随机生成抽签结果[代码][代码]      [代码][代码]var[代码] [代码]luck = [1, 2, 3, 4, 5];[代码][代码]      [代码][代码]var[代码] [代码]luckarr = [];[代码][代码]      [代码][代码]for[代码] [代码]([代码][代码]var[代码] [代码]i = 0; i < 60; i++) {[代码][代码]        [代码][代码]shuffle(luck);[代码][代码]        [代码][代码]luckarr = luckarr.concat(luck);[代码][代码]      [代码][代码]}[代码]    2.签纸显示的动画效果 这次小程序，在上线前添加了签纸显示的动画效果，以加强“抽签”的用户感受。签纸以滚轴的形式向下展开，慢慢呈现出签纸的结果。 关于动画效果，最容易被使用的实现方式应该就是css3动画以及序列帧。这里尝试了三套方案，最终选择了最后一套。下面分别来介绍一下这三套方案。 第一：使用传统的序列帧方式。尝试使用传统的序列帧，通过逐帧动画，慢慢铺开签纸，逐帧动画如下： [图片] 在通过减帧以后，得到了8张序列帧图，vine发现，8张序列帧图通过拼接得到的雪碧图会非常大（达到了1M左右的大小），所以再次进行减帧得到由4张序列帧图拼接而成的雪碧图（也有500+kb左右）。但是在实际放到页面上面的时候发现，4张序列帧图帧数太少，造成了动画卡顿不流畅的情况，而且在低端安卓机上面，这组序列帧动画完全无法流畅进行。所以第一套方案放弃。 第二：把8张序列帧图分开加载，4张为一组，拼接成一张雪碧图，一共两张雪碧图，如下： [图片]    [图片] vine的处理方式是：先加载第一张雪碧图，在第一张雪碧图逐帧动画结束后，切换到第二张雪碧图，无缝连接播放第二组逐帧动画。结果在低端安卓机上面出现了同样的情况，动画播放非常卡顿，而且在图片切换的过程中出现了空白。于是第二套方案失败。 第三：在vine百思不得其解的时候，突然发现，这套序列帧有一个特点：它的签纸和卷轴并不是立体的！也就是说，这里其实可以不需要序列帧来实现签纸打开的效果，只需要最后一张图就可以了： [图片] 关于保存图片的功能 保存图片的功能是这次小程序中的一个大难点，这里非常感谢泽贤和小苏提供的建议。下面来介绍一下保存图片的功能到底是什么： [图片][图片] 通过点击分享按钮，可以生成一张和签纸类似的图片，用户可以长按保存这张图片到手机本地。从而达到转发分享的目的。 而这个保存，所需要的就是canvas。小程序API提供了canvas的接口： [图片] 通过这个接口，我们可以把当前画布指定区域的内容导出成指定大小的图片，然后再调用小程序的预览接口进行图片预览以及保存： [图片] 但是在这里，vine遇到了几个问题： 多次点击保存按钮触发canvas，导致手机滑动的时候非常卡顿 生成预览图片时间非常慢 三星note5保存图片尺寸的问题 下面来介绍一下这两个问题相应的解决措施： 多次点击保存按钮触发canvas，导致手机滑动的时候非常卡顿 canvas只在需要触发的时候渲染，在用户没有点击保存按钮的时候，默认不渲染canvas。代码如下：由于小程序和MVVM框架类似，无法直接操作dom，所以vine采取了在样式上面添加状态，通过修改showcanvas变量的值，来控制canvas的显示和隐藏。在执行画图操作的时候使变量值为false，显示canvas，在绘制完成的时候更改变量值，隐藏canvas [代码]<[代码][代码]canvas[代码] [代码]class[代码][代码]=[代码][代码]'{{showcanvas ? "hidcanvas" : "showcanvas"}}'[代码] [代码]style[代码][代码]=[代码][代码]"width: 750px; height: 1334px;position:fixed;left:100000rpx;top:-100000rpx;"[代码] [代码]canvas-id[代码][代码]=[代码][代码]"shareQRcode"[代码][代码]></[代码][代码]canvas[代码][代码]>[代码] 生成预览图片时间非常慢 生成预览图片时间非常慢，目前判断的原因是，直接预览canvas临时路径的图片耗时比较久。那么应该如何优化这个过程呢？ 小程序的API提供了几个关于文件的接口： [图片] [图片] [图片] 我们可以通过这几个接口优化目前的预览方式。在这其中vine做了两种不同的尝试。 第一，在执行wx.previewImage的success的回调的时候，把previewImage生成的临时路径保存下来，下次再点击预览的时候，直接获取本地已保存的文件列表wx.getSavedFileList，取得最近保存下来的文件的本地路径，进行预览。这么做的想法主要是为了解决canvas渲染的问题，每天只渲染一次，后续都是通过预览本地图片链接达到生成图片的目的。梳理一下流程： 初次渲染：canvasToTempFilePath -> previewImage -> saveFile 二次渲染：getSavedFileList -> previewImage 可惜理想始终是丰满的，在实际操作的过程中vine发现，通过这样的方式预览图片的时候，一直处于loading的状态，无法生成初次渲染的图片。vine非常苦恼，至今没能找到原因。 于是vine想了另一种办法，调整了预览的顺序如下： 初次渲染：canvasToTempFilePath -> saveFile -> previewImage 二次渲染：getSavedFileList -> previewImage 这时候vine发现，先把canvas生成的临时路径保存到本地，再预览，这种方法是可行的！而且在二次渲染的过程中，由于只是读取小程序本地的图片路径，无需再次调用canvas绘图，二次预览的时间大大减少。 在这里我们需要注意官方文档中提到的一点：小程序本地文件存储的大小限制为10M。所以我们需要调用wx.removeSavedFiled的方法删除我们不需要的图片（当天之前存下来的图片都是我们无需保存到本地的图片，可以删除） 三星note5保存图片尺寸的问题 在数量庞大版本不一的安卓手机上，vine收到反馈，三星note5在保存图片的时候会遇到图片底部被裁减的情况。在通过多次修改以及对比类似的小程序以后发现，note5用canvas绘制的图片有一个最大的范围是750*1150，超出这个范围的图片，底部就会被裁减。为什么会有这个最大范围vine目前还没探索出结论，希望遇到过这个问题的大神可以和vine交流一下心得，手动比心！~ 最后梳理一下小程序项目的一些注意点： 小程序需要申请小程序公司主体的账号，拿到appid，给到后台同学配置接口 小程序的体验需要上传体验版本，获取体验者的微信号，到小程序管理后台开通体验者权限 小程序开发过程中需要的单位为rpx，兼容问题较少 在小程序的需求中，需要仔细查看文档中提到的版本以及兼容问题，做好降级处理：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html

这几天接触一个开源小程序项目，UI是用ColorUI，惊艳于这个框架，确实非常nice 小程序示例看着很美，不知道怎么用，限于该UI框架是个人维护，目前没有自己的官网和上手指引文档，今天找了份文档，具体见 git主页，多半不是那么容易打开的，你懂得 https://github.com/weilanwl/ColorUI/ CSDN上找了 份上手示例，可以参考下 小程序colorUI框架初步使用教程 https://blog.csdn.net/IT_TIfarmer/article/details/88380308 ColorUI语雀文档 https://www.yuque.com/r/colorui/books?q= [图片] 鲜亮的高饱和色彩，专注视觉的小程序组件库 GitHub 地址：https://github.com/weilanwl/ColorUI 开发文档参考（编辑中）：https://www.color-ui.co 使用心得： 1、优点：视觉效果漂亮，注意看一下，他可以将样式沉浸到手机最顶部，这一点很好，同时其他组件也挺好，可针对自己的需求，直接修改或覆盖他的css样式。 2、缺点：缺少文档、很多新人无从下手。扫码预览时，近期广告有些频繁，影响使用，开发者也想有点费用，大家理解，喜欢的可以对开发者点广告支持，开源不易。 以下内容摘录自git页 GitHub 地址：https://github.com/weilanwl/ColorUI 使用原生小程序开发 从现有项目开始下载源码解压获得[代码]/demo[代码]，复制目录下的 [代码]/colorui[代码] 文件夹到你的项目根目录 [代码]App.wxss[代码] 引入关键Css [代码]main.wxss[代码] [代码]icon.wxss[代码] @import "colorui/main.wxss"; @import "colorui/icon.wxss"; @import "app.css"; /* 你的项目css */ .... 从新项目开始下载源码解压获得[代码]/template[代码]，复制[代码]/template[代码]并重命名为你的项目，导入到小程序开发工具既可以开始你的新项目了 使用自定义导航栏导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。 [代码]App.js[代码] 获得系统信息 onLaunch: function() { wx.getSystemInfo({ success: e => { this.globalData.StatusBar = e.statusBarHeight; let custom = wx.getMenuButtonBoundingClientRect(); this.globalData.Custom = custom; this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight; } }) }, [代码]App.json[代码] 配置取消系统导航栏,并全局引入组件 "window": { "navigationStyle": "custom" }, "usingComponents": { "cu-custom":"/colorui/components/cu-custom" } [代码]page.wxml[代码] 页面可以直接调用了 <cu-custom bgColor="bg-gradual-pink" isBack="{{true}}"> <view slot="backText">返回</view> <view slot="content">导航栏</view> </cu-custom>

今天有个微信好友聊天才知道，社区用户 "小肥羊" 盗版以所谓的云开发版本的小程序获取用户的关注，私下转售个人自主开发的答题小程序 智汇答题Plus，早在半年前已经发现了"小肥羊"盗版智汇答题Plus，并且已经跟他沟通商量过，但是今天发现仍然是这样无所顾忌的盗版，而"小肥羊"所谓的云开发版本也是跟智汇答题Plus有90%的相似，对于这种盗版别人源码，并且拿着别人源码来转售的行为感到鄙视，完全侵犯了版权。 [图片] [图片] [图片] [图片] [图片] [图片] [图片]

小程序怎么能跟pc页面一样将当前页面生成pdf文件，所见即所得功能

众所周知，小程序搭建好之后小程序码会在线上/线下频繁展示。但是很多时候不是每个人都有小程序后台下载权限。所以这个方法你务必掌握！不然说你玩过小程序，那只能呵呵了。 一般正常的小程序码下载都在这里： [图片] 不废话，干货马上开始！ 1、你要知道这个小程序叫啥名字。 通过搜索进入小程序，然后获取到小程序的APPID。 [图片] [图片] [图片] 温馨提醒：这个APPID是可以长按复制的。 2、然后进入任意一个小程序后台。 这时小编想起周星驰电影的一个桥段：这是一只不一般的电筒，需要另一只电筒亮起它才能亮。 [图片] 然后粘贴上面复制出来的APPID，现在新版本名字也是可以搜索名称了。其实小编是想借个地方告诉你APPID的获取方法。 [图片] 点击进入下一步，就是进入显示小程序哪个页面了。 [图片] page/tabBar/index/index 复制上面这个路径进去点击确定，就是生成小程序主页的小程序码。下次教程小编再告诉大家怎么获取任意小程序页面的页面路径，从而生成小程序码。以防丢失重要教程，记得先关注我们哦！我们来一间每次发文章，系统都会通知你。 [图片] 到这一步你不会跟我说怎么没有下载按钮吧？如果真是这样，那你可以发明很多文中说到的“电筒”了！

github仓库地址-点这里看源码 xxx项目 开发时集成eslint，框架使用原生 + westore + iview weapp 部分ui样式组件代码 。去除了真实的请求地址，部分配置和页面。方便大家学习交流 [暗门-彩蛋] 点击顶部bar 15下可弹出暗门操作，方面调试定位 自己修改appid 并关闭安全域名校验 运行一下就知道喽~ 库插件 1. wxApi [代码]const wxApi = function (keyName = "", obj = {}) { return new Promise((resolve, reject) => { // 去除方法里面的空格服 if (keyName && typeof keyName === "string") { keyName = keyName.replace(/\s/g, "") } else { console.error("keyName值不能为空哦且必须是string类型") return false } // 判断方法名 是否再wx 对象中 const wxHasOwnProperty = wx.hasOwnProperty(keyName) if (!wxHasOwnProperty) { console.error(`你输入的方法[${keyName}]在wx中找不到，请检查是否输入正确`) return false } if (keyName && wx[keyName] && wxHasOwnProperty) { wx[keyName]({ ...obj, success(data) { resolve(data) }, fail(data) { reject(data) } }) } }) } export default wxApi // 仅支持wx 的异步方法 wxApi("fnName",params).then(res=>{}).catch(error=>{}) [代码] 2. request [代码] /** * 1. 接口文件单独维护 * 2. 设置token * 3. 中断请求 * 4. 401 重试示范 * */ import http from "xxx/xxx/request.js" // 普通的请求 http.get("YOUR_API") // resful 拼接的情况 ，目前只支持三个自定义参数，多的自己再修改代码，或者去怼后端吧 http.get({ key:"YOUR_API", p1:"hello", p2:"world", }) // 所有的请求都被拦截包装过的，可根据自己的业务进行包装 [代码] 功能点 1 快速新建组件/pages模板 命令：cnpm/npm run page 并且可以顺便给你app.json 中添加了这个路由 2 eslint/prettier 集成 cnpm run lint/fix 3 小程序全局状态库westore 和 登录解决方案 [图片] 4 自定义顶部tabBar [图片] [图片] 5 海报图分享 [图片] 5.全局按需登录的组件 [图片] [图片]