小程序学习记录

1、前言

小程序开发的安装、注册和接入等流程就不罗列了，在小程序接入指南已经写得很清楚了。

2、app.json

app.json配置是当前小程序的全局配置，包括小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。每一项都对应一个页面的 路径+文件名 信息。文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

3、project.config.json

工具配置在小程序的根目录，对工具做的任何配置都会写入这个文件，使得只要载入同一个项目代码包，开发则工具会自动恢复当时你开发项目时的个性设置。

4、page.json

页面配置 是小程序页面相关的配置，让开发者可以独立定义每个页面的一些属性，比如顶部颜色，是否下拉等。

5、WXML 模板

数据绑定：<view>{{ message }}</view>小程序和Vue的数据绑定都使用 Mustache 语法，双括号将变量包起来。区别是 Vue 中使用 Mustache 语法不能作用在 HTML 特性上，而小程序作用在标签属性上：<view id="item-{{id}}">{{msg}}</view>

列表渲染：<view wx:for="{{array}}">{{index}}: {{item.message}}</view>

 也可以用 wx:for-item 指定数组当前元素的变量名，用 wx:for-index 指定数组当前下标的变量名：

<view wx:for="{{items}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}} 
</view>

　　如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input> 中的输入内容，<switch> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

条件渲染：

<view wx:if="{{length > 5}}">1</view>

<view wx:elif="{{length > 2}}">2</view>

<view wx:else>3</view>

 因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>

注意： <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

 事件绑定：

<!-- 单击事件冒泡继续传播 -->            
<view bindtap="doThis">bindtap</view> 

<!-- 阻止单击事件冒泡继续传播 -->  
<view catchtap="doThis">bindtap</view>

WXML的冒泡事件：

touchstart    	手指触摸动作开始
touchmove	手指触摸后移动	
touchcancel	手指触摸动作被打断，如来电提醒，弹窗	
touchend	        手指触摸动作结束	
tap	                手指触摸后马上离开	
longpress	        手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap	        手指触摸后，超过350ms再离开（推荐使用longpress事件代替）	
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发	
animationstart	会在一个 WXSS animation 动画开始时触发	
animationiteration	会在一个 WXSS animation 一次迭代结束时触发	
animationend	会在一个 WXSS animation 动画完成时触发	
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发                

引用：

在 Vue 中引用用于组件的服用引入：import ComponentA from './ComponentA'

在小程序中， WXML 提供两种引用方式 import 和 include。

在 item.wxml 中定义了一个叫item的template：

<template name="item">    
    <text> {{text}} </text>
</template>    

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

<import src="item.wxml"/><template is="item" data="{{text: 'forbar'}}"/>

include 可以将目标文件除了 <template> <wxs> 外整个代码引入：

<!-- index.wxml -->
<include src="header.wxml"/> 
    <view> body </view> 
<include src="footer.wxml"/>
            
<!-- header.wxml -->   
    <view> header </view> 
    
<!-- footer.wxml -->
    <view> footer </view>

6、WXSS样式

WXSS(WeiXin Style Sheets) 具有 CSS 大部分的特性，也做了一些扩充和修改。

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

 

iPhone6上，换算相对最简单，1rpx = 0.5px = 1物理像素，建议设计师以 iPhone6 为设计稿。

样式导入

使用 @import 语句导入外联样式表，注意路径为相对路径。

全局样式与局部样式： app.wxss中的样式为全局样式，在 Page （或 Component） 的 wxss文件中定义的样式为局部样式，自作用在对应页面，并会覆盖 app.wxss 中相同选择器。