微信小程序实践总结 - 好文

基础的介绍

框架

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

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

响应的数据绑定

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

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

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

js

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

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

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

* 增加 App
<https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html>
和 Page
<https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html>
方法，进行程序和页面的注册。
* 增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
* 提供丰富的 API <https://developers.weixin.qq.com/miniprogram/dev/api/>
，如微信用户数据，扫一扫，支付等微信特有能力。
* 每个页面有独立的作用域
<https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/module.html#%E6%96%87%E4%BB%B6%E4%BD%9C%E7%94%A8%E5%9F%9F>
，并提供模块化
<https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/module.html#%E6%A8%A1%E5%9D%97%E5%8C%96>
能力。
* 由于框架并非运行在浏览器中，所以 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似乎不能被子元素继承

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

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

热门工具换一换