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

知晓程序注:

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

知晓程序(微信号 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 条评论
登录 后参与评论

相关文章

来自专栏偏前端工程师的驿站

CMD魔法堂:支持显示UTF8编码的中文

一、前言                                     在Unbuntu中用sqlite3-command-line操作sqlite3...

19510
来自专栏JetpropelledSnake

Vue学习笔记之Vue知识点补充

在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同...

1012
来自专栏我是业余自学C/C++的

python3网络爬虫(抓取文字信息)

8294
来自专栏君赏技术博客

一键替换Key Mac软件的制作教程第一篇

我们要选择macOS的平台选择Cocoa Application的工程模板,点击Next.

1151
来自专栏Golang语言社区

Golang语言社区--golang 进度下载文件

大家好,我是Golang社区主编彬哥,本篇给大家转载一篇关于文件下载相关的文章。

4536
来自专栏V站

六个有用的 PHP 片段或技巧

网上有很多 PHP 代码片段可以提高开发效率,也可以学习一下其中的技巧而应用在自己的项目中,下面就精选了几个比较有用的 PHP 片段。

1992
来自专栏angularejs学习篇

angularjs学习第四天笔记(第一篇:简单的表单验证)

您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指...

952
来自专栏流浪猫的golang

golang与redis的基本使用

上面是golang 连接redis 的基本代码。连接redis 数据库 方式跟net包连接网络方式样子很想。 认证:如果redis 有密码 ,在连接成功后必...

1082
来自专栏听雨堂

微信小程序的同步操作

小程序里,大多数操作都是异步操作,一些重要的操作,如从网上获取重要变量值,必须要保证有值,后续操作才有意义。但异步操作,又必须把处理放到回调中,代码可读性降低,...

43110
来自专栏ShaoYL

Git在Xcode中的配置与使用常见问题总结

41611

扫码关注云+社区