用户工具

站点工具


mina:code_composition

差别

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

两侧同时换到之前的修订记录前一修订版
后一修订版
前一修订版
mina:code_composition [2020/08/22 22:40] – [代码案例] sabertoymina:code_composition [未知日期] (当前版本) – 外部编辑 (未知日期) 127.0.0.1
行 201: 行 201:
  
 仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if/else, for等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达。[[https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/|WXML]] \\ 仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if/else, for等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达。[[https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/|WXML]] \\
 +
 +=== - 双向绑定语法 ===
 +
 +<code xml>
 +<input value="{{value}}" />
 +</code>
 +
 +如果使用 this.setData({ value: 'leaf' }) 来更新 value ,this.data.value 和输入框的中显示的值都会被更新为 leaf ;但如果用户修改了输入框里的值,却不会同时改变 this.data.value 。
 +
 +如果需要在用户输入的同时改变 this.data.value ,需要借助简易双向绑定机制。此时,可以在对应项目之前加入 model: 前缀
 +
 +<code xml>
 +<input model:value="{{value}}" />
 +</code>
 +
 +双向绑定的表达式有如下限制:
 +
 +只能是一个<wrap hi>单一字段</wrap>的绑定
 +
 +
 +
 +
  
 ==== - 列表渲染 ==== ==== - 列表渲染 ====
行 401: 行 423:
  
 用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。 用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。
-==== 代码案例 ====+==== 代码案例 ====
  
 编写 JS 脚本文件来<wrap em>处理用户的操作</wrap>。[[https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html|WXML - 事件]] \\ 编写 JS 脚本文件来<wrap em>处理用户的操作</wrap>。[[https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html|WXML - 事件]] \\
行 422: 行 444:
 </code> </code>
  
-==== 什么是事件 ====+==== 什么是事件 ====
  
  [[https://www.w3cschool.cn/weixinapp/weixinapp-event.html|微信小程序 事件]] \\  [[https://www.w3cschool.cn/weixinapp/weixinapp-event.html|微信小程序 事件]] \\
行 436: 行 458:
  
 <code xml> <code xml>
-//index.wxml+<!--index.wxml-->
 <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view> <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
 </code> </code>
行 488: 行 510:
 </code> </code>
  
-==== 事件分类 ====+==== 事件分类 ====
  
 事件分为冒泡事件和非冒泡事件 \\ 事件分为冒泡事件和非冒泡事件 \\
行 507: 行 529:
 注:除上表之外的其他组件自定义事件都是非冒泡事件,如[[https://www.w3cschool.cn/weixinapp/m8x71q8z.html|<form/>]]的submit事件,[[https://www.w3cschool.cn/weixinapp/3glu1q92.html|<input/>]]的input事件,<scroll-view/>的scroll事件,(详见各个[[https://www.w3cschool.cn/weixinapp/itz51q8o.html|组件]]) 注:除上表之外的其他组件自定义事件都是非冒泡事件,如[[https://www.w3cschool.cn/weixinapp/m8x71q8z.html|<form/>]]的submit事件,[[https://www.w3cschool.cn/weixinapp/3glu1q92.html|<input/>]]的input事件,<scroll-view/>的scroll事件,(详见各个[[https://www.w3cschool.cn/weixinapp/itz51q8o.html|组件]])
  
-==== 事件绑定 ====+==== 事件绑定 ====
  
 事件绑定的写法同组件的属性,以key、value的形式。\\ 事件绑定的写法同组件的属性,以key、value的形式。\\
行 528: 行 550:
 </code> </code>
  
-如在边这个例子中,点击inner view会先后触发handleTap3和handleTap2(因为tap事件会冒泡到middle view,而middle view阻止了tap事件冒泡,不再向父节点传递),点击middle view会触发handleTap2,点击outter view会触发handleTap1。+如在边这个例子中,点击inner view会先后触发handleTap3和handleTap2(因为tap事件会冒泡到middle view,而middle view阻止了tap事件冒泡,不再向父节点传递),点击middle view会触发handleTap2,点击outter view会触发handleTap1。
  
-==== 事件对象 ====+:!: mut-bind 来绑定事件。一个 mut-bind 触发后,如果事件冒泡到其他节点上,其他节点上的 mut-bind 绑定函数不会被触发,但 bind 绑定函数和 catch 绑定函数依旧会被触发。 
 + 
 +==== - 数据绑定 ==== 
 + 
 +<code javascript> 
 +<view bindtap="{{ handlerName }}"> 
 +    Click here! 
 +</view> 
 +</code>  
 + 
 +  * 此时,页面的 this.data.handlerName 必须是一个字符串,指定事件处理函数名; 
 +  * 如果它是个空字符串,则这个绑定会失效。 
 + 
 +==== - 事件的捕获阶段 ==== 
 + 
 +捕获阶段位于冒泡阶段之前,且在捕获阶段中,事件到达节点的顺序与冒泡阶段恰好相反。 
 + 
 +可以采用''capture-bind''、''capture-catch''关键字,后者将中断捕获阶段和取消冒泡阶段。 
 + 
 +在下面的代码中,点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。 
 + 
 +<code xml> 
 +<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2"> 
 +  outer view 
 +  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4"> 
 +    inner view 
 +  </view> 
 +</view> 
 +</code> 
 + 
 + 
 + 
 +==== - 事件对象 ====
  
 如无特殊说明,当组件触发事件时,逻辑层绑定该事件的<wrap hi>处理函数</wrap>会收到一个<wrap hi>事件对象</wrap>。 \\ 如无特殊说明,当组件触发事件时,逻辑层绑定该事件的<wrap hi>处理函数</wrap>会收到一个<wrap hi>事件对象</wrap>。 \\
行 563: 行 617:
  
 <code xml> <code xml>
-<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>+<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap">  
 +DataSet Test  
 +</view>
 </code> </code>
  
行 591: 行 647:
 |  touches    | Array | 触摸事件,当前停留在屏幕中的触摸点信息的数组         | |  touches    | Array | 触摸事件,当前停留在屏幕中的触摸点信息的数组         |
 |   changedTouches     | Object   | 触摸事件,当前变化的触摸点信息的数组   | |   changedTouches     | Object   | 触摸事件,当前变化的触摸点信息的数组   |
 +
 +
 +===== - sitemap 配置 =====
 +
 +小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。[[https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html|[官方文档]sitemap 配置]]
 +
 +<code>
 +//所有页面都会被微信索引(默认情况)
 +{
 +  "rules":[{
 +    "action": "allow", //允许
 +    "page": "*"
 +  }]
 +}
 +</code>
 +
 +<code>
 +//配置 path/to/page 页面被索引,其余页面不被索引
 +{
 +{
 +  "rules":[{
 +    "action": "allow", //允许
 +    "page": "path/to/page"
 +  }, {
 +    "action": "disallow",//不允许
 +    "page": "*"
 +  }]
 +}
 +}
 +</code>
  
mina/code_composition.1598107200.txt.gz · 最后更改: 2020/08/22 22:40 由 sabertoy