基础的介绍

框架

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。

响应的数据绑定

框架的核心是一个响应的数据绑定系统。

整个系统分为两块视图层（View）和逻辑层（App Service）

框架可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

小程序开发框架的逻辑层由 JavaScript 编写。

逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

在 JavaScript 的基础上，我们做了一些修改，以方便地开发小程序。

增加 App 和 Page 方法，进行程序和页面的注册。
增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
每个页面有独立的作用域，并提供模块化能力。
由于框架并非运行在浏览器中，所以 JavaScript 在 web 中一些能力都无法使用，如 document，window 等。（js不能直接控制HTML里的内容，只能改变绑定的数据，这是开始接触时最不习惯的地方）
开发者写的所有代码最终将会打包成一份 JavaScript，并在小程序启动的时候运行，直到小程序销毁。类似 ServiceWorker，所以逻辑层也称之为 App Service。

实际遇到的问题

1.数据动态更新

    Page({ 
  
   /** 
  
    * 页面的初始数据 
  
    */ 
  
    data: { 
  
    length: 
   0, 
  
    result:[] 
  
    },

……

})

page或app中先声明赋初值，然后根据需要在事件函数中调用

    this.setData({ 
  
    result:res.data, 
  
    length: length1 
  
    })

2.servlet分离

小程序没有jsp的功能，需要把小程序能力以外的部分分离成servlet，语言任意

调用类似ajax

wx.request({
    url: 'http://localhost:8080/WebsiteMode/AdminLogin', //地址，可以用变量拼接
    method: 'POST',
    header: {
      'content-type': 'application/x-www-form-urlencoded' // post方法专门设置
    },
    success: function (res) { //访问成功的回调函数
      console.log(".....success.....");
      
      var length1 = res.data.length; //返回的数据使用时必须加 .data
      
      //动态更新绑定的数据
      pagethis.setData({
        result:res.data,
        length: length1
      })
    },
    fail: function (res) {  //访问失败的回调函数
      console.log(".....fail.....");
    },
    dataType: "json" //返回数据是json则必须写
  })

3.HTML中的循环显示

  <view class="flex-wrp" style="flex-direction:row;" wx:for="{{result}}">
    <view class="flex-item name">{{item.name}}</view>
    <view class="flex-item date">{{item.year}}-{{item.month+1}}-{{item.day}}</view>
    <view class="flex-item time">{{item.hour}}:{{item.minute}}:{{item.second}}</view>
    <view class="flex-item address">{{item.address}}</view>
  </view>

wx:for="{{数组变量名或整个数组}}" wx:for-item="item(default)"

那么class为flex-wrp的view会循环result数组的长度那么多次，若长度为0则不显示

item类似foreach（i in arr）里的 i ，可以不写，默认为item

4.居中显示

.flex-wrp {
  display: flex;
  align-items:stretch;
  justify-content: center;
}
.flex-item {
  display: flex;
  align-items:center;
  justify-content: center;
}

flex似乎不能被子元素继承

第一个是水平居中，垂直高度同最高的，并且居中

第二个是普通的水平垂直居中

微信小程序实践总结

基础的介绍

框架

响应的数据绑定

猜你喜欢