「小程序学习」_1

小程序

特点

做简单的、用完即走的应用

适合低频的应用

适合性能要求不高的应用

学习

JavaScript+CSS

ES6

一个界面的文件

.html/.htm	标记语言，页面骨架作用
.css	样式表，在html中使用class来包含某一个样式表
.js	函数，逻辑操作
.json	配置文件，配置页面（最外层的为全局配置文件）

1.对应关系：

.js->.js

.json->.json

.html/.htm->.wxml

.css->.wxss

2.小程序的页面配置遵循“就近”原则，例如：

当某个page中的.wxss与app.wxss的配置文件不同时，遵循.wxss中的配置文件

3.项目配置文件

project.config.json

.json

全局配置—app.json

app.json是全剧配置文件。

放置配置文件,例如：

{
  "pages": [
    "pages/welcome/welcome"
  ]
}

这里注意，最后一个welcome表示的是4个文件，小程序在编译时会自动寻找这四个文件。

添加window：

{
  "pages": [
    "pages/welcome/welcome"
  ],
  "window": {
    "navigationBarBackgroundColor":
    "#b3d4db"
  }
}

navigationBarBackgroundColor是window 的子属性，代表的是导航栏的颜色。

如果使用小程序添加page功能进行添加，会自动生成4个关于这个页面的文件，并在app.json中自动加入新建页面。

页面的配置文件

页面的配置只能设置app.json中部分window配置项的内容，页面中的配置项会覆盖app.json的window中相同的配置项。

属性	类型	默认值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	string		导航栏标题文字内容

rpx与移动设备分辨率

在不同的机型上会有不同的响应，使得在不同机型上的视觉效果更好。

pt	逻辑分辨率，屏幕尺寸对应的分辨率，比如320*480，就是宽320，长480
px	物理分辨率，像素点对应的分辨率，比如640*960，就是宽640个像素点，长960个像素点
ppi	每英寸包含的像素点
rpx	使用rpx，小程序会在不同分辨率下自适应

微信小程序width虽然用的是px，但指的是pt，逻辑分辨率

在iPhone6下，1px = 1rpx = 0.5pt，不是所有单位都适合使用rpx，文字就不适合使用rpx。

Swiper组件

滑块视图容器

决定轮播图标签style的是标签,中的图片会自动充满整个。

也是一个容器，它的内部也可以放置button等。

<view>
  <swiper style="width:100%;height:500rpx">
    <swiper-item><image src="/images/wx.png" ></image></swiper-item>
    <swiper-item>Content</swiper-item>
    <swiper-item>Content</swiper-item>
  </swiper>
</view>

属性	类型	默认值	必填	说明	最低版本
indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色	1.1.0
vertical	boolean	false	否	滑动方向是否为纵向	1.0.0
autoplay	boolean	false	否	是否自动切换	1.0.0
interval	number	5000	否	滑动动画时长	1.0.0

.wxss文件

“.”的作用

前面如果加“.”，如：

.user-avatar{
  width: 200rpx;
  height: 200rpx;
  margin-top: 160rpx;
}

代表是自定义的样式名称。

而如果没有这个“.”，如：

swiper image {
  width:100%;
  height:500rpx;
}

则代表是wxml中的元素，对组件进行设置。

flex布局

弹性盒子模型

.container{
  display: flex;
  flex-direction: column;/*列排布*/
  align-items: center;/*居中*/
}

通过flex布局，可以使得使用该class的所有元素一起按某种排布。

注意container的大小只到组件边缘的位置

Margin

.post-author-date{
  /* margin-top:10rpx;
  margin-bottom:20rpx;
  margin-left:10rpx; */
  margin:10rpx 0 20rpx 10 rpx;
  /*顺序是上右下左*/
}

margin默认的顺序是上右下左。

Height

line-height是指行高

height是指整个框架的高度

font-weight指的是字的宽度（加粗）

Image

一个自定义样式布局，如果在它的名字后加Image，那么将会设置该自定义样式所控制的wxml标签中的image图像。例如，

.circle-img{
  float:right;
  margin-right: 40rpx;
  vertical-align: middle;
}
.circle-img Image{
 width:90rpx;
 height:90rpx;
}

绝对路径和相对路径

绝对路径从根目录开始。

相对路径从该文件当前所在文件夹开始，用../返回上一级目录。

绝对路径和相对路径在一些情况下不能相互互换。

生命周期函数

在一个小程序整个运行过程中执行的函数。

小程序中一般把从服务器取数据的代码放在onLoad()函数中，在小程序启动时运行。

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log('onload');
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log('onready');
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log('onshow');
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log('onhide');
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log('onunload');
  }
})

数据绑定传递数据

page(...)是什么

.js文件中的Page({...})是一个对象，用它来注册一个页面。

数据绑定

只有在Page()中data下的变量才可以进行数据绑定。

在wxml中使用{{}}是数据绑定的基本语法，另外，{{}}也可以进行一些基本的运算。

与传统网页编程DOM优先的思想相比，小程序提倡数据优先的思想。

将函数中的变量传递给Page对象中的data

在Page的函数中使用this.setData()将变量传递到data中进行数据绑定，例如

  onLoad: function (options) {
    var post_content1 = {
      date: 'Nov 18 2019',
      title: '正是虾肥蟹壮时',
      post_img: '/images/post/crab.png',
      content: '菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，',
      view_num: '112',
      collect_num: '96',
      author_img: '/images/avatar/1.png'
    }
    this.setData(post_content1)
    console.log('onload')
  },

注意this.setData()只能只能传递对象，而不能传递数组。如果要传递数组，则需要传递先把数组赋值给一个对象或者将数组看作对象，例如：

 var posts_content = [1,2]
this.setData({posts_key:posts_content})
/*posts_key是一个对象，它的内容是posts_content*/
this.setData({posts_content})
/*{posts_content是一个对象}*/

嵌套时进行数据绑定

例如：

  onLoad: function (options) {
    var post_content1 = {
      date: 'Nov 18 2019',
      title: '正是虾肥蟹壮时',
      img:{
        post_img: '/images/post/crab.png',
        author_img: '/images/avatar/1.png'
      },
      content: '菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，',
      view_num: '112',
      collect_num: '96',
    }
    this.setData(post_content1)
    console.log('onload')
  },

此时，如果在.wxml文件中访问post_img，则需要这样："{{img.post_img}}"，用.来确定归属问题。

wxml的布尔值赋值

如果在.wxml的标签中直接赋值字符串'false'，那么由于字符串不为空，所以JavaScript解释器判定为true，而如果要给某个值赋布尔false，则应该{{false}},例如：

  <swiper vertical='{{false}}' indicator-dots="{{true}}" autoplay="{{true}}" interval="5500"></swiper>

渲染

wx:if条件渲染

wx:for列表渲染

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

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。例如，

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

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

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

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

wx:key

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

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

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

捕捉与回调

处理用户交互的一般逻辑

1.产生事件

2.捕捉事件

3.回调函数

4.处理事件

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

  <view class="moto-container" bind:tap="onTap">
    <text class="moto">开启小程序之旅</text>
  </view>
<!-- 这里的bind:tap是事件的名字，可以从开发者文档中查找，"onTap"是事件的处理函数，在.js文件中定义 -->

/*onTap函数在.js文件中的定义*/
Page({
  onTap:function(){
    console.log('onTap')
  }
})

页面跳转函数

属性	类型	默认值	必填	说明
url	string		是	需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’
events	Object		否	页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.navigateTo({
  url: '/pages/posts/posts',
})
/*注意navigateTo()函数的参数是对象，因此要把字符串定义为对象*/
/*navigateTo()执行onHide()，之前的界面被隐藏*/

wx.redirectTo({
  url: '/pages/posts/posts',
})
/*此时不出现左上角的返回按键*/
/*redirectTo()执行onUnload()，之前的界面被销毁*/

冒泡和非冒泡

冒泡就是点击子元素，父元素也会监听到，两者都作出反应。

如果要阻止冒泡，使用catch，阻止事件继续向上冒泡。

  <view class="moto-container" bind:tap="onContainerTap">
    <text class="moto" catch:tap="onSubTap">开启小程序之旅</text>
  </view>

Template模版

小程序中.js文件即脚本文件是不支持模版的

wxml模版

构建模版的时候，只需要两个文件：

文件夹

​ |
​ |———— *-template.wxml

​ |———— *-template.wxss

例如，模版的.wxml文件为：

<template name = "postItem">
    <text class="post-content">{{item.content}}</text>
</template>

在使用temlpate的文件中，添加类似的如下代码：

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

  <block wx:for="{{posts_key}}" wx:key="unique">
    <template is = "postItem" data="{{...item}}" />
  </block>

注意斜线的位置！！！

...相当于展开wx:for中的item对象，这样，template模版就不需要添加item.了。

事件响应

如果上面的一段代码里，需要添加事件响应，那么可以在<template is = "postItem" data="{{...item}}" />外，用<view></view>将它扩起来，在<view>标签上添加事件响应，而不是在<template is = "postItem" data="{{...item}}" />上添加响应。例如：

  <block wx:for="{{posts_key}}" wx:key="unique">
    <view catchtap="onPostTap">
     <template is = "postItem" data="{{...item}}"  />
    </view>
  </block>

wxss模版

调用时

@import "相对路径"

自定义组件

模块化组件，使得小程序可以实现模块化。