0
收藏
评论

遇到一些坑

遇到一些坑

 | 泡芙小姐 110

1. JSON 配置文件

小程序中,包含唯一的全局配置文件 app.json,以及每个页面的配置文件 page.json。每单页页面相应的 JSON 文件会覆盖与 app.json相同的配置项。

如下,是一个包含了所有配置选项的简单配置 app.json

2. JS 逻辑层

小程序的逻辑层由 Java 语言完成。但因为小程序不在浏览器中运行,所以 JS 在 web 浏览器中的一些函数不能用,如 document、 window等。

app.js有全局的小程序生命周期, page.js有自己本页面的生命周期。

2.1 注册小程序 app.js

这一步骤,有这几个需要注意的地方:

  1. 必须在 app.js中,使用 app()函数注册微信小程序。全局小程序中,只能注册一次;

  2. 不能在 app()内的函数中调用 getApp()(小程序实例),使用 this就可以拿到小程序的实例;

  3. 不要在 onLaunch的时候 getCurrentPage(),因为此时 Page还没有生成;

  4. 通过其他子页面调用 getApp()获取实例后,不要私自调用小程序全局的生命周期方法;

  5. 可以通过 var app=getApp()获取小程序的实例。

2.2 注册小程序的页面 page.js

Page()用来注册一个页面,维护该页面的生命周期以及数据。

2.3 公共模块 util.js

公共模块方法需要通过 module.exports对外暴露接口,使用的时候需要利用 require(path),将文件引入。如:

2.4 数据操作

setData()不能直接操作数据,例如 this.data.text="xxxxx"就是错误的。你需要在 this.setData()之中,进行数据的操作。

同时,这里有作用域的问题。比如,需要在">局部函数中使用,就需要 .bind(this)

如果你需要操作全局的数据,你需要在 app.js中进行相应设置,例如:

3. 视图层 WXML

视图层的数据绑定均来自于 Page中的 data,想要修改相应值,你需要用到 this.setData。数据绑定使用两对花括号,将变量名包起来。

3.1 条件渲染

你可以利用 if和 else,在视图层上编写在特定情况下,出现的不同的视图结果。

很多人会将 CSS 中的 display: hidden属性,与 WXML 的这个特性做一个比较。

  • 微信小程序中的 wx:if是惰性的。如果不符合渲染条件,它不会渲染相应部分;

  • 使用 display: hidden时,元素始终渲染,只是视图层上没有显示,用户看不见。

如果你的小程序有元素显示频繁切换的需求,建议你使用 display: hidden,能够为用户提供能顺畅的使用体验。

3.2 列表渲染

相当于让 WXML 处理一个循环。

在 WXML 中,你可以这样来建立一个 for循环:

然后在相应的 JS 中,新建一个数组:

需要注意的是,如果列表中的项需要动态添加到列表中,并希望项目保持原有的特征和状态,那么你应该使用 wx:key

wx:key有两种形式:

  1. 字符串:wx:key="unique"

  2. 保留关键字:wx:key="*this"

3.3 运算

WXML 可以执行简单的运算任务。例如:

也可以做到字符串拼接:

甚至,你可以使用 ...在 WXML 中展开对象。


最后一次编辑于  03-31  (未经腾讯允许,不得转载)
文章已隐藏复制链接赞 0收藏投诉评论

1 个评论

  • Ltt
    Ltt
    03-31

    你好,请勿重复发文章哦~此贴隐藏。保留您的另一篇文章

    03-31
    赞同
    回复