微信小程序学习

微信小程序学习

初识微信小程序

新建小程序项目

1. 测试号部分功能API无法使用，建议申请APPID

2. 云开发 VS 不使用云服务

大项目如有APP网站都要调用数据库，要自己构建后端服务器。不需要小程序云开发

新版小程序开发工具的一些基本设置

• 不校验合法域名勾选（上线后后端域名必须是https）

（测试环境下勾选不校验合法域名可以使用http）

• ctrl + P 全局搜索快速打开文件
  
  

小程序的基本目录结构与文件作用剖析

小程序页面的4种基本文件类型详解

一、一个页面包括4个文件（默认一个页面是一个文件夹）：js，json，wxml，wxss

wxml：用来写页面骨架（类似HTML）

wxss：用来写页面样式（类似CSS）

json：用来写页面配置（如可以配置顶部导航栏的颜色等）

js：用来写代码逻辑

二、这4个文件的文件名相同，并且同级，可以不引入直接使用

小程序的全局配置文件、全局样式表和应用程序级别js文件

app.js

app.json

app.wxss

这三个文件文件名不能改；

页面文件只作用于当下页面；app.*文件作用于app全域应用程序级别；

配置是就近原则，页面文件配置>应用程序级别配置；

rpx响应式单位与flex布局

JSON对象与JS对象的区别（重点）

json中对象的键必须是""（双引号），最后一项不允许加,（逗号）

javascript对象的键可以是’'（单引号）或不加，最后一项可以加,（逗号）

新建页面的技巧与规则

创建页面三个步骤：

1、在pages目录中创建目录；

2、在新创建的目录中新建page，由于小程序的页面包含4个子文件，所以我们可以使用开发直接新建page，系统自动创建4个文件，如：welcome.js、welcome.json、welcome.wxml、welcome.wxss文件

3、在全局配置文件app.json中配置

{

“pages”:[pages/welcome/welcome]

}

备注：

1、在配置不能写/pages/welcome/welcome;

2、不需要后缀名

image标签显示一张图片

• text 标签和view标签都可以显示文本的

• 一个简单的页面，先考虑骨架标签，然后再考虑怎么显示和样式

• 刚开始学习不能忘记写注释

• 项目媒体文件另创建一个asset文件夹里的images文件夹比较整齐

• image标签有一个重要的属性叫：src 也就是图片的路径可以使本地图片也可以是网络图片

• / 斜线代表根目录 工具也会自动提示我们根目录下的那个文件
  

小程序rpx响应式单位的特点（非常重要）

1、rpx可以自适应手机分辨率，适配当前机型
2、px是绝对大小。如果需要使用原分辨率除以2（只适应Iphone 6）
##3、小程序image标签有默认值W:320px；H:240px
ps:参考iphone 6宽度尺寸375px 或 750rpx

PS:
1、绝对路径“/”；相对路径“…”两点向上一级

分离CSS样式到WXSS文件中

• 样式：推荐写在wxss中，不建议写在wxml的标签中（内联样式，复用性低）

• 样式：小程序中不要用驼峰式，用连字符

• 标签样式用双引号，不建议用单引号

初识flex布局进行垂直分布布局

• view通常称为容器，认为是无意义标签，相当于html中的div标签，用来布局

• flex布局，用display: flex; 默认是行排列，可以用flex-direction: column;设置纵向排列

• 原生button组件有内置特性和效果，难以修改样式，不建议使用，可以自己用view写一个button，或用UI组件
  PS:
  1、不推荐使用小程序原生button。使用view+text模拟
  

flex布局的align-items

font-weight : bold 是让字体加粗的

align-items : center是把容器里的子元素交叉轴方向居中

自己编写一个Button组件

文本居中：水平垂直居中
text-align + line-height
非文本居中：flex布局，一定要掌握！！！！

文字居中：text-align水平居中，line-height（与父元素高度一致）垂直居中

页面多元素一次性垂直居中：用flex布局，flex-direction: column, align-items: center

聊聊小程序的方便性与灵活性的悖论

1、设置页面背景色，由于容器的高度是内容填充的，所有无法实现全部的背景色的设置。

2、全局配置window,通过navigationBarBackGroundColor 属性进行设置导航的背景颜色

3、通过对内置page元素设置背景来实现整体背景色

小程序最顶部，是系统自带颜色，得需要app.json配置调整

“window”:{

"navigationBarBackgroundColor":"#b3d4db"

}

小程序配置//全局配置 有详细的配置说明

阅读列表与setData数据绑定

LinUI组件库介绍

1、LinUI 官方地址：doc.mini.talelin.com

Lin UI 是基于 微信小程序原生语法 实现的组件库。遵循简洁，易用的设计规范，主要对原生的UI库进行扩展 ，特别在实际开发提升前端的开发效率。

git:TableLin

安装、编译LinUI

小程序安装组件库步骤：npm init

npm i lin-ui@0.8.7

点击 工具》构建npm

注意：安装任何的组件库之后，都需要执行构建npm才会生效；

• 直接把dist目录复制到小程序开发的根目录下

• npm安装

1、需要安装node.js

node -v

npm -v

cd 小程序根目录

npm init 初始化默认直接回车

在项目下增加一个package.json的npm的配置文件

2、npm i lin-ui@0.8.7

会在package.json有lin-ui的版本信息

3、要在小程序中构建npm

如何使用自定义组件

##引用三方组件库应该在当前page页面.json里面注册
“组件名（可以自取）一般前缀 l-avatar”:“路径 /minipaogarm_npm/lin-ui/avatar/index”（index页面名）

l-avatar头像和昵称组件

参考代码：

<l-avatar l-text-class="l-avatar-text" class="l-avatar" placement="bottom" open-data="{{['userAvatarUrl','userNickName']}}" size="180"/>

open-data这个功能被微信收回了。不能用了。

改用

<l-avatar src="/images/avatar/3.jpg" />

 <l-avatar text="图片" placement="bottom" shape="circle" src="/images/avatar/3.png" size="200" />

添加新的编译模式

• 小程序的首页默认显示的是app.json中pages配置中的第一个页面

在编译中，想要编译器显示的页面为正在编译的页面可以

方法一：添加编译模式：

方法二：在app.json页面配置：“entryPagePath”: “pages/posts/posts”

初步了解Swiper和Swiper-Item组件

• swiper是滑块视图容器。重点是容器。
• 如果大部分页面是颜色A，则应该在全局配置app.json中配置颜色A。首页颜色可以单独设置。

<!-- swipper组建 -->

<swiper>

<swiper-item>hahah1</swiper-item>

<swiper-item>hahah2</swiper-item>

<swiper-item>hahah3</swiper-item>

</swiper> 

Swiper组件（1）通过插槽设置轮播内容

• swiper组件里只能写swiper-item组件，虽然其他组件也可以编译通过，但是不推荐
• swiper必须搭配swiper-item使用,且swiper下面只能使用swiper-item。swiper-item下面可以放别的组件

<swiper-item>

    <!-- 插槽 -->

</swiper-item>

Swiper组件（2）Swiper组件内容的高宽设置技巧

• 轮播图组件swiper是一个容器，没有任何具体的含义，里面的元素只能是swiper-item

• 在swiper-item里可以放置任何组件，不管是图片文字等等

• swiper-item内的组件要设置宽高需要在swipe和组件本身上设置wxss样式，用到选择器如图：
  

属性设置一定要注意字符串以JS表达式的区别（重要）

• ctrl+鼠标移动在组件上就能查看文档

• indicator-dots="false"并不能让指示点消失，因为只是把false当成了普通字符串，所以->true，即indicator-dots=“true”

• indicator-dots="{{false}}"可以让指示点消失，因为在{{}}里的false才表示为布尔值false。

• 在{{}}里的值会被当成js里的变量/表达式进行运算

布尔属性值赋值的良好建议

• 设置布尔值时：规范语法{{}}

• 简洁写法：当表示true时写个属性值即可

Swiper组件的其他重要属性设置

• swiper vertical属性是垂直方向的滑动

<swiper indicator-dots autoplay  interval="2000">

• interval=“2000” 指的是2秒滚动时间隔
  

用Flex布局组织布局思路（1）

1、考虑布局的布局排列方向是水平还是垂直布局
2、布局方向：水平or垂直。案例是垂直，共5行，把每行元素的标签骨架先写出来

<view>

  　　<view>

           <image></image>

           <text></text>

        </view>

        <text></text>

       <image></image>

       <text></text>

      <view></view>

</view>

用Flex布局组织布局思路（2）

• 分析好 排列方式后 先做wxml文件的骨架 写进去内容 最后在做样式

用Flex布局组织布局思路（3）

• margin上右下左

• step 3 修改样式：先编写整体容器样式，再写子元素样式

• 居中有很多种方法，建议都使用flex布局，容易记忆且较通用

用Flex布局组织布局思路（4）

容器flex布局用途–居中

display: flex;

flex-direction: row;

align-items: center;

1、在本例中居中的两种方式：图片+文字的居中方式。第一种就是分别在图片和文字样式列表中设置vertical-align:middle。第二种就是用flex布局，在其父元素上设置：display:flex;flex-direction:row;align-items:center。
2、七月说居中的方式有多种，在flex出来之前，vertical以及用margin:auto之类的去实现居中，受元素的影响。最好用flex来布局居中样式。

用Flex布局组织布局思路（5）

设置文章的标题、图片、内容的属性：

.post-title{

    font-size: 16px;

    font-weight: 600;

    color: #333333;

    margin-bottom: 20rpx;

    margin-left: 20rpx;

}



.post-image{

   width: 100%;

   height: 340rpx;

   margin-bottom: 15px;

}

.post-content{

    color: #666666;

    font-size: 26rpx;

    margin-bottom: 20rpx;

    margin-left: 20rpx;

    letter-spacing: 2rpx;

    line-height: 40rpx;

}

条件渲染、列表渲染与小程序事件

使用LinUI的Icon组件代替图片ICON

1、一般在小程序开始中不推荐使用png的图片，因为会失真；

2、可以使用LinU的图片进行设置

<l-icon name="" size="" color="">

LinUI Icon组件的颜色和大小设置

直接在app.json中定义usingComponents，即可使引入的icon组件在任何页面里都可以使用

"usingComponents": {  "l-icon":"/miniprogram_npm/lin-ui/icon/index"  },

小程序开发数据的流向（1）

1、页面数据需要通过http请求来访问服务器提供的RestFul API,从而实现数据获取。

单向数据绑定与双向数据绑定

重点学习数据绑定的概念，数据绑定非常重要！

什么是单向数据绑定，什么是双向数据绑定！

• 数据流向：服务器 —数据—> JavaScript —数据绑定（setData）—> View

• 小程序提供了，简易双向数据绑定，vue做双向数据绑定很强大！

使用双向数据绑定，需要深刻理解响应式对象。

数据绑定与setData函数（1）

1. 数据由服务端流向js文件
2. 生命周期函数由小程序自身调用，不由开发者调用
3. 在data里定义变量
4. 在js文件里定义的变量都可以在wxml直接使用 使用双花括号包裹
   如何在js文件中数据变量让页面获取，如何做？

1、在js文件的page{data:}设置变量值；

2、在页面使用{{变量}} 进行调用

参考代码：

js代码：

  data: {

     data:"Jan 2021",

     title:"小时候的冰棍儿与雪糕",

     postImage:"/images/post/post-4.jpg",

     avatar:"/images/avatar/avatar-5.png",

     content:"冰棍与雪糕绝对不是同一个东西。3到5毛钱的雪糕犹如现在的哈根达斯，而5分1毛的 冰棍儿就像现在的老冰棒。时过境迁，...",

     readingNum:92,

     collectionNum:108,

     CommentNum:17

  }

页面代码：

  <view class="post-container">

    <view class="post-author-data">

      <image class="post-author" src="{{avatar}}"></image>

      <text class="post-data">{{data}}</text>

    </view>

    <text class="post-title">{{title}}</text>

    <image class="post-image" src="{{postImage}}"></image>

    <text class="post-content">{{content}}</text>

    <view class="post-like">

      <image src="/images/icon/wx_app_collect.png"></image>

      <text>{{readingNum}}</text>

      <image src="/images/icon/wx_app_view.png"></image>

      <text>{{collectionNum}}</text>

      <image src="/images/icon/wx_app_message.png"></image>

      <text>{{CommentNum}}</text>

    </view>

  </view>

DOM优先 VS 数据优先

html 使用DOM优先 先获得节点 再赋值
小程序 数据优先 数据绑定

理解Page.data与this.SetData的关系

理解data和this.setData

所有setData会把数据最终放到了data中

这也很好理解，data是存放数据的，可以直接在data中定义数据，但是一些数据并不是提前定义好的，是在某个场景下产生的，就用setData往data中写入数据

预先在data中定义绑定数据的初始值是值得推荐的做法

data 里面放初始的值

要修改就要setdata函数 也就是更新data数据

小程序的生命周期函数与特殊回调函数

• 生命周期调用顺序：

  （1）onLoad：页面加载，请求数据写在这里

  （2）onShow：页面显示，用得较少

  （3）onReady：页面初次渲染完成，用得较少

• 大多数情况下，页面初始化相关逻辑都写在onLoad里。特殊业务逻辑（异步操作带来的页面数据渲染）可以写在onShow和onReady里

• 条件触发生命周期函数：

  （1）onHide：页面隐藏 (小程序工具上面点击切后台，会出发)

  （2）onUnload：页面卸载

分享：onShareAppMessage滑倒底部：onReachBottom下拉刷新：onPullDownRefresh

数据绑定的实战应用

this.setData接收一个对象，如果拿到的数据本来就是对象，不用写花括号

Mustache语法解析

双花括号{{}}里面可以放js表达式，如：

{{a+b}}

{{a?b:c}}

多级数据 {{dataNum.reding}}

条件渲染

• 条件渲染：元素在某些条件需要显示，某些条件不需要显示* 语法：wx: if=""后面跟条件 wx: else后面可以不用跟条件
  
  

列表渲染（上）

列表渲染var data=[{},{}]

this.setdata(

post:(data)//赋值

引用{{item.数据}}

item为默认变量

wx:for-item:“变量名” 修改item变量名

通常是使用 来包裹列表下渲染是个好的习惯

setData只能存储一个js对象，所以当在data中保存的是数组形式的数据时，不能直接setData()，而是要setData({}).

onload:function() {
    var res=[{},{}.{}]
    this.setData({posts:res})
}

需要用到列表渲染的组件可以用block标签包住

wx:for="{{posts}}" 代表要for循环posts中的每一项

wx:for-item="item" item是小程序内置的默认的变量，指当次循环的对象，可以按照js中for in循环里的 i 去理解

{{item.view}} 在block里包含的组件需要用到js数据的时候，要在数据名前面加上item. 就可以使每次的数据刚好对应当前正在 循环的数据

<block wx:for="{{posts}}"  wx:for-item="item"  >
    <view>{{item.view}}</view>
</block>

wx:for-item=“item” 可以省略不写，当然item值也可以自定义修改为任意值，如：wx:for-item=“a” ，不过一般也没有必要修改。

列表渲染（下）

<block wx:for="{{posts}}" wx:key="idx" wx:for-index="idx" wx:for-item="item" >
...
</block>

① wx:key 不写会有警告
② wx:for-index //重命名index（默认值 index）
③ wx:for-item //重命名item （默认值 item）
④ //建议循环时使用

什么是事件

事件捕捉：用来捕捉用户操作或小程序内置事件（如：点击 长按等）
移动端：tap
网页端：click

bind来捕捉事件执行回调函数

bind:tap=“onTap”

onTap ：事件的回调函数

tap ： 事件

bind ：捕捉事件

事件：用户在操作的时候会产生事件，比如用户点击的时候，产生 tap 事件，产生了这个事件是没有意义的，用代码捕捉到这个 tap 事件才是有意义的

为什么要捕捉事件：需要在捕捉到事件之后执行一定的操作，比如页面跳转的操作。

捕捉事件之后就需要执行函数，在函数中定义要执行的操作

在小程序里面，可以使用 bind : 事件名称 的方式捕捉事件

路由函数与事件冒泡

路由函数NavigateTo和RedirectTo的区别

小程序的路由系统

所谓的路由系统是指从一个页面跳转到另一个页面。小程序有非常多的路由函数可以帮忙跳转页面

wx.navigateTo({url})：相当于跳转到当前页面的子页面，因为可以从子页面返回到父页面去；会保留当前的父页面并跳转到子页面，最多能保留5个页面，页面栈里面的元素最多不能超过 10 个；跳转时父页面不会执行声明周期函数。

wx.redirectTo({url})：关闭当前页面跳转到另外一个页面去，是不能返回的，只不过在新版的小程序中多了一个回到主页的功能

wx:navigateTo 是不会关闭当前页面的，当前页面会被保留在栈里面的

wx:refirectTo 在跳转之后会销毁当前页面

Catch与Bind事件的区别

catch:tap： 阻止事件继续冒泡，也就是会触发当前节点的事件，不会触发父节点
bind:tap： 不会阻止事件冒泡。
如果第一层是 bind 第二层是catch 第三层是catch 那么第一层触发会冒泡到第二层，但是第二层catch阻止冒泡，所以第三层是无响应的。

js模块的导入导出（require与import）_1

导出：

var postList = [];

export{

  postList

}

导入：

import {postList} from '../../data/posts-data'

(此处只可使用相对路径，写绝对路径会报错)

二、require写法：

导出：

var postList = [];

module.exports = {

   postList: postList

 }

导入：

var postData = require('../../data/posts-data')

(此处只可使用相对路径，写绝对路径会报错)

用列表渲染展示导入的数组数据

基于上次的内容已经在对应页面js文件中导入数据对象，如何把数据渲染到页面，具体操作：

在对应页面加载页面函数：

onLoad:funtion(){

    this.setData({

      postList:postList // 时候用ES6可以简化：postList 

     })

}

es6新特性：
(1）变量名和数据相同，直接写一个
(2)匿名函数简化 onLoad:function() {} --> onLoad(options)

从列表页面跳转到文章详情页面

跳转事件，需要传参 (event){}

列表渲染的wxkey赋值规则

• 如果使用wx:for，小程序建议增加wx:key，可以提高性能

<block wx:for="{{posts}}" wx:for-item="post" wx:key="postid">

• key的值不需要用花括号

• key的值必须是唯一

• 老师没有讲为什么不需要花括号，是因为key是要定义一个不重复的字段项，告诉他值即可，而不是一个表达式。包括for-item也是，告知他item用什么值，下面用需要用到item就必须用{{}}

• 数据量少的情况下可以忽略性能问题

事件冒泡的具体应用

bind组件内可以使用catch阻止子元素事件冒泡
当父元素有点击跳转时，子元素又需要点击触发其它任务，就可以应用catch:tap来阻止冒泡，子元素就能单独触发

Flex高级应用（2）主轴和交叉轴

align-items设置flex布局中交叉轴的子元素的排布方式

justify-content设置flex布局中主轴的子元素的排布方式

没有宽度就无法向右去偏移，所以解决方式是加上宽度属性
justify-content : flex-end;

1、 对在Flex布局中，有一个主轴和交叉轴理解

 主轴（main）方向可以理解与容器排列的方式相关，容器的排列方式为水平(row)，即主轴为水平主轴，对应的交叉抽是垂直。

在Flex的对齐方式有两个属性：

justify-content:表示主轴的对齐方式；

algin-item:表示交叉轴的对齐方式；

结合上面的概念具体理解：

1、如果容器的排列方式为水平(row)的方式，justify-content表示主轴水平的对齐方式，而algin-item表示交叉抽垂直方向的对齐方式；而容器的排列方式为column，justify-content表示主轴垂直的对齐方式，而algin-item表示交叉轴水平方向的对齐方式。

例如在post页面中 我们时候用post-container容器设置排列为垂直（column）,这是的主轴是Y轴，而交叉轴为X轴，如果想让页面的内容居中对齐就需要对交叉轴（Y轴）设置对齐方式为居中了，即aligin-item=center

相同的道理，在postDetail页面 cirecle容器设置水平排列（row),如果设置两张图片在容器右边对齐就要使用主轴对象(X轴)，即justify-content:flex-end

2、在使用Flex布局后，原有float ,clear,vertical-align属性将失效。