小程序学习笔记

小程序代码组成

• JSON配置
  • project.config.json：小程序工具配置
  • app.json：小程序的全局配置，包括页面路径和页面样式等，静态配置，无法在运行过程中动态更新JSON配置文件
  • page.json：页面配置，可覆盖app.json
  • json语法
    • {“key”:“value”}
    • 不能使用注释
• WXML模板
  • 与HTML相似
  • 必须严格闭合
  • 动态绑定
    • {{}}绑定WXML文件和js文件中data属性
    • 属性值的动态绑定必须在双引号中
    • 大小写敏感
    • 没有定义的或者是undefined不会被同步
    • 可在其中进行简单的逻辑运算
  • 条件逻辑
    • wx:if/wx:else：是否渲染该代码块
  • 循环渲染
    • wx:for：循环
    • wx:for-item指定数组下标变量名
    • wx:key：必须要有，指定循环的key
  • 注意

    • 一般循环会用block进行包裹，但block是不能指定样式的

    • 需要给循环的内容绑定函数时，在内容的view里写bindtap以及data-index，在js中使用index=e.currentTarget.dataset.index获取点击的是第几个内容，如下所示。

      <block wx:for="{{list}}" wx:key="index">
      	<view data-index="{{index}}" bindtap="click>{{item}}</view>
      </block>
      

      click:function(e){
      	const index = e.currentTarget.dataset.index
      	console.log(index)
      }
      

    • {{}}可以用于绑定数据和简单的计算，但在动态设置背景图片时（背景图片只能写到WXML的style里），使用background:url({{ifone===“one”?one:two}})，将只读取two，所以要将动态的改变写在js中赋给一个变量，在WXML只读取变量。

    • 输入框中的双向绑定：model:value="{{content}}"。

    • 某一部分条件显示：wx:if="{{}}“或者hidden=”{{}}"，注意wx:if为true时显示，hidden为true时不显示。

• WXSS样式
  • 与CSS相似
• JS
  • 由data和自定义函数及生命周期函数组成。