小程序云开发发布有一段时间了,最近着手做了一个基于云开发的小程序项目--仿《微博鲜知》,来自新浪的这款全新风格的小程序虽然界面非常简约清新,但是内部还是内藏了很多玄机,在实现的路上遇上了不少坎坷,在这里分享给大家。希望给大家提供一些思路。 先展示一下最终结果: 更多图片资源在这里 一、 组件化思想开发一个完整的小程序时,我们应该先分析其内部的结构。重复的结构抽离出来作为组件,组件非常的灵活,可以嵌入一个页面或多个页面。 在上面的gif图中我们可以看到首页的内容是一个个的新闻块。 虽然这个新闻块只在首页中使用到,但是我还是把它抽离成了一个组件。这样做的好处是页面结构将会更加的清晰,并且耦合度降低,比如想换个主界面风格时,你可以直接换另一个组件添加进来。 还有新闻内部页面中,有多个小标题,每个小标题里面嵌入了不等数量的新闻。如果不是采用组件化的话,到时候inner页面的wxml结构就会乱成一锅粥。所以这里的建议是尽量组件化分离开来。 对于组件很陌生可以先看我的之前的这篇文章组件化开发tabbar 下面是项目的页面与组件目录: 二、数据库设计既然是“全栈”,后端肯定要搞搞。后端的核心就是数据。那么我们就先把数据库分析一下。这里我是这样分析的,
这里我构建了5个集合 fresh-mainNews 主页新闻集合 subNews字段是一个数列,存储着fresh-subNews Doc的_id,这样就将这两个集合绑定了起来,在后面我们会讲到在云函数中把这两个集合融合起来返回一个新的数据变得完整一些的集合。 有人可能会问,云数据库不是noSQL吗,为什么不把所有数据全部整合到一个全部的JSON,那样就可以只调用一次JSON。 我的理解是: 我们查询只是需要查询我们想要的数据,不需要的数据可以等需要的时候再根据关联去请求。 比如这个项目中的首页新闻块,每一个新闻块内部都关联着大量的子新闻,第一次加载就全部把这个小程序需要的所有数据都加载出来就有点疯狂了。
三、页面构建讲到这里就该说页面的构建了。页面可以想象成一个架子,一个承载数据的容器。页面通上数据,就变得活起来。MVVM,数据驱动视图。交互靠数据,组件间的通信,组件与页面间的通信都是数据。{{}} -> 就像是流浪法师大招神奇的传送门。后面会将给出一个精彩的组件通信例子(点击目录如何实现标题栏置顶)。 四、关于云开发。云开发三大核心: 云函数:通俗的理解就是你写的函数在云端运行,可以把复杂的业务逻辑放在云函数里 数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库 存储:在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理,可以上传照片下载照片,或者一些其他文件。 在这里详细介绍一下操作云函数提取数据库的流程, 这里我们以获取首页数据为例:
获取的数据: 我们可以看到原本的subNews里面本来存放的是_id的数值,融合后变成_id对应的整个doc 变化: [_id1.value,_id2.value~~] ---> [{_id1:value,key1:value1,key2:value2},~~~] 云函数的调用,数据库的查询。就是这么简单的四步,云开发的门槛很低,功能也很强大,只要你去尝试,很轻松的就能够实现。 五、关于时间格式化。
六、 关于一些很有用但是你可能不知道的小程序技巧
wx.previewImage({ current: imgUrl, // 当前显示图片的http链接 urls: imagePack // 需要预览的图片http链接列表 }) 复制代码
//给数组设置值 还可以有var xx = 'xx['+idx+'].key'的形式 var doneList = 'doneList['+idx+']' that.setData({ [doneList]: true, }) 复制代码 有时候我们还可以先改变某个数的值再去setData()它,这是setData()的一个很好用的技巧,不过需要去运用一下才好理解 如: dataPack.likeNum = (supLikeNum===-1 ? dataPack.likeNum: supLikeNum); this.setData({ comment: dataPack, }) 复制代码 七、 项目最精彩的两个部分1.点击目录栏页面将相应新闻栏置顶,先看下效果这个效果在别的小程序里面都没有见过,应该是微博鲜知独创的,在这里先对原作者表达一下敬意。内部的构造也是非常巧妙,不同于我们常见的外卖的锚点定位。 我们先来分析一波: mvvm,视图是由数据驱动的,我们要透过现象看本质,去思考底层的数据,这样我们很快就会有思路:
<block wx:for="{{subNews}}" wx:for-item="subNewsItem" wx:for-index="idx" wx:key="index"> <view class="subTitle-item" bind:tap="scrollFind" //关键1:绑定item索引 data-hi="{{idx}}"> <text>{{subNewsItem.title}}</text> </view> </block> 复制代码
onCatalog: function(e) { e.detail // 自定义组件触发事件时提供的detail对象 console.log(e.detail.index) //关键:3 把索引存储到data this.setData({ catalogIndex : e.detail.index }) //关键4: 页面可以通过组件的id取得其页面引用组件的方法 // this.subNews=this.selectComponent("#subNews") this.subNews.goTop(); }, 复制代码
<subNews ~省略~ catalogIndex="{{catalogIndex}}" id="subNews"></subNews> 复制代码
//subNews/index.wxml //一个看不见的图片,来自瀑布流的灵感,能够产生主动触发的事件 <view style="display:none"> <image src="{{mainImg}}" bindload="onImageLoad"></image> </view> 复制代码
goTop: function (e) { var that = this let catalogIndex = that.data.catalogIndex; //这里offsetList是一个data里面的数据,来保存所有的节点的上边距坐标 let offsetList = that.data.offsetList; wx.pageScrollTo({ scrollTop: offsetList[catalogIndex], //滚动到具体数值所在的位置 duration: 50 //执行滚动所花的时间 }) } 复制代码 至此,你就实现了这个看似简单却非常巧妙的功能,组件->页面->组件,秀得眼花缭乱。如果还是有些不理解的话,等下可以下载我的代码去看。 至于为什么要弄一个图片的加载然后触发那个事件呢,这是因为如果你把获取offsetList偏移量数组的函数放在goTop里的话,进入页面第一次的点击会无效,这样产生的体验肯定是非常不舒服的。 2. 点赞优化先展示一下效果: 先说一下优化的是什么:点赞效果的延迟极大降低 因为点赞的变化是由用户产生的一个交互,传统的观点就是用户点赞->后端更新数据->前端拉取数据->数据驱动视图的变化。 真实的体验就是,非常的慢,慢到点击后2秒才能看到点赞的效果,这种差劲的交互简直就是一场灾难。
<text class="dianzanNum">{{likeNumList[idx]?likeNumList[idx]:item.likeNum}}</text> 复制代码 优化思路是怎么样的呢? 用一个数组来存放/模拟更新的数据,如果数字的索引位置被赋值,则页面直接显示这个更新的数字,也是异曲同工之妙。因为用户关心的是数据的变化,我们可以先把数据的变化产生,至于数据后端的变化让他异步慢慢的去做。 从这里发散思想,是不是评论功能也能够用这样的思路同样去达到极致的速度与交互体验呢。 点赞的延迟几乎为无,体验到点赞的极致快感,让人几乎停不下来~~(暗示一波)篇幅所限,文章到这里就差不多了。 项目地址: github-HappyBirdwe-weiboFresh 奉上 精心写的项目,细节很不错哟,欢迎大家☆☆☆☆star☆☆☆☆结语: 学习的道路上免不了坎坷,希望文章的分享能够为大家提供一些思路,学习的过程减少一点弯路,这就是这篇文章最大的价值,欢迎大家提问及指正。 |
大风起兮云飞扬! 小程序云开发实战奉上
发布:2018-11-13 09:31浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08