轮播图的开发
在内容模型创建轮播图模型,并在内容集合上传数据。
这里我们设置展示名称为轮播图,数据库名称为"banner"。
接下来在pages/index中开始编写轮播图
对swiper的文档,我们绑定数据,这样我们使用wx:for进行列表绑定。
tabBar 然后我们配置tabBar底部导航栏
backgroundColor selectedconPath borderStyle iconPath color selectedColor
这里我们使用 wx.navigateTo(Object object) 跳转到应用内的某个页面,我们对导航栏给他点击事件在用户点击时候我们可以进行页面的跳转。
接下来我们将开发热门美食栏目板块,这里依然是使用列表渲染wx:for进行列表的展示
这里我们会发现有的时候item.btn1要是为空也会显示出来,我们可以这样改进一下,我们使用wx:if条件渲染
这样我们增加判断之后如果是空置我们就不显示这个按钮
我的页面开发
首先我们要获取到用户的openID我们这里采用云开发获取用户openid
小程序内提供了专门用于云函数调用的 API。开发者可以在云函数内使用 wx-server-sdk 提供的 getWXContext 方法获取到每次调用的上下文(appid、openid 等),无需维护复杂的鉴权机制,即可获取天然可信任的用户登录态(openid)。
这里我们获取到来刚才传过来的listid,在数据库之中查询这条数据。
在这里我们要思考,是不是需要用户浏览一次数据就自增+1,这里我那使用到 Command.inc(value: number): Command
更新操作符,原子操作,用于指示字段自增
参数 value: number 自增量,可正可负
攻略
然后我们在fbpl页面的fbpl.json引入相应的框架,这里我们使用weui框架可以让我们快速的完成页面的编辑。