微信小程序开发之路(一)
今天来为大家讲讲微信小程序,大概讲一下在开发小程序时需要注意的几个点。在开始之前先了解下微信小程序是个什么东西吧。
微信小程序(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!"}
});
好了,今天就先分享到这里,后面会跟大家分享更多微信小程序开发的知识哦~~~
本文为原创文章,转载请注明出处,谢谢!
微信小程序开发之路(一)相关推荐
- 微信小程序开发之路(二)
由于前段时间比较忙,已经有半个多月没有更新文章了.最近微信小程序频繁更新,越来越开放,所以今天我们将继续探讨小程序. 在微信小程序开发之路(一)中讲到微信小程序的单向绑定以及使用setData()方法 ...
- 微信小程序开发之路(十三)正式开工--设计ER图与数据库的创建
微信小程序开发之路(十三)正式开工–设计ER图数据库的创建 先制作班费公是示功能 我们在项目的 settings.py 文件中找到 DATABASES 配置项,将其信息修改为: DATABASES = ...
- 微信小程序开发之路(十一)微信小程序第一个计算器项目搭建(centos8)
微信小程序开发之路(十一)计算器项目搭建(centos8) pip install django django-admin startproject weixintest cd weixintest ...
- 微信小程序开发之路(三)
微信野心越来越大,如今已经从开始简单的聊天工具发展成了一个互联网生态系统,网罗了目前各大互联网平台所具备的功能,最近IOS端微信上线的"搜一搜"和"看一看"更加 ...
- 微信小程序开发之路⑩
微信小程序设计指南 网址: https://developers.weixin.qq.com/miniprogram/design/#%E5%9B%BE%E6%A0%87 自定义组件 开发者可以将页面 ...
- 微信小程序开发之路⑥
文章目录 37.微信小程序文件操作 38.微信小程序数据缓存(实现页面数据的交换) 39.微信小程序数据传输的方式 40.罗盘 wifi 加速计 37.微信小程序文件操作 文件操作是小程序把文件存储到 ...
- 微信小程序开发之路⑦
文章目录 内存监控 & 一键复制 系统振动.用户截屏.添加联系人 电量监控.系统电话 手机感应器 设置动态导航物条 内存监控 & 一键复制 /*** 生命周期函数--监听页面显示*/o ...
- web前端-微信小程序开发学习
web前端-微信小程序开发学习 1. 小程序的概述 2. 小程序的项目结构 2.1 小程序项目结构分析 2.2 WXML模版 2.3 小程序的宿主环境 3. 组件 3.1 视图容器类组件 3.2 常用 ...
- 微信小程序开发入门教程(一)
背景 作为一个程序猿需要不断的充实自己,不仅要追求知识的深度,也要追求知识的广度,我也一直在这条路上践行,主要学习会让我变得专注,我非常喜欢这样的感觉,学习微信小程序开发也是兴趣使然,希望拿微信小程序 ...
最新文章
- 理解Docker——深入引擎室
- DBA基础(一)用户授权
- java dexclassloader_DexClassLoader加载apk
- Openlayers中使用Overlay实现点击要素弹窗并且弹窗随之移动
- Python安装与简单使用
- Oracle入门(八)之权限
- nioqrc oracle,程序停在 readnocancel () from -lib-tls-libpthread.so.0
- 制作自己的特色PE----Mr.Zhang
- SAO Utils 农历与股票插件
- Ubuntu18.04安装GoldenDict词典【词库】
- python换零钱有多少种方案_python练习题4.15换硬币(修正)
- activity 工作流引擎-流程表介绍
- JavaEE简易聊天室(Netbeans:Servlet+Cookie+Session)
- Mathlab编程-微积分在Matlab中的解法
- linux下如何用gcc编译器生成lst文件?
- windows下Graphviz安装及入门教程(附下载链接)
- 使用gltf-pipeline转换gltf、glb模型文件
- CAD图纸怎么保存为PDF?几个步骤轻松掌握
- 从arduino板开始做到阿里云app控制--WeMos D1或ESP8266连接阿里云文章合集及源代码
- html加载类失败,css样式为什么会加载失败?