随笔分类 -  微信小程序

双向绑定
摘要：简易双向绑定 1⃣️当需要在用户输入的同时改变this.data.myvalue，需要借助简易双向绑定机制，可以在对应项目之前加入model：前缀 2⃣️这样，当输入框的值被改变了，this.data.myvalue也会同时改变。 //mycomponent.wxml <label>用户名：</la 阅读全文
posted @ 2021-12-30 14:11 shanlu 阅读(58) 评论(0) 推荐(0)
小程序模块化语法
摘要：支持commonJS语法 1⃣️CommonJS规定，每个模块内部有两个变量可以使用，require和module 2⃣️require用来加载某个模块，读入并执行一个js文件，然后返回该模块的exports对象。 3⃣️module代表当前模块，是一个对象，保存了当前模块的信息。exports是m 阅读全文
posted @ 2021-12-30 13:53 shanlu 阅读(65) 评论(0) 推荐(0)
界面常见的交互反馈
摘要：触摸反馈 小程序的view容器组件和button组件提供了hover-class属性，触摸时会往该组件加上对应的class改变组件的样式 <button hover-class="hover">点击button</button> <button hover-class="hover">点击view< 阅读全文
posted @ 2020-03-25 15:12 shanlu 阅读(600) 评论(0) 推荐(0)
事件
摘要：<view id="tapTest" data-hi="WeChat" bindtap="tapName">bindtap</view> Page({ tapName:function(event){ console.log(event); }, }) 以 bindtap 事件为例，事件是通过 bi 阅读全文
posted @ 2020-03-25 13:27 shanlu 阅读(112) 评论(0) 推荐(0)
渲染“Hello World”（将脚本数据渲染在界面上）
摘要：WXML模板使用 {{ }} 的语法绑定一个 msg 的变量 <view>{{msg}}</view> JS 脚本中使用 this.setData 方法把 msg 字段设置成“ Hello World ” 。 总结： ①渲染层和数据相关（数据驱动） ②逻辑层负责产生、处理数据 ③逻辑层通过 Page 阅读全文
posted @ 2020-03-24 15:47 shanlu 阅读(144) 评论(0) 推荐(0)
引用（import 和 include）
摘要：WXML 提供两种文件引用方式import和include。 import 可以在该文件中使用目标文件定义的 template： 建立一个 template 目录，在 template.wxml 中定义一个 name=student 的模板： <!--pages/template/template. 阅读全文
posted @ 2020-03-24 14:04 shanlu 阅读(802) 评论(0) 推荐(0)
模板 template
摘要：WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。然后在 <template/> 内定义代码片段，使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入， <template is="student_tem 阅读全文
posted @ 2020-03-24 13:34 shanlu 阅读(166) 评论(0) 推荐(0)
列表渲染
摘要：在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item <view wx:for="{{students}}"> {{index}}:{{item}} </view> <view w 阅读全文
posted @ 2020-03-24 13:16 shanlu 阅读(597) 评论(0) 推荐(0)
条件渲染
摘要：WXML 中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块，使用 wx:elif 和 wx:else 来添加一个 else 块： <!-- data:{ length:1 } -> <view wx:if="{{length>5}}">A</view> <view w 阅读全文
posted @ 2020-03-24 12:11 shanlu 阅读(148) 评论(0) 推荐(0)