180211 开发-微信小程序试做（本地）

1625-5 王子昂 总结《2018年2月11日》 【连续第499天总结】
A. 微信小程序开发
B.
由于某些项目需要开始学习开发小程序
基本就是用会的js乱凑一个出来了（望天

记下一些坑吧

系统的了解了一下前端开发
js表达交互逻辑
html(wxml)表达控件组成即内容
css(wxss)表达控件样式

首先wxml与html类似，但封装度更高，有wx:for可以迭代加载控件
需求按行加载每个迭代，而每个迭代中又有两个小的控件
分行由样式中的display决定，分为block块级元素和inline行内元素，另外微信的小程序采用flex布局，flex也是行内元素
刚开始折腾了半天不是所有控件都挤在一行就是每个控件各成一行
因为block样式只要出现，不管相邻元素是什么样式都会把自己独立出一行

在<block wx:for>中加样式也没有用，后来才知道block不是一个组件，它仅仅是一个包装元素来接受if/for的控制属性，在页面中是不会被渲染的，当然也就不会受样式影响了

那么我想在迭代内的两个元素外再进行包装怎么办呢？
当然是再用一个view作为父级元素啦：

  <block wx:for="{{rooms}}" wx:for-item="room">
  <view style="display:flex;flex-direction: row;" bindtap='tapOrder'data-idx="{{index}}">
    <view style="flex" class="room-item">{{room}}</view>
    <view style="flex" class="order-item">{{orders[index]}}</view>
  </view>
  </block>

这样就可以实现“迭代间换行，迭代内部不换行”的需求啦

PS：在这之前我还用过一种很程序猿思维很“能用就行”的不优雅的方法……
在迭代内添加第三个控件，空内容，但是样式为分行，这样通过“相邻行内元素不换行，块级元素分行”的特性也能达到同样效果，虽然怎么想都不太合理就是了

还学习了微信中全局变量要通过App({})域来添加、getApp()来获得对象使用
以及setStoragesync()设置缓存和getStoragesync()获取缓存，这两个API用起来很方便，跟全局变量的区别就是一个在内存一个在内部存储啦

微信小程序有一个很厉害的地方就是它的wxml可以绑定变量
如直接展示的{{room}}，是绑定了rooms数组的中一个元素
这个绑定意味着当js改变对应的变量时，wxml中的值会随之立即动态改变

js端也不是所有变量都能够直接送给wxml的，需要在data域中声明。同时使用和设置都有对应的API, setdata({})和this.data.xxx
调用setdata以后wxml的显示就会立即发生变化了
data域中以JSON格式存放，因此其中的变量必须为能转换成JSON格式的类型，例如数值、字符串、对象、数组等
（其实也几乎包括大部分需要的类型了233）

还有一个不太明朗的问题
没有系统学习过js，因此其实不太清楚
var func = function(){};
func: function(){},
这两者有啥区别

在onLoad函数中无法调用外面的函数，而如果定义在onLoad函数中则无法被其他函数调用
这个稍微查了一下发现是作用域的问题，但是好像也没看到什么解决方法，留待以后有空系统学一下js吧

C. 明日计划
小程序服务端， Node.js/PHP与数据库的协作