一、模板封装
比如创建子文件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放在末尾，表示在全局替换，不加此符号，只替换第一个符合条件的表达式。这在复制粘贴大量数据时显现出效果。
网友评论