小程序实践

项目是否适合移植到小程序上?

小程序由于微信提供了一些组件,在微信中的一些体验确实不错,对于开发来说,由数据驱动的开发模式也是挺爽的。

概要介绍

其实就是类似于 VUE REACT 的 MVVM 模式,专注于数据和逻辑。

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。

官网:微信小程序开发教程

官方:微信小程序联盟

模板层级

请求包装

用户会话处理

实践得到的经验

规则

1.目前打包后的文件不能超过 4M,否则不能上传到微信服务器。

小程序不支持的

1.不支持 sass 语法

2.不支持 window、document,不能使用相关的库,如 jQuery、PreventMoveOverScroll。

3.不支持直接使用 svg 标签开发。image 的 src 放远程 svg 可以,background-image 里也可以。

但是可以使用 canvas 标签(canvas坑:position absolute的层盖不住canvas),可以使用的库:wx-charts(有坑,放在 app.js 中然后在 page 中引用的话,找不到 ringChart 上面的函数,如 ringChart.addEventListener。要直接在 page 中引库。)

4.不支持阻止默认事件,没有preventDefault。

5.没有br 标签。

6.不支持table 表格。

7.不能使用  来增大文字间距。

8.小程序的xxx.wxss 文件 font-face 的 url 不接受 http 地址作为参数,可以接受base64,因此可以先将字体文件下载后,转换为 base64,然后再引用。链接

9.像素单位为 rpx

新特性

2.text 标签认 \n 换行,不能包裹
 标签,会直接输出出来,有点类似textarea。

3.小程序中 :nth-child(n) 是从 0 开始的。

4.switch 标签。但是不能改变大小样式,像老radio 标签一样讨厌。

5.picker 标签。但是在开发者工具中选项不会循环,在安卓手机预览中选项会循环。

6.scroll-view 标签。有滚动条的盒子。要想在进入页面的时候自动滚动到某处,可以使用 scroll-view 的 scroll-into-view 属性,不过一定要在 scroll-view 存在后设置才会生效,尤其是通过 template 引用的时候,比如同时通过 setData 设置使用该 template 和 scroll-into-view 的值,并不会使滚动生效。

7.关于屏幕下拉露底:Android 不会,iPhone 会。可以通过配置解决:disableScroll Boolean false 设置为 true 则页面整体不能上下滚动;只在 page.json 中有效,无法在 app.json 中设置该项。链接

8.template标签

模板的作用域:模板拥有自己的作用域,只能使用 data 传入的数据。

9.在功能按钮上使用catchtap 防止冒泡

10.hidden 参数,控制蒙版的利器

小窍门

1.关于下拉刷新

要在 page.json 中设置enablePullDownRefresh: true

onPullDownRefresh 内要手动stopPullDownRefresh,否则一直在点点点(loading)。

2.page的onload 函数中有参数 options 可以获取路径的 query

3.小程序的支付和微信的支付不是一个 appid,需要后端新开发下单接口

4.wxml 最好在开发者工具编辑(有提示)。js, wxss可以在熟悉的编辑器编辑。

5.小程序中如果赋予的新值是 undefined 的话,根本不会进行赋值,也不会覆盖之前的值。如:

app.setData({

isPaperCollected: finishedQuizList['id'+quizID] || false

})

6.通过多次使用 Object.assign({}) 解决data也模块化后 data 不能深层复制的问题。

Object.assign 不是深层复制。

7.在微信web开发者工具中一定要在动作->设置->勾上“不使用任何代理,勾选后直连网络”,否则老是报“

Failed to load resource: net::ERR_NAME_NOT_RESOLVED”的bug:链接

8.每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。 页面的配置比 app.json 全局配置简单得多,只是设置 app.json 中的 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。页面的 .json 只能设置 window 相关的配置项,以决定本页面的窗口表现,所以无需写window这个键。链接

9.data是在page中设置的,不是在 app.js 中的。不涉及渲染的可以不要放 data 里面。

10.Page.prototype.setData()变更数据同时更新页面数据。

setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值。直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致。单次设置的数据不能超过 1024kB,请尽量避免一次设置过多的数据。

11.wx:if是惰性的,如果在初始渲染条件为false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。

会话管理

微信的网络请求接口 wx.request() 没有携带 Cookies,这让传统基于 Cookies 实现的会话管理不再适用。为了让处理微信小程序的服务能够识别会话,我们会话管理使用weapp-session-client。这需要服务端的支持。基本原理是包装 wx.request 并在 Header 上使用特殊的字段跟踪。

使用时遇到的问题:

1.微信开发者工具报错:Uncaught ReferenceError: regeneratorRuntime is not defined

原因是 Generator 函数不被支持。

解决方法:

* 微信开发者工具关闭ES6转ES5

* 真正解决办法,提供 regeneratorRuntime链接1--链接2

2.题外话:善用 Promise

本项目后端处理会话管理时要求发送请求时不能使用相同的 X-WX-Code发送多次全部header数据,RawData、Signature等,否则报错。

所以使用 weapp-session-client 登录的时候要等login返回之后再发送其他的请求,

小程序加载后立即顺序执行 app.js 和 page.js 里面的配置,但是 wx request 是异步的,所以有可能 page 中的请求开始执行时 app.js 中的 login 还没结束,就会导致 bug。

可以使用个 promise 解决掉。

进阶

1.扩展微信小程序框架功能

2.疑问:微信切换账号会不会销毁小程序

3.检查TLS版本的问题

http://www.dongcoder.com/detail-410653.html

解决方法:微信开发者工具勾选开发时不检查检查TLS版本或后端配置

4.蓝牙、震动的调用

5.蒙版处理

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,193评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,306评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,130评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,110评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,118评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,085评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,007评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,844评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,283评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,508评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,395评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,985评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,630评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,797评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,653评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,553评论 2 352

推荐阅读更多精彩内容