搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 知晓程序 > 开发 | 小程序开发有哪些坑?这份笔记都整理出来了

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

知晓程序 2017-11-28
知晓程序注:
即使你认为小程序开发很简单,也无法否认小程序开发中,仍然有许多需要注意的地方。稍不注意,就会产生意料之外的问题。
知晓程序(微信号 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」,获取全网首本《微信小程序入门指南》。

  • 在微信后台回复「加群」,加入「一起发现小程序」微信交流群。

  • 在微信后台回复任意关键词,还能获得相关小程序推荐,赶紧试试吧!

▽ 点击「阅读原文」,发现更多优质小程序

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《开发 | 小程序开发有哪些坑?这份笔记都整理出来了》的版权归原作者「知晓程序」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注知晓程序微信公众号

知晓程序微信公众号:zxcx0101

知晓程序

手机扫描上方二维码即可关注知晓程序微信公众号

知晓程序最新文章

精品公众号随机推荐

下一篇 >>

Canvas与图片压缩