小程序开发文档说明

小程序开发说明文档

一、 目录结构:

• pages目录 (小程序页面的集合)
  
  

  • index 目录(index页面)
    
    

    • index.js (页面的私有程序)

      存在一个Page对象, 其指定页面的初始数据、生命周期回调、事件处理函数等

      参数示例:
      data: 页面的初始数据
      onLoad: 监听页面加载
      onShow: 监听页面显示
      onReady: 监听页面初次渲染完成
      onHide: 监听页面隐藏
      onUnload: 监听页面卸载
      onPullDownRefresh: 监听用户下拉动作
      onReachBottom: 页面上拉触底事件的处理函数
      onShareAppMessage: 用户点击右上角转发

      
      

    • index.json (页面的私有配置)

      权重高于全局配置,在页面有特殊需求时,可以覆盖全局配置
      基本参数与全局配置相同(部分特殊的全局参数除外)

    • index.wxml (页面的dom结构)

      WXML（WeiXin Markup Language）是框架设计的一套标签语言
      - 基本标签:
      view 与div等价,都是无意义的盒子容器,但在浏览器中还是会以dv渲染
      
      
      - 数据绑定:
      > 小程序的基本语法与vue相似,数据绑定也是类似

      1. 通过 {{ }} 来定义,会直接绑定 page 对象中, data 里面的值.也可以叫做文本插值
      2. 在属性中,即便是 '' 或 "" 内的 {{ }},也是可以进行数据绑定的.
      3. 小程序定义了关键字 true 和 false,可以在 {{ }} 内直接使用该布尔值
      4. 可以在 {{ }} 中进行运算,包括:三元运算 算术运算 逻辑判断 字符串运算 操作数组 操作对象 等
         
         示例代码:

      // .wxml
       {{message}} 
       
       
      
      
      // .js
      Page({
        data: {
          message: 'Hello MINA!',
          id: 0
        }
      })
      

      
      

      • 列表渲染:

        在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

        示例代码:

        // .wxml 文件
        
        // block是一个无意义的盒子,可以承载wx:for等指令,区别于view,该标签不会在页面中显示
        
          // index是小程序返回的当前循环的索引值, item为当前值
          {{index}}: {{item.message}}
        
        
        // .js 文件
        Page({
            data: {
              array: [
                {message: 'foo'}, 
                {message: 'bar'}
              ]
            }
          })
        //------------------------------------------------
        // .wxml 文件
        
        // wx:for 也可以嵌套，下边是一个九九乘法表:
        // 循环嵌套会导致 item名 或 index名 的重复,可以手动修改: wx:for-item wx:for-index
        
          
            
              {{i}} * {{j}} = {{i * j}}
            
          
        
        

        
        

      • 条件渲染:

        • wx:if(新增或删除)

          wx:if 来判断是否需要渲染该代码块,具体表现为新增和删除 dom 结构

          示例代码:

           True 
          
          // wx:if 有额外的 wx:else,和 js里的 if elseif else 一样
           1 
           2 
           3 
            
          

        • hidden(显示或隐藏)

          hidden 来判断是否需要显示该代码块,具体表现为显示或隐藏 dom 结构

          示例代码:

          
          

      • 模板(template):

        WXML提供模板功能，可以在模板中定义代码片段，然后在不同的地方调用。
        模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 模块。

        示例代码:

        // 定义模板
        // 使用 name 属性，作为模板的名字,然后在