微信小程序之数据绑定原理解析


Posted in Javascript onAugust 14, 2019

最近在帮朋友写个小程序,本人小白一枚,但是好在计算机科班出身,有些概念一看还是明白的,只是之前没实际写过程序。于是最近看了好多资料和视频,不得不说,对于小白来讲,还是有点难度,但是不大。

通过最近看资料和别人的视频,总结一下:

1.页面布局,先画好。都是盒子,需要几个盒子,你就先画几个盒子。比如下面这个页面:

微信小程序之数据绑定原理解析

红色盒子

浅蓝盒子

绿色盒子(这个绿色盒子里又可以切分成两个盒子:白色字体较大一个盒子,白色字体较小一个盒子)

蓝色盒子

2.数据先静态,后动态

简单的说就是刚开始,你可以直接先往页面里塞静态数据,然后调试样式,样式搞定了,就可以把静态数据换成动态数据了。换动态数据呢,又可以分为两步,大神都是一步到位的,对于我这种小白来说,还是一步一个脚印来搞,比较放心。

比如下面这个页面:

静态数据

<view>
<!-- 顶部用户信息 -->
<view class="user-info">
 <view class="avatar"><image mode="widthFix" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565610447105&di=25b2b91e4ebe7831e13edb975cb0b669&imgtype=0&src=http%3A%2F%2Fimg.tukexw.com%2Fimg%2F2c99a00e77f69be1.jpg"></image></view>
 <view class="user-name">UncleBen</view>
</view>
 <!-- 订单、地址管理等常用设置 -->
 <view class="my-order">我的订单</view>
 <view class="my-address">地址管理</view>
 <view class="my-fav">我的收藏</view>
 <view class="my-invite">我的邀请</view>
 <view class="my-suggestion">意见反馈</view>
 <view class="my-service">联系客服</view> 
</view>
</view>

调试好之后,可以把数据放到js文件的data里,实现模拟动态数据:

wxml文件代码如下:

<view>
<!-- 顶部用户信息 -->
<view class="user-info">
 <view class="avatar"><image mode="widthFix" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565610447105&di=25b2b91e4ebe7831e13edb975cb0b669&imgtype=0&src=http%3A%2F%2Fimg.tukexw.com%2Fimg%2F2c99a00e77f69be1.jpg"></image></view>
 <view class="user-name">UncleBen</view>
</view>
 <!-- 订单、地址管理等常用设置 -->
<view class="my-settings">
 <view class="my-setting" wx:for="{{mySettings}}" wx:key="key">
  <view class="my-setting-icon"><image src="{{item.settingimg}}"></image></view>
  <view class="my-setting-name">{{item.settingname}}</view>
 </view>
</view>
</view>

js文件代码:

/**
  * 页面的初始数据
  */
 data: {
  mySettings:[{
   settingimg:'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/2b701b3c2885c632f7d1a1b2dd5c694f4056975118f2bb44d68ff41d4023dc9538780a56d685b2343cacca669408e9bd?pictype=scale&from=30013&version=3.3.3.3&uin=522083376&fname=my-order.png&size=750',
   settingname:'我的订单'
  },
   {
    settingimg: 'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/f5889b126abc482fe16d161e57b3ae63f5411f1af90bcec6c2e542b1ec93ce66eea7eaf3e71d015bee94fec4b3a44367?pictype=scale&from=30013&version=3.3.3.3&uin=522083376&fname=address.png&size=750',
    settingname: '地址管理'
  },
   {
    settingimg: 'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/2b2fe155ca9d89c8161ebff210496b73c5190506a54395eaeff1791b9227f5e62e69be2a963296596785107726b62435?pictype=scale&from=30013&version=3.3.3.3&uin=522083376&fname=fav.png&size=750',
    settingname: '我的收藏'
  },
   {
    settingimg: 'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/3951d94372e059873eb39c3bc9229cc961c8d1fcd8a1e7e60528751b701e5d646f10ec610ee04ede4e698dd2070a34de?pictype=scale&from=30013&version=3.3.3.3&uin=522083376&fname=invite.png&size=750',
    settingname: '我的邀请'
  },
   {
    settingimg: 'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/1317fcb0bbd2322236467b56dcac81c6437aaf44f7770d676164eb96b8b79e92ef9c296e2292cc64de65e841d2cd9e0f?pictype=scale&from=30013&version=3.3.3.3&uin=522083376&fname=advice.png&size=750',
    settingname: '意见反馈'
  },
   {
    settingimg: 'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/89eb4773cccc56faffb3f9537c62347eefeac067deb86446812199c2bd6185c922c3534adeafd1f3610b076b6ac88b11?pictype=scale&from=30013&version=3.3.3.3&uin=522083376&fname=service.png&size=750',
    settingname: '联系客服'
  }]

 },

听同事说如果是在实际项目环境中,数据都是直接请求数据库或者API的,等看到这一知识点的时候再说吧!暂时到这里。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页打开自动最大化的js代码
Aug 22 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
javascrpt密码强度校验函数详解
Mar 18 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 #Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 #Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 #Javascript
vue filter 完美时间日期格式的代码
Aug 14 #Javascript
如何对react hooks进行单元测试的方法
Aug 14 #Javascript
vue 中 命名视图的用法实例详解
Aug 14 #Javascript
详解vue 命名视图
Aug 14 #Javascript
You might like
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
用PHP读取超大文件的实例代码
2012/04/01 PHP
php Calender(日历)代码分享
2014/01/03 PHP
php查看网页源代码的方法
2015/03/13 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
img标签中onerror用法
2009/08/13 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
django url到views参数传递的实例
2019/07/19 Python
Python中print函数简单使用总结
2019/08/05 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
控制工程专业个人求职信
2013/09/25 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
2016年春节慰问信息
2015/03/25 职场文书
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers