用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序单击查看单项详情

纸飞机 2018-3-6 16:13

作者:哲学李论,来自原文地址本节目标:学会查看调试消息,完成页面间跳转传参等1,学会在控制台查看错误消息在上一节第10节中,运行代码,控制台会有一个红色的错误提示:一般的调试信息,黄色的是警告,可忽略; ...

作者:哲学李论,来自

原文地址

本节目标:学会查看调试消息,完成页面间跳转传参等

1,学会在控制台查看错误消息

在上一节第10节中,运行代码,控制台会有一个红色的错误提示:


一般的调试信息,黄色的是警告,可忽略;红色的是错误,需重视。但这个错误并不影响运行,可暂时忽略。

像这条警告消息:


是因为微信wx.getUserInfo接口改变了字段造成,可以完全忽视。(因这个问题学员问的多,重复一下)

像这条消息:


是因为在"pages/sim-go/demo/list.wxml"页面中,组件navigator缺少有效的url属性值引起的:


由于我们启用了长按操作(见上一节),这里navigator可以改为view,完成后如下所示:


2,添加新的id详情页面

如前所述,仍是在app.json文件中,于pages数组中新增一行:


保存,以此完成一个页面的新增。

这里有一个小使用技巧,与大家分享下,是关于Web开发者工具的。我喜欢在咖啡馆中写代码,外出携带编码利器,止一mba耳,屏幕自是没有办法达到双屏同时编辑。微信的web开发者工具,是左中右三栏,在mba上时常觉得屏幕不够用。在编辑状态下,不妨将预览区关掉:


单击左上角的手机模样按钮就可以关掉了。而在调试模式下,预览区仍是显示的,无妨。这样,虽然在编辑状态下无法实时看到UI的变化,但其实在编辑状态下因为一保存预览就会刷新,所以编辑状态下的实时查看对我来说等于无用。一些视图样式的调整,基本是在调试模式下在Wxml面板下写好,然后拷贝到文件中的,此时并不保存,为了是预览区不刷新。

还有,顶行生成的注释其实也蛮有用:


特别是在写教程笔记的时间,可以直接拷贝。

这个页面“pages/sim-go/demo/id.wxml”,要展示一个blog单项的基本消息,从pages/weui/article目录找到合适的UI组件,拷贝过来,完成后如下所示:


3,页面传递id参数,拉取id单项数据

先将demo/list页面调整到第一位置:


再于pages/sim-go/demo/list.wxml页面中,添加data-id属性:


这是一个dataset属性,添加它是为了实现从视图层向js层传递参数。通过dataset参数传递是一个常用的方法。

修改viewItem函数:


可以打开注释,查看id输出。此步已完成。

4,通过接口以id为依据拉取单项数据

在“pages/sim-go/demo/id.js”中添加blog数据对象:


引用sim库:

let sim = require('../../../static/js/sim.js/index')

修改onLoad函数:


所有的url地址,都适宜使用``这种字符串格式,方便在字符串内部直接插入变量,例如${id}便是。

5,在wxml中绑定数据

修改页面,如下:


预览:


在预览效果中,时间显示的一串数字,是unix time。如何将其转换为人类正常可读的格式呢?

在onLoad函数中,添加一行代码:


这行代码的意思,是将unix time格式化为"x月x日"这样的格式,运行效果:


到这里,我们就完成了单击一个单项,通过传递id参数,在新页面查看单项详情。

6,在list页面中添加新建按钮

修改pages/sim-go/demo/list.wxml页面,在上方添加一个按钮:


这段代码很简单,创建了一个“新建”按钮,链接到先前已经创建的demo/index页面,该页面负责新建blog信息并保存。

运行效果:



7,如何显示自己的头像、昵称

在源码中,其实已经包括了用户登陆,请看一下app.js文件:


这一段便是自动登陆的代码,如果用户第一次打开,会提示授权。

回到pages/sim-go/demo/id.js页面,于data中添加一个my变量:


于顶部添加session引用:

let session = require('../../../static/js/sim.js/lib/session')

修改onReady函数代码:


这样便拿到了自己的用户信息。我在代码中经常使用console.log打印信息,这是常用的调试方法。写调试代码并不能使我们的程序或开发速度变慢,真正让我们的人生裹步不前的,是遇到了问题卡住了,无师友可问;还有站在十字路口时的迷茫,无人可指点迷律。如果有地图,按图索骥,按部就班的进行,其实是很快的。

拿到数据之后,在页面中绑定:


运行效果:


这显示的是自己的信息,那么,如果想显示该篇blog作者的信息,怎么做到呢?

也是可以做到的。

但是,我们在保存blog信息时,并没有保存当前用户的uid,同学们可以动手,在pages/sim-go/demo/index.js页面中,先取得自己的对象信息(上面已经做到了),保存数据时,把uid当成一个字段存在数据库。

当然,在此之前,你需要先在数据库blog表中,添加一个uid字段,类型为int64。

然后,在pages/sim-go/demo/id.js页面拉取单项信息显示时,可以使用这个接口拉取作者信息:

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏