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

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

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

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

微信小程序开发之路(一)相关推荐

  1. 微信小程序开发之路(二)

    由于前段时间比较忙,已经有半个多月没有更新文章了.最近微信小程序频繁更新,越来越开放,所以今天我们将继续探讨小程序. 在微信小程序开发之路(一)中讲到微信小程序的单向绑定以及使用setData()方法 ...

  2. 微信小程序开发之路(十三)正式开工--设计ER图与数据库的创建

    微信小程序开发之路(十三)正式开工–设计ER图数据库的创建 先制作班费公是示功能 我们在项目的 settings.py 文件中找到 DATABASES 配置项,将其信息修改为: DATABASES = ...

  3. 微信小程序开发之路(十一)微信小程序第一个计算器项目搭建(centos8)

    微信小程序开发之路(十一)计算器项目搭建(centos8) pip install django django-admin startproject weixintest cd weixintest ...

  4. 微信小程序开发之路(三)

    微信野心越来越大,如今已经从开始简单的聊天工具发展成了一个互联网生态系统,网罗了目前各大互联网平台所具备的功能,最近IOS端微信上线的"搜一搜"和"看一看"更加 ...

  5. 微信小程序开发之路⑩

    微信小程序设计指南 网址: https://developers.weixin.qq.com/miniprogram/design/#%E5%9B%BE%E6%A0%87 自定义组件 开发者可以将页面 ...

  6. 微信小程序开发之路⑥

    文章目录 37.微信小程序文件操作 38.微信小程序数据缓存(实现页面数据的交换) 39.微信小程序数据传输的方式 40.罗盘 wifi 加速计 37.微信小程序文件操作 文件操作是小程序把文件存储到 ...

  7. 微信小程序开发之路⑦

    文章目录 内存监控 & 一键复制 系统振动.用户截屏.添加联系人 电量监控.系统电话 手机感应器 设置动态导航物条 内存监控 & 一键复制 /*** 生命周期函数--监听页面显示*/o ...

  8. web前端-微信小程序开发学习

    web前端-微信小程序开发学习 1. 小程序的概述 2. 小程序的项目结构 2.1 小程序项目结构分析 2.2 WXML模版 2.3 小程序的宿主环境 3. 组件 3.1 视图容器类组件 3.2 常用 ...

  9. 微信小程序开发入门教程(一)

    背景 作为一个程序猿需要不断的充实自己,不仅要追求知识的深度,也要追求知识的广度,我也一直在这条路上践行,主要学习会让我变得专注,我非常喜欢这样的感觉,学习微信小程序开发也是兴趣使然,希望拿微信小程序 ...

最新文章

  1. 理解Docker——深入引擎室
  2. DBA基础(一)用户授权
  3. java dexclassloader_DexClassLoader加载apk
  4. Openlayers中使用Overlay实现点击要素弹窗并且弹窗随之移动
  5. Python安装与简单使用
  6. Oracle入门(八)之权限
  7. nioqrc oracle,程序停在 readnocancel () from -lib-tls-libpthread.so.0
  8. 制作自己的特色PE----Mr.Zhang
  9. SAO Utils 农历与股票插件
  10. Ubuntu18.04安装GoldenDict词典【词库】
  11. python换零钱有多少种方案_python练习题4.15换硬币(修正)
  12. activity 工作流引擎-流程表介绍
  13. JavaEE简易聊天室(Netbeans:Servlet+Cookie+Session)
  14. Mathlab编程-微积分在Matlab中的解法
  15. linux下如何用gcc编译器生成lst文件?
  16. windows下Graphviz安装及入门教程(附下载链接)
  17. 使用gltf-pipeline转换gltf、glb模型文件
  18. CAD图纸怎么保存为PDF?几个步骤轻松掌握
  19. 从arduino板开始做到阿里云app控制--WeMos D1或ESP8266连接阿里云文章合集及源代码
  20. html加载类失败,css样式为什么会加载失败?

热门文章

  1. Spark1.4启动spark-shell时initializing失败
  2. Druid使用ConfigFilter
  3. ⼤海捞针 —— Scan
  4. html-edm(邮件营销)编写规则
  5. PHP递归创建多级目录(一道面试题的解题过程)
  6. EqualsBuilder和HashCodeBuilder
  7. 漫谈计算摄像学 (二):利用光场实现“先拍照后对焦”
  8. U8 种子ID表 及相关 存储过程
  9. 前后台页面跳转方式搜集
  10. D:\我的文档\收藏夹