今天来为大家讲讲微信小程序,大概讲一下在开发小程序时需要注意的几个点。在开始之前先了解下微信小程序是个什么东西吧。
微信小程序(weixinxiaochengxu),简称小程序,缩写XCX,英文名mini program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
以上是百度百科中对微信小程序的定义。简单来讲,微信小程序是为了优化用户体验,相对于原生App来说它具有“用完即走,无需安装”的优点,而相对于传统网页来说又具有加载速度更快并且更安全的优点。总之,本人挺喜欢小程序的,看好它。
好了,言归正传,拿好笔划重点咯~~~
一、微信小程序属单向绑定,而并非双向绑定
什么是单向绑定?什么是双向绑定?
单向绑定是MVVM框架中的一种数据处理模式,它是将Model(也就是数据层)中的数据绑定到View(也就是表现层),当JS中的数据发生改变时,View也会相应发生改变。而双向绑定则更加强大,当View中数据发生改变时,JS中的数据也会响应发生改变,一般是用在表单当中。
个人觉得微信小程序长得非常像最近特别火的前端框架Vue.js,Vue小而轻,用起来特别方便,而且很容易入门,属双向绑定。但是小程序虽然表面长得跟Vue很像,却只能单向绑定数据,Model改变View则跟着改变,View改变Model却不变。
那问题来了,有时候表单类控件内容发生改变时需要在Model中相应做出改变时怎么处理呢?
这个其实也不难,对小程序开发文档相对熟悉的应该知道,表单类控件一般都带有类似bindinput和bindchange之类的事件处理属性,这样就可以用这些属性绑定自定义函数来改变Model中的数据了。
二、不能通过this.key=value的方式来直接改变Model中的内容进而改变View
这也是小程序与Vue的区别之一。Vue可以直接通过this.key=value的方式直接改变View,而小程序只能通过this.setData({ key: value })的方式来改变View。但是需要注意的是,小程序当中也可以使用this.key=value,但是并不能改变Model,只是在Page对象中创建一个新的属性并赋值而已,一般可以通过此方式来实现Page对象属性之间的通信。简单举个栗子吧~~~
Page({
data:{
name: "" // [1]
},
onLoad(){ //页面加载时执行
this.setName();
this.getName();
},
name: "", // [2]
//自定义方法,此写法属ES6语法
setName(){
this.setData({
//此处可以改变 [1] 处的name的值,并在View中渲染相应值
name: "Hello World!"
});
//此处不能改变 [1] 处的name的值,改变的只是 [2] 处name 的值
this.name = "Hello Wechat!";
},
getName(){
console.log( this.data.name ); // "Hello World!"
console.log( this.name ); // "Hello Wechat!"
}
});
好了,今天就先分享到这里,后面会跟大家分享更多微信小程序开发的知识哦~~~
本文为原创文章,转载请注明出处,谢谢!