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


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的写法基础分析
Jan 17 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 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下载CSS文件中的图片的代码
2013/09/24 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
Vuex简单入门
2017/04/19 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
python简单分割文件的方法
2015/07/30 Python
Python字符串切片操作知识详解
2016/03/28 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
Python3多线程操作简单示例
2018/05/22 Python
详解python单元测试框架unittest
2018/07/02 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
社区工作者思想汇报
2014/01/13 职场文书
服务生自我鉴定
2014/01/22 职场文书
优秀团员个人事迹材料
2014/01/29 职场文书
文艺晚会主持词
2014/03/24 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
档案工作汇报材料
2014/08/21 职场文书
迎新生欢迎词
2015/01/23 职场文书
教师求职简历自我评价
2015/03/10 职场文书
保险公司增员口号
2015/12/25 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书