微信小程序 框架结构

配置

全局配置

• 全局配置在app.json目录下进行配置，其中必须包含属性pages，给出每个页面文件的路径。
• 还可以用window配置状态栏、导航条、标题、窗口背景颜色等信息。tabBar定义导航栏信息。详见官方文档

页面配置

• 每个单独的页面可以在其.json文件中进行配置。详见上述官方文档。

文件结构

• 每个页面文件夹下的四个同名文件.js、.wxml、.wxss、.json自动绑定，用于描述页面的逻辑、结构、配置、样式。
• 每一组文件拥有独立的命名空间，也就是说在不同文件夹下可以定义同名变量。

• 数据绑定

  • 在js文件的Page中，有一个data属性，data是一个对象，其中含有若干个属性。这些属性自动和wxml文件绑定，可以在wxml文件中使用
  • 在wxml文件中，用 {{key}} 的形式即可代表data中key对应的value
  • 在两个大括号内，支持简单的运算，如：三元运算、算术运算、逻辑判断、字符串运算、数据路径运算。
  • 例如：

  <view>{{a+b}}}+{{c}}+d</view> 
  //若a=1,b=2,c=3，显示3+3+d
  <view wx:if="{{length>5}}"></view>
  <view>{{"hello"+name}}</view>
  

注册程序

• 用App(Object)注册整个程序信息，其中可以含有全局变量名和一些监听器方法名，如onLaunch、onShow等，详见官方文档

注册页面

• 全局的注册是App(Object)，同样，页面的注册则是Page(Object)
• 上文已经提到，Object中有一个data属性，其中的值用于和wxml自动绑定。
• Page中还可以定义页面的监听器，与之前所说App()中监听器类似。详见官方文档
• 除了页面监听器，Page中还要定义wxml中声明的监听器，如单击某组件时的监听器，函数名与wxml中定义时相同。官方文档

更改数据

• 通常在点击某个按键后，我们希望界面上某个数值出现变化，这个值通常与Page中的data绑定。也就是说，我们要能在监听器函数中修改Page中data的某个值
• Page.prototype.setData(Object data, Function callback)用于实现这个功能，
• 通常，在监听器中，我们直接会用this.setData()其中的Object属性用于更改Page中data的属性，Function callback是回调函数，通常不需要。
• 实例可见官方文档

全局变量

• 上文已经提到，每个页面中的文件自动关联，不同文件有不同的作用域。我们需要了解如何定义全局变量以及全局函数来实现页面间数据交换。

• 全局变量

  • 在程序声明函数App()中定义的全局变量即可在各个页面中使用。
  • 使用方法：用getApp()获取指针，然后引用
  • 例如：

    //app.js
    App({
        x = 1;
    })
    //page.js
    const app = getApp();//获取指针
    app.x++;             //操作数据
    getApp().x = 10;    //一步到位
    

• 全局函数

  • 如果很多页面需要用到同一个函数，可以将这个函数抽离出来，单独写在一个 js 文件内作为全局函数。
  • 定义的 js 文件中，需要用 module.exports 暴露模块接口
  • 在需要使用这些模块的文件中，使用 require(path) 将公共代码引入
  • 实例：

  //globalFunction.js
  function add(a,b) {return a+b;}
  module.exports.add = add;
  //page.js
  const globalFunction = require('globalFunction.js');
  var a = 1, b = 2;
  var c = globalFunction.add(a,b);
  

官方文档