2018-03-29同事的小程序学习分享

一、模板封装
比如创建子文件post-item-tpl.wxml与post-item-tpl.wxss
post-item-tpl.wxml中为组件：

 <template name="postItemTpl"> 
  <view class="post-container">
    <view class="post-author-date">
      <image src="{{avatar}}"></image>
      <text>{{date}}</text>
    </view>
    <text class="post-title">{{title}}</text>
    <image class="post-image" src="{{postImg}}" mode="aspectFill"></image>
    <text class="post-content">{{content}}</text>
    <view class="post-like">
      <image src="/images/main_normal@2x.png"></image>
      <text>{{collectionNum}}</text>
      <image src="/images/main_press@2x.png"></image>
      <text>{{readingNum}}</text>
      <image src="/images/pg_normal@2x.png"></image>
      <text>{{commentNum}}</text>
    </view>
  </view>
 </template>

“postItemTpl”为当前模板名称，<image src="{{avatar}}"></image> <text>{{date}}</text>代码里{{}}中为传入模板的数据对象模型中对应的属性值，使用的示例可以见本文第二点

模板无法将业务逻辑封装，在里面绑定事件，或者加上.js的文件。

post-item-tpl.wxss中为模板的样式代码

使用前，只需在相应文件中最前面导入模板即可

<import src="post-item/post-item-tpl.wxml"></import>

二、block标签、wx:for的使用（列表渲染，for语句中循环加载模板template）
示例代码：

<block wx:for="{{postList}}" wx:key="*this" wx:for-item="item" wx:for-index="idx">
  <view catchtap="onTapToDetail" data-post-id="{{item.postId}}">
  <template is="postItemTpl" data="{{...item}}"></template>
  </view>
  </block>
</view>

block称作“标签”，仅仅只是一个包装，没有实际意义，不是组件，不会在页面内被渲染，相当于编程语言中的括号。其实使用view也行，但是使用block的话分工更明确，而且不会被渲染。

wx:key="*this" 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/>中的输入内容，<switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供
1.字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2.保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

“…”为扩展运算符，作用是将item数据与模板关联起来。

“data-post-id”为组件自定义属性，命名规则为：
1、必须以data-开头，防止变量名冲突。
2、多个单词由连字符“-”链接，数据源层次越深，越多连字符链接
3、单词中最好不要有大写字母，如有，除单词第一个字母外，其余大写字母将被转化成小写
4、在js中获取自定义属性值时，多个单词将被转化为驼峰命名

三、模板导入有两种方法import与include
import使用方法：
首先 <import src="post-item/post-item-tpl.wxml"></import>
需要使用模板时

<block wx:for="{{postList}}" wx:key="*this" wx:for-item="item" wx:for-index="idx">
  <view catchtap="onTapToDetail" data-post-id="{{item.postId}}">
  <template is="postItemTpl" data="{{...item}}"></template>
  </view>
  </block>
</view>

include方法：

   <block wx:for="{{postList}}" wx:key="*this" wx:for-item="item" wx:for-index="idx">
     <view catchtap="onTapToDetail" data-post-id="{{item.postId}}">
     <include src="post-item/post-item-tpl.wxml"></include>
     </view>
  </block>

Include方法 无法引入(复制)包含template标签的代码，无法向模板传递参数变量，它本质上只是将代码拷贝复制过来，因此我们需要在模板中手动传入变量，如下中的item.avatar 所示：

<view class="post-container">
    <view class="post-author-date">
      <image src="{{item.avatar}}"></image>
      <text>{{item.date}}</text>
    </view>
     .......
  </view>

import有作用域的概念，即只会import目标文件中定义的template，而不会import目标文件import的template。
例如：C import B， B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。
而include只是一个占位符，仅做简单的代码替换，类似宏的操作。

四、数组push与concat区别
区别：

push 遇到数组参数时，把整个数组参数作为一个元素；而 concat 则是拆开数组参数，一个元素一个元素地加进去。
push 直接改变当前数组；concat 不改变当前数组。

五、wx:if的使用（条件渲染）
利用wx:if切换图标，例如下面代码通过判断post.upStatus来展示不同image

<image animation="{{animationUp}}" wx:if="{{post.upStatus}}" src="/images/icon/wx_app_liked.png" />
<image animation="{{animationUp}}" wx:else src="/images/icon/wx_app_like.png" />

此法可以使按钮的动态变化，效果变化

六、单步断点调试介绍
相关链接：https://blog.csdn.net/bright789/article/details/54709594

七、DB缓存是否有必要使用？
为了预加载快一点，有没有必要构造DB缓存？
有没有离线使用或者查看数据的情况？
微信对小程序界面有没有做自动的缓存。
微信缓存最大容量约为10M？

八、input组件中的关键字替换（比如要屏蔽qq为*）
比如input定义了完成方法submitComment
代码示例：

  submitComment：function（event）{
  Var value = event.detail.value;
  return value.replace(/qq/g,”*”)
  }

首先改方法是有返回值的，/qq/g 是简单正则表达式，/g放在末尾，表示在全局替换，不加此符号，只替换第一个符合条件的表达式。这在复制粘贴大量数据时显现出效果。