微信小程序学习笔记1

学校的创业学院有学长招人做小程序之类的开发，所以学习一下小程序开发

简介

小程序其实出来很久了吧，我觉得应该每个人都用过，他比较有优势的点就是不占用手机内存，用完即走，像很多app我下完用过一次之后就很少再用了，但是怕以后要用所以没有卸载，这样就一直占用了手机内存，其次他也可以用来引流，微信用户这么多流量肯定也多，像拼多多、小红书就是典型的案例。其他还有很多优势，比如开发成本低、开发门槛低等等。

小程序的主要开发语言是JavaScript，他和开发普通网页有相似性。

开发软件

使用微信官方的开发者工具，搜索微信小程序api进入官网就能下载

https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

界面

他除了左边模拟器部分，右边的界面感觉和vscode界面很像

目录结构

上图可以看到目录结构，他们的作用如下：

pages文件夹里面包含一个个具体的页面，每个具体的页面都要包含四个文件(js、json、wxml、wxss)

utils文件夹存放一些公共文件，比如js、css等等

app.js是程序入口是小程序的逻辑

app.json是当前小程序的全局配置，包括了小程序的所有页面路径、页面表现、网络超时时间、底部tab等等。在pages里新建页面除了在图形化方式新建，还可以在app.json里新建，在他的pages里写一个新的路径ctrl+s保存就会自动在pages文件夹生成该页面文件夹了，因为保存之后软件会自动编译

js页面逻辑

json页面配置

wxss页面样式(类似css)，app.wxss是全局样式，会作用于小程序的所有页面，局部样式page.wxss仅对当前页面生效

wxml页面结构(类似html)

project.config.json项目配置文件，做一些个性化配置，例如界面颜色、编译配置等等

sitemap配置小程序及其页面是否允许被微信索引，相当于网站的robots.txt，规定爬虫爬取范围

组件

组件相当于html里的标签把，微信小程序有自己的一套标签，可以在官方文档里看

https://developers.weixin.qq.com/miniprogram/dev/component/

这里写一下老师讲的基础组件和一些常用属性

view

view组件相当于div标签，他有四个属性

hover-class:按下的样式类

hover-stop-propagation:是否阻止本节点的祖先节点出现点击态，默认是false，在标签里加上就相当于true了，这个作用挺大的，可以防止点击子元素父元素也被点了的情况。

hover-start-time:按住多久出现点击态，这个默认就好了

hover-stay-time:手指松开后点击态保留时间，这个也默认就好了

text

这个相当于span，存放文本的，他有三个属性

user-select:文本是否可选，这个属性会让文本节点显示为inline-block。手机上长按会出现选中文字来复制等等，就是靠他设置的

space:显示连续空格

decode:是否解码。应该是html编码把，

image

微信小程序不能大于2M，所以不要像开发网站一样在同级目录下创建images存放图片，最好用远程路径或者云开发，而且要压缩图片

src：图片地址

mode:图片裁剪、缩放的模式，最常用的是widthFix

show-menu-by-longpress:开启长按图片显示识别小程序码菜单

这三个常用，其他的以后再深入把

navigator

超链接，相当于a标签

url:当前小程序内的跳转连接，相当于href

open-type:跳转方式

默认值为navigate，保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。

最常用的有reLaunch，关闭所有页面，打开到应用内的某个页面

scroll-view

可滚动视图区域，滚动在手机上也是常用的，通常配合flex弹性布局来使用，在wxss里加上

display:flex;
flex:none;

flex:none，就是flex:0 0 auto的简写，意思是不放大不缩小，项目占据原始大小

横向滚动也可以配合下面代码实现：

.子类名{
  display: inline-block; /*行内块元素显示一行*/
}
.父类名{
  white-space: nowarp; /*超出不换行*/
}

scroll-x:允许横向滚动，默认false

scroll-y:允许纵向滚动，默认false

swiper-item

只能放在swiper组件中，宽高自动设置为100%

item-id:该swiper-item的标识符

swiper

滑块视图容器，里面只能放swiper-item组件

通常用来做图片轮播，在wxss里把height设置为rpx单位(可以根据屏幕宽度进行自适应)

indicator-dots:是否显示面板指示点，默认为false

indicator-color:指示点颜色

indicator-active-color:当前选中的指示点颜色

autoplay:是否自动切换，默认为false

interval:自动切换时间间隔，默认5000ms

circular:是否采用衔接滑动，默认为false

vertical:滑动方向是否为纵向，默认是横向

previous-margin:前边距，可用于露出前一项的一小部分

next-margin:后边距，可用于露出前一项的一小部分

button

按钮组件

size:按钮大小，改mini变小

type:按钮的样式类型，primary为绿色 default为白色 warn为红色

plain:按钮是否镂空，背景色透明。默认为false

disabled:是否禁用。默认为false

loading:名称前是否带loading图标。默认为false，加载的时候用

open-type:微信开放能力。他的功能很强大，可以打开客服会话(contact)、获取用户信息(getUserInfo)、打开app(launchApp)等等

form-type:用于form组件，点击分别会触发form组件的submit/reset事件

input

输入框

type:input的类型。text文本输入键盘、number数字输入键盘、idcard身份证输入键盘、digit带小数点的数字键盘

placeholder:输入框为空时占位符

disabled:是否禁用

maxlength:最大输入长度

cursor-spacing:指定光标与键盘的距离

focus:获取焦点

confirm-type:设置键盘右下角按钮的文字(发送、搜索下一个等等)，仅在type=’text’时生效

switch

开关选择器

checked:是否选中，默认false

textarea

多行输入框

icon

图标组件

type:icon的类型，有success、info、search等等很多

size:icon的大小

color:icon的颜色，同css的color

progress

进度条

percent:百分比0-100

show-info:在进度条右侧显示百分比

框架

小程序配置

参考官方文档

全局配置

这个之前在目录结构里说过一些，这里再具体看看

pages

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

navigationBarBackgroundColor:导航栏背景颜色

navigationBarTextStyle:导航栏标题颜色，仅支持black/white

navigationBarTitleText:导航栏标题文字内容

backgroundColor:窗口的背景色，这个只有再下拉刷新的时候看得见颜色

enablePullDownRefresh:是否开启全局的下拉刷新。默认false

backgroundTextStyle:下拉loading的样式，仅支持dark/light

tabBar 对象类型，用{ }包裹

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

list:tab的列表，最少2个，最多5个tab。数组类型用[ ]包裹

list有四个属性：

pagePath:页面路径，必须在pages中先定义。string类型

text:tab上按钮文字

iconPath:图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当position为top时，不显示 icon。

selectedIconPath:选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当position为top时，不显示 icon。

color:tab上的文字默认颜色，仅支持十六进制颜色

selectedColor:tab上的文字选中时的颜色，仅支持十六进制颜色

backgroundColor:tab的背景色，仅支持十六进制颜色

position:tabBar的位置，仅支持bottom/top

页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象，他的属性和全局配置里的window差不多

WXML语法

数据绑定

WXML 中的动态数据均来自对应 Page 的 data。数据绑定用胡子语法(双大括号)将变量包起来，语法和flask框架的变量一样

data里可以放string、array、object。字符串用双引号””包裹，数组用中括号[]包裹，对象用花括号{}包裹

用的时候，字符串直接用，数组要写索引，对象要写属性

条件渲染

wx:if

在框架中，使用 wx:if="" 来判断是否需要渲染该代码块，也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

如果要写js代码的话，必要要放在{{}}里。

block wx:if

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

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

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

列表渲染

wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标默认为 index，数组当前项的值默认为 item

<view wx:for="{{[111,222,333,444]}}">{{index}}、{{item}}</view>

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如input中的输入内容，switch的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。把它设置成*this或者index就行了。

说实话这里没看懂什么意思，以后碰到再深入看看把

框架接口

页面

page

写在js文件里

注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

生命周期函数,在满足某些条件的情况下,自动触发的事件.

属性：

data:页面初始数据

onLoad:生命周期回调—监听页面加载

onShow:生命周期回调—监听页面显示

onReady:生命周期回调—监听页面初次渲染完成

onHide:生命周期回调—监听页面隐藏

onUnload:生命周期回调—监听页面卸载

onPullDownRefresh:监听用户下拉动作

onReachBottom:页面上拉触底事件的处理函数

onShareAppMessage:用户点击右上角转发

等等还有很多

事件系统

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

什么时事件

事件是视图层到逻辑层的通讯方式。

事件可以将用户的行为反馈到逻辑层进行处理。

事件可以绑定在组件上，当达到触发事件，就会执行逻辑层(js文件)中对应的事件处理函数。

事件对象可以携带额外信息，如 id, dataset, touches。

事件使用

用bind在组件中绑定一个事件处理函数

事件分类

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

冒泡事件：

tap:手指触摸后马上离开。相当于click

touchstart:手指触摸动作开始

touchend:手指触摸动作结束

等等

事件对象

当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。

常用的是currentTarget:当前组件的一些属性值集合，他常用的属性是dataset:当前组件上由data-开头的自定义属性组成的集合。

事件处理函数

首先绑定组件：

<view bindtap="mytap" data-title="微信小程序">{{title}}</view>

在js里面写函数，用this.setData来修改data里的值：

data: {
  title:"小程序"
},
mytap: function(res){
  var title=res.currentTarget.dataset.title;
  this.setData({
    title:title
  })
},

如果要获取data里的参数用this.data.title

参考

https://www.bilibili.com/video/BV1WQ4y1T7D8?p=1

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html