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


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 相关文章推荐
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
javascript自定义事件功能与用法实例分析
Nov 08 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 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
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
Angularjs 基础入门
2014/12/26 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
原生js实现购物车
2020/09/23 Javascript
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Python获取邮件地址的方法
2015/07/10 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
Python 中Pickle库的使用详解
2018/02/24 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
个人生活学习自我评价范文
2013/11/26 职场文书
补充协议书范本
2014/04/23 职场文书
毕业设计致谢词
2015/05/14 职场文书
班级班风口号大全
2015/12/25 职场文书
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server
nginx七层负载均衡配置详解
2022/07/15 Servers