微信小程序开发之路(一)

今天来为大家讲讲微信小程序,大概讲一下在开发小程序时需要注意的几个点。在开始之前先了解下微信小程序是个什么东西吧。

微信小程序(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!"
  }
});

好了,今天就先分享到这里,后面会跟大家分享更多微信小程序开发的知识哦~~~

本文为原创文章,转载请注明出处,谢谢!

上一篇:call()与apply()的区别


下一篇:纯CSS七大居中方法