开发 | 小程序开发有哪些坑?这份笔记都整理出来了

知晓程序注:

即使你认为小程序开发很简单,也无法否认小程序开发中,仍然有许多需要注意的地方。稍不注意,就会产生意料之外的问题。

知晓程序(微信号 zxcx0101)今天推荐的这篇文章,是作者通过亲身开发,找到了微信小程序开发中的坑,并在文章给出了解决方案。希望能够帮助开发小程序的你,避开这些坑。

文 | 泡芙小姐 110

1. JSON 配置文件

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

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

2. JS 逻辑层

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

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 条件渲染

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

很多人会将 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 中展开对象。

3.4 模板

name 定义组件模版的名称,引用模版的时候使用 is 属性指定模版的名字,is 可以进行简单的三目运算,需要传入模版需要的 data 数据。

因为模版拥有自己的作用域,所以只能使用 data 传入数据,而不接受双花括号的写法。

3.5 公共模块的引用

WXML 提供 importinclude 两种文件引用方式。

import 有作用域的概念,不能多重引用。

include 就可以多重引用了。

3.6 事件

名称以 bind 开头的事件不阻止冒泡,名称以 catch 开头的事件冒泡是阻止的。如 bindTapcatchTab

在 WXML 中,可以使用 dataset 定义 data 中的数据,会通过事件传递。它的事件以 data- 开头,多个单词以 - 链接,如 data-a-b

需要注意的是,使用这种方式定义的变量不能有大写。它会自动转成驼峰命名,调取的时候去驼峰命名的名字。

4. WXSS

WXSS 的用法类似于 CSS,并在 CSS 的基础上,扩展了 rpx 尺寸单位和样式导入功能。

WXSS 可以使用内联样式,但这样会影响渲染速度。

每个页面自己的 page.wxss 样式表,会覆盖全局样式表 app.wxss

原文地址:http://www.jianshu.com/p/f8f85757e90d

往期精选文章

本文由知晓程序授权转载,关注微信号 zxcx0101,可获得以下内容和服务:

  • 在微信后台回复「1228」,获取全网首本《微信小程序入门指南》。
  • 在微信后台回复「加群」,加入「一起发现小程序」微信交流群。
  • 在微信后台回复任意关键词,还能获得相关小程序推荐,赶紧试试吧!

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-02-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏好好学习吧

js实现html表格<td>标签中带换行的文本显示出换行效果

如下内容中我写了几行,但是表格中并未按行显示,换行符反而变成了空格,于是想自己转换下

1123
来自专栏数据小魔方

符号图表——特殊字体柱形图

今天跟大家分享的是升级版的符号图表——特殊字体柱形图! ▽▼▽ 忘了是那一期,跟大家分享过如何用特殊字体+rept函数做条形图,今天要跟大家分享的符号图表同样是...

3524
来自专栏mySoul

jQuery(一)

jquery为一种库,属于最基础的一个库,伴随着h5的到来,很多jquery的规则直接融入到了规则本身了,直接使用原生的js也能达到相同的目的。虽然如此,不过依...

1374
来自专栏阮一峰的网络日志

Javascript文件加载:LABjs和RequireJS

传统上,加载Javascript文件都是使用<script>标签。 就像下面这样:   <script type="text/javascript" src=...

3224
来自专栏IT技术

vue常见操作使用手法

webpack + vue + element(mint-ui, etc...) + axois (vue-resource) + less-loader+ ....

611
来自专栏积累沉淀

JavaScript BOM浏览器对象模型

BOM  1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能。BOM缺少...

1906
来自专栏小李刀刀的专栏

在WebKit中并行加载外部脚本译:

作者:Tony Gentilcore 原文:http://webkit.org/blog/1395/running-scripts-in-webkit/ Web...

3407
来自专栏Flutter入门到实战

一行代码快速解耦Application逻辑,让Application更简洁好维护

版权声明:本文为博主原创文章,未经博主允许不得转载。https://www.jianshu.com/p/23b9ba9b685d

583
来自专栏SpringBoot

Jquery 常见案例

版权声明:本文为博主原创文章,未经博主允许不得转载。

571
来自专栏阮一峰的网络日志

URL的井号

在我印象中,这是主流网站第一次将"#"大规模用于直接与用户交互的关键URL中。这表明井号(Hash)的作用正在被重新认识。本文根据HttpWatch的文章,整理...

802

扫码关注云+社区