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

知晓程序注:

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

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

相关文章

来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2526
来自专栏杨龙飞前端

scrollto 到指定位置

2494
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2152
来自专栏跟着阿笨一起玩NET

c#实现打印功能

2702
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

6768
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2060
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏C#

DotNet加密方式解析--非对称加密

    新年新气象,也希望新年可以挣大钱。不管今年年底会不会跟去年一样,满怀抱负却又壮志未酬。(不过没事,我已为各位卜上一卦,卦象显示各位都能挣钱...)...

4868
来自专栏落花落雨不落叶

canvas画简单电路图

61011
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2567

扫码关注云+社区