简单的siwper效果，又是逛社区发现老哥提的想要该效果，那么有需要，咱们就得上啊： 效果图： [图片] 上代码： wxml [代码]<view class="container"> <swiper duration="200" previous-margin="140rpx" next-margin="140rpx" bindchange="currentHandle" circular="{{true}}" class="swiper-out"> <block wx:for="{{punchList}}" wx:key="*this"> <swiper-item class="swp-item {{current === index ?'active-item': ''}}"> <view class="slide-image" style=" background: url({{item.bannerUrl}}) no-repeat center center;background-size: 100% 100%;" id="{{index}}"></view> </swiper-item> </block> </swiper> <view class="swp-dot"> <view class="square-12 m-r-8 {{current === index ?'active': ''}}" wx:for="{{punchList}}" wx:key="{{index}}"></view> </view> </view> [代码] JS [代码]const app = getApp() Page({ data: { punchList: [{ "bannerUrl": "https://qiniu-image.qtshe.com/1536067857379_122.png" }, { "bannerUrl": "https://qiniu-image.qtshe.com/1536068379879_115.png", }, { "bannerUrl": "https://qiniu-image.qtshe.com/1536068319939_230.png", }, { "bannerUrl": "https://qiniu-image.qtshe.com/1536068074140_695.png", }, { "bannerUrl": "https://qiniu-image.qtshe.com/1536068213758_796.png", }], current: 0 }, currentHandle(e) { let { current } = e.detail this.setData({ current }) } }) [代码] wxss [代码].container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100vh; } .slide-image { height: 600rpx; width: 400rpx; margin-top: 20rpx; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10rpx; } .swiper-out { width: 750rpx; height: 660rpx; margin-top: 60rpx; } .active-item .slide-image { box-shadow: 0 5rpx 20rpx 3rpx rgba(0, 0, 0, 0.15); } .swp-item { width: 400rpx; display: flex; flex-direction: column; align-items: center; padding-top: 4rpx; opacity: 0.6; } .active-item { opacity: 1; } .swp-dot { display: flex; justify-content: center; flex: 1; margin-top: 18rpx; } .m-r-8 { margin-right: 8rpx; } .m-l-8 { margin-right: 8rpx; } .square-12 { width: 12rpx; height: 12rpx; background-color: #d8d8d8; border-radius: 6rpx; transition: width 0.2s linear; } .active { background-color: #3c3c3c; width: 36rpx; transition: width 0.2s linear; } [代码] 代码放完了，看下效果吧。代码片段如下： https://developers.weixin.qq.com/s/DCK6HJmw7kaZ

微信小程序中使用swiper组件可以实现图片轮播效果，但是默认swiper高度是固定的150px，如果项目中图片大于固定高度就会被隐藏，所以本篇文章要实现轮播图片的高度自适应。 效果图： [图片] wxml代码： [代码]<[代码][代码]swiper[代码] [代码]class[代码][代码]=[代码][代码]"t-swiper"[代码] [代码]indicator-dots[代码][代码]=[代码][代码]"{{indicatordots}}"[代码] [代码]indicator-active-color[代码][代码]=[代码][代码]"{{color}}"[代码] [代码]autoplay[代码][代码]=[代码][代码]"{{autoplay}}"[代码] [代码]interval[代码][代码]=[代码][代码]"{{interval}}"[代码] [代码]duration[代码][代码]=[代码][代码]"{{duration}}"[代码] [代码]style[代码][代码]=[代码][代码]"height:{{height}}"[代码][代码]>[代码][代码]  [代码][代码]<[代码][代码]block[代码] [代码]wx:for[代码][代码]=[代码][代码]"{{img}}"[代码] [代码]wx:key[代码][代码]=[代码][代码]""[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]swiper-item[代码][代码]>[代码][代码]      [代码][代码]<[代码][代码]image[代码] [代码]src[代码][代码]=[代码][代码]"{{item}}"[代码] [代码]mode[代码][代码]=[代码][代码]"widthFix"[代码] [代码]bindload[代码][代码]=[代码][代码]'goheight'[代码] [代码]/>[代码][代码]    [代码][代码]</[代码][代码]swiper-item[代码][代码]>[代码][代码]  [代码][代码]</[代码][代码]block[代码][代码]>[代码][代码]</[代码][代码]swiper[代码][代码]>[代码]wxss代码： [代码].t-swiper image {[代码][代码]  [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码]}[代码]js代码： [代码]Page({[代码][代码]  [代码][代码]data: {[代码][代码]    [代码][代码]img: [[代码][代码]      [代码][代码]'img/1.jpg'[代码][代码],[代码][代码]      [代码][代码]'img/2.jpg'[代码][代码],[代码][代码]      [代码][代码]'img/3.jpg'[代码][代码]    [代码][代码]],[代码][代码]    [代码][代码]indicatordots: [代码][代码]true[代码][代码],[代码][代码]    [代码][代码]//是否显示面板指示点[代码][代码]    [代码][代码]autoplay: [代码][代码]true[代码][代码],[代码][代码]    [代码][代码]//是否自动切换[代码][代码]    [代码][代码]interval: 5000,[代码][代码]    [代码][代码]//自动切换时间间隔[代码][代码]    [代码][代码]duration: 500,[代码][代码]    [代码][代码]//滑动动画时长[代码][代码]    [代码][代码]color: [代码][代码]'#ffffff'[代码][代码],[代码][代码]    [代码][代码]//当前选中的指示点颜色[代码][代码]    [代码][代码]height: [代码][代码]''[代码][代码]    [代码][代码]//swiper高度[代码][代码]  [代码][代码]},[代码][代码]  [代码][代码]goheight: [代码][代码]function[代码] [代码](e) {[代码][代码]    [代码][代码]var[代码] [代码]width = wx.getSystemInfoSync().windowWidth[代码][代码]    [代码][代码]//获取可使用窗口宽度[代码][代码]    [代码][代码]var[代码] [代码]imgheight = e.detail.height[代码][代码]    [代码][代码]//获取图片实际高度[代码][代码]    [代码][代码]var[代码] [代码]imgwidth = e.detail.width[代码][代码]    [代码][代码]//获取图片实际宽度[代码][代码]    [代码][代码]var[代码] [代码]height = width * imgheight / imgwidth + [代码][代码]"px"[代码][代码]    [代码][代码]//计算等比swiper高度[代码][代码]    [代码][代码]this[代码][代码].setData({[代码][代码]      [代码][代码]height: height[代码][代码]    [代码][代码]})[代码][代码]  [代码][代码]}[代码][代码]})[代码]

ios 微信用户在未开启微信运动权限时调用wx.getWeRunData() 会直接弹窗提醒用户开启微信运动， 安卓用户wx.getWeRunData()直接fail 我们小程序没上线只能在本地和体验版上体验 试了几款安卓有微信运动接口的小程序是可以呼起开通微信功能弹窗，所以还请帮忙看下问题： app.js: wx.getSetting({     success: res => {         if (!res.authSetting['scope.werun']) {             wx.authorize({                 scope: 'scope.werun',                 success: res => {                 console.log(res);                 wx.getWeRunData();                 },                 fail: res => {                     console.log(res);                 }             })         }     } }) 使用微信运动的页面js： if (wx.getWeRunData) { // 获取微信步数 wx.getWeRunData({     success(res) {         getSteps(res.encryptedData);     },     fail(res){         wx.showModal({             title: '提示',             content: '开发者未开通微信运动，请关注“微信运动”公众号后重试',             showCancel: false,             confirmText: '知道了'         })     } }) } else { // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示 wx.showModal({     title: '提示',     content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。' }) }

2018年12月，腾讯相册累计用户量突破[代码]1亿[代码]，月活1200万，阿拉丁指数排行 [代码]Top 30[代码]，已经成为小程序生态的重量级玩家。 三个多月来，腾讯相册围绕【在微信分享相册照片】这一核心场景，快速优化和新增一系列社交化功能，配合适当的运营，实现累计用户量突破[代码]1亿[代码]，大大超过预期。 [图片] (腾讯相册用户量破亿) 可是，谁曾想到，这样一个亿级体量的小程序，竟然是一个开发做出来的？他又是有哪般“绝技”，可以一个人撑起一个用户过亿的小程序？ 后台人力紧缺，怎么办？ 当我第一次见到腾讯相册小程序的开发David（化名）时，他显得忧心忡忡。 “年底的目标是要过千万的用户，但现在只有几位前端和后台开发。不仅如此，我们的后台开发还不是百分百能够投入到这个项目，大部分时间要抽身支援其它项目，人力非常紧缺。此外，原有后台系统有不少历史包袱，在原有架构上做新的社交化功能开发是不现实的。怎么办？ “要不试试’小程序·云开发’吧，只需要前端就可以把小程序搞起，正好解决我们缺后台的难题。” 于是，David作为腾讯相册前端开发团队的骨干，担当起用小程序·云开发实现腾讯相册小程序社交化功能的重任。 “第一次接触到’小程序·云开发‘时，觉得这个东西（小程序·云开发）理念挺新颖的———小程序无服务开发模式。在一般的小程序开发中，有三大功能小程序开无法绕开后台的帮助，它门分别是数据读取、文件管理以及敏感逻辑的处理（如权限）。因此，传统的开发模式，在小程序端都必须发送请求到后台进行鉴权，并且处理相关的文件或者数据。即使使用 Node 来搭建后端服务，也需要耗费不少的搭基础架构、后期运维的工作量。” [图片] “而小程序·云开发则释放了小程序开发者的手脚，赋予了开发者安全、稳定读取数据、上传文件和控制权限的能力，其它的负载、容灾、监控等，我们小程序开发者只需要关注业务逻辑，专注写好业务逻辑即可，其他的事情完全可以不用操心了！本来我还一筹莫展，了解完’小程序·云开发‘的产品原理以后，我瞬间心里有谱了。” 二维码扫不出来了 [图片] 道路总是不平坦的 ，在腾讯相册小程序通往用户破亿的道路上，困难重重。 由于腾讯相册的二维码需要带上的信息量过大，因此它的二维码显得密密麻麻。这种密集的二维码在某些Android机型下，容易出现无法识别小程序的问题。 这严重制约了腾讯相册小程序分享获客的能力。 [图片] (需要存储name, ownerid, page等大量信息) 这个事情的解决并不难，只需后台开发把数据先存储到数据库中，然后把数据id放到分享链接上，这样，链接便可以转化成32个字符的短链接，让二维码看起来没有那么密集了。 但由于后台人力不足，于是前端开发David利用小程序· 云开发的数据库存储能力，通过调用db.collection(‘qr’).add接口，快速实现数据在数据库中的存储。 [图片] (云开发数据库，格式类似MongoDB) [图片] (云开发数据库索引，可加快数据读取) [图片] 此外，腾讯相册还借住小程序·云开发的云函数能力，生成辨识度更高的小程序码（小程序码文档），用以在朋友圈里传播分享。 [图片] (生成小程序码的云函数逻辑) [图片] (优化后的分享图片和小程序码) 2天上线评论点赞功能 [图片] (评论与点赞功能) 腾讯相册在微信端的核心应用场景是“在微信做分享相册照片”，为了增强腾讯相册用户在微信里的互动，提升用户粘性和留存，腾讯相册决定新增评论与点赞功能，并且把聊天评论就直接在微信聊天窗口里面实现。 在这里，腾讯相册的David面临了两个选择，一是按原开发模式（前台开发-后台开发-前后台联调）做这个功能，面临的问题便是开发周期长、缺后台、迭代速度慢；另一个就是借助云开发的能力，亲自上阵。 为了加快产品迭代速度，David决定采取云开发的开发方式。评论、点赞通过云开发的数据库插入和查询接口，如db.collection(‘comment’).add，很快就实现了。 但遇到棘手的问题是，对于一些敏感的操作比如删除和编辑评论、点赞这些敏感操作，还需要到用户的鉴权操作，而这些鉴权信息，都在原有的后台。此时，云函数的路由功能便发挥出作用了。 [图片] (评论点赞逻辑) 用户进行评论点赞的时候，会在小程序端发起请求调用云函数并带上 [代码]openid[代码]，云函数用 [代码]openid[代码] 查询原有的后台服务看看该用户是否有权限进行操作，如果用户具有权限，则把评论和点赞的数据都写入云开发的数据库中。 就这样，借住小程序·云开发的能力，腾讯相册仅用2天时间，完成了在传统开发模式下需要1周多工作量的开发工作。 ​ 原有开发模式 云开发全栈开发 工作量 后台1周(微信登录态校验+业务逻辑server开发)+ 前后台联调1天 1 - 2天，无需联调 什么是小程序·云开发？ 小程序·云开发是基于腾讯云研发的全新 云开发 Tencent Cloud Base（简称 TCB） 服务，腾讯云与微信力推的这套云开发服务的诞生，恰逢其时地帮助腾讯相册走出开发效率的瓶颈。 [图片] (基于腾讯云的云开发) 小程序云目前提供三大基础能力支持： 云函数：充当了后台的角色，开发者可以在上面用 Node （后续还会支持 PHP, Python 等）写后台逻辑，跟微信私有协议天然鉴权，可以云函数里直接获取 [代码]appid[代码], [代码]openid[代码], [代码]unionid[代码] 等重要鉴权信息，大大简化了小程序后台的开发工作量。 数据库：一个既可在小程序前端操作，也能在云函数中读写的文档型数据库，提供控制台可视化管理 文件存储：在小程序前端和云函数里都可以直接上传/下载云端文件，提供控制台可视化管理 如果你是全新开发的小程序，架构非常轻量简单，如下图。 [图片] 如果你是已有的小程序，部份需要跟原有后台交互的功能，完全可把云函数作为路由，节省获取openid 等用户信息的逻辑，如下图： [图片] 相关资料 小程序·云开发解决方案 小程序·云开发文档

title: 【小程序+云开发】实战：一天搭建小型论坛 date: 2018-11-25 15:10:40 categories: 软件开发 tags: 小程序 笔者最近涉猎了小程序相关的知识，于是利用周末时间开发了一款类似于同事的小程序，深度体验了小程序云开发模式提供的云函数、数据库、存储三大能力。关于云开发，可参考文档：小程序·云开发。 个人感觉云开发带来的最大好处是鉴权流程的简化和对后端的弱化，所以像笔者这种从未接触过小程序开发的人也能够在周末两天时间内开发出一个功能完备、体验闭环的勉强能用的产品。 最后，本文并不是搬运官方文档，也不会详细介绍开发工具和云开发后台的使用，所以建议结合上面给出文档链接一起消化本文。 功能分析 [图片] 该小程序功能目前较为简单（发布帖子、浏览帖子、发布评论），可用下图表示，无需赘述： [图片] 由架构图可知，云开发的数据库（存帖子、存评论）、存储（图片）、云函数（读、写、更新数据库等）都将涉及，很好地达到了练手的目的。 发布帖子 如果帖子不带图片，直接写数据库即可，如果带图片则需要先存入图片到云开发提供的存储中，拿到返回的fileId（可理解为图片的url）再一并写入数据库，核心代码： [代码] for (let i = 0; i < img_url.length; i++) { var str = img_url[i]; var obj = str.lastIndexOf("/"); var fileName = str.substr(obj + 1) console.log(fileName) wx.cloud.uploadFile({ cloudPath: 'post_images/' + fileName,//必须指定文件名，否则返回的文件id不对 filePath: img_url[i], // 小程序临时文件路径 success: res => { // get resource ID: console.log(res) //把上传成功的图片的地址放入数组中 img_url_ok.push(res.fileID) //如果全部传完，则可以将图片路径保存到数据库 if (img_url_ok.length == img_url.length) { console.log(img_url_ok) that.publish(img_url_ok) } }, fail: err => { // handle error console.log('fail: ' + err.errMsg) } }) } [代码] 通过[代码]img_url_ok.length == img_url.length[代码]我们确定所有图片已经上传完成并返回了对应的id，然后执行写入数据库的操作： [代码] /** * 执行发布时图片已经上传完成，写入数据库的是图片的fileId */ publish: function(img_url_ok) { wx.cloud.init() wx.cloud.callFunction({ name: 'publish_post', data: { openid: app.globalData.openId,// 这个云端其实能直接拿到 author_name: app.globalData.userInfo.nickName, content: this.data.content, image_url: img_url_ok, publish_time: "", update_time: ""//目前让服务器自己生成这两个时间 }, success: function (res) { // 强制刷新，这个传参很粗暴 var pages = getCurrentPages(); // 获取页面栈 var prevPage = pages[pages.length - 2]; // 上一个页面 prevPage.setData({ update: true }) wx.hideLoading() wx.navigateBack({ delta: 1 }) }, fail: console.error }) }, [代码] 通过[代码]wx.cloud.callFunction[代码]我们调用了一个云函数（通过[代码]name[代码]指定函数名），并将帖子内容[代码]content[代码]和图片[代码]image_url[代码]以及其他信息（发布者昵称、id等）一并传到云端。然后再看看这个云函数： [代码]exports.main = async (event, context) => { try { return await db.collection('post_collection').add({ // data 字段表示需新增的 JSON 数据 data: { // 发布时小程序传入 //author_id: event.openid,不要自己传，用sdk自带的 author_id: event.userInfo.openId, author_name: event.author_name, content: event.content, image_url: event.image_url, // 服务器时间和本地时间会造成什么影响，需要评估 publish_time: new Date(), // update_time: event.update_time,// 最近一次更新时间，发布或者评论触发更新,目前用服务器端时间 update_time: new Date(), // 默认值，一些目前还没开发，所以没设置 // comment_count: 0,//评论数，直接读数据库，避免两个数据表示同一含义 watch_count: 3,//浏览数 // star_count: 0,//TODO：收藏人数 } }) } catch (e) { console.error(e) } } [代码] 可以看到，云函数写入了一条数据库记录，我们的参数通过[代码]event[代码]这个变量带了进来。 获取帖子列表 所谓获取帖子列表其实就是读上一节写入的数据库，但是我们并不需要全部信息（例如图片url），并且要求按照时间排序，如果熟悉数据库的话，会发现这又是一条查询语句罢了： [代码]exports.main = async (event, context) => { return { postlist: await db.collection('post_collection').field({// 指定需要返回的字段 _id: true, author_name: true, content: true, title: true, watch_count: true }).orderBy('update_time', 'desc').get(),//指定排序依据 } } [代码] 浏览帖子内容 浏览帖子内容及给定一个帖子的id，由帖子列表点击时带入： [代码] onItemClick: function (e) { console.log(e.currentTarget.dataset.postid) wx.navigateTo({ url: '../postdetail/postdetail?postid=' + e.currentTarget.dataset.postid, }) }, [代码] 然后在云函数中根据这个id拿到全部数据： [代码]exports.main = async (event, context) => { return { postdetail: await db.collection('post_collection').where({ _id: event.postid }).get(), } } [代码] 拿到全部数据后，再根据图片id去加载贴子的图片： [代码] // 获取内容 wx.cloud.callFunction({ // 云函数名称 name: 'get_post_detail', data: { postid: options.postid }, success: function (res) { var postdetail = res.result.postdetail.data[0]; that.setData({ detail: postdetail, contentLoaded: true }) that.downloadImages(postdetail.image_url) }, fail: console.error }) [代码] 这里[代码]that.downloadImages(postdetail.image_url)[代码]即加载图片： [代码] /** * 从数据库获取图片的fileId，然后去云存储下载，最后加载出来 */ downloadImages: function(image_urls){ var that = this if(image_urls.length == 0){ return } else { var urls = [] for(let i = 0; i < image_urls.length; i++) { wx.cloud.downloadFile({ fileID: image_urls[i], success: res => { // get temp file path console.log(res.tempFilePath) urls.push(res.tempFilePath) if (urls.length == image_urls.length) { console.log(urls) that.setData({ imageUrls: urls, imagesLoaded: true }) } }, fail: err => { // handle error } }) } } }, [代码] 发表评论 发表评论和发布帖子逻辑类似，只是写入的数据不同，不做赘述。 总结 前面说过，云开发弱化了后端（简化鉴权本质也是弱化后端），这样带来的好处就是提高了开发效率，因为前后端联调向来都是一件耗时间的事情，而且小程序本身主打的就是小型应用，实在没有必要引入过多的开发人员。但云开发也不是万能的，例如我一开始想做RSS阅读器，那么后端就需要聚合信息，目前云开发还做不了。个人感觉只要是信息类的小程序，如新闻类、视频类，云开发目前都很乏力，因为数据库的支持还过于简陋（也可能是我太菜，没发现很好的解决办法，欢迎拍砖）。但如果是本文提及的这种用户自己也会产生信息的小程序，那么云开发则会有开发效率上的优势。最后就是云开发目前提供的2G数据库和5G存储，对于一些用户量较多的小程序是否足够也是个问题，目前也没见有付费版。 总的类说，初次接触小程序开发，还是发现有不少值得借鉴学习之处。 源码：vimerzhao/RssHub 译