微信小程序01---小程序初始

今日总结

1、小程序的介绍

①小程序是什么

②小程序的发展史

③小程序的优势和不足

④如何学习微信小程序

2、项目的目录结构

3、常用配置

①配置导航窗口

②配置页面

③配置tabBar

4、WXML

①组件（标签）的使用

②数据绑定

③逻辑渲染

④列表渲染

⑤wx:key

⑥模板

⑦引用

5、WXSS

①尺寸单位rpx

②样式导入 @import

③小程序的样式选择器

6、小程序中的JS

①小程序中的js和浏览器中和node中的区别

②小程序中js的加载执行顺序

③小程序中js的执行环境

7、数据渲染

①小程序和浏览器中有什么不同

②小程序中如何渲染

8、程序和界面

APP

Page

9、事件

①事件绑定

②常见的事件类型

③阻止事件冒泡 catch

④事件捕获 capture-bind

⑤事件传参

一些其他

1、组件间传值

2、websocket

今日总结

1、小程序的介绍

①小程序是什么

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

任何一个普通的开发者，经过简单的学习和练习后，都可以轻松地完成一个小程序的开发和发布。

②小程序的发展史

移动网页在拍摄、录音、语音识别、二维码等方面能难使用这些功能

---> 之后微信提供了JS-SDK，开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API，实现了这些功能，但是，这仅仅是可以实现，但并不好用

---> 随着微信的推广，越来越多的人来使用微信，基于这一点，微信研发了微信小程序

③小程序的优势和不足

优势：

微信助理，容易推广。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口。这些入口有助于企业更好的获取流量，从而进行转化、变现。
使用便捷。用户在使用小程序时，只需要轻轻点一下就可以使用，更加符合用户对使用方便、快捷的需求，所以小程序的用户数量不断增加。
体验良好，有接近原生app的体验。在微信生态里，小程序在功能和体验上是可以秒杀掉 H5 页面的，H5 页面经常出现卡顿、延时、加载慢、权限不足等原因，而这些问题在小程序里都不会出现。
成本更低，从开发成本到运营推广成本，小程序的花费仅为APP的十分之一，无论是对创业者还是传统商家来说都是一大优势。

不足：

单个包大小限制为2M，这导致无法开发大型的应用，采用分包最大是20M（这个值一直在变化，以官网为准）。
需要像app一样审核上架，这点相对于H5的发布要麻烦一些。
处处受微信限制。例如不能直接分享到朋友圈，涉及到积分，或者虚拟交易的时候，小程序也是不允许的。

④如何学习微信小程序

巧妙使用官方文档

2、项目的目录结构

3、常用配置

①配置导航窗口

全局配置 | 微信开放文档

②配置页面

一般情况下我们会给每个页面创建一个文件夹，所以我们首先在pages下创建一个文件夹。

小程序直接给我们提供了创建页面的功能，右键这个文件夹，点击创建新建Page即可直接生成页面所需的文件。

生成文件之后，所有的页面都需要在的pages属性中声明之后，才可以访问，小程序会默认先加载pages属性中第一个页面。如果开发过程如果我们需要调试别的页面，我们可以添加一个新的编译模式。

③配置tabBar

tabbar中的list属性至少有2个元素，最多有5个

在移动端经常会涉及到tabbar的使用，小程序直接给我们提供了配置tabbar的方法。

这里需要注意的是，tabbar的图标不能是线上的地址，需要提前准备好放到项目里，一般情况下，这些静态资源可以放在assets文件夹下。这些图标大家可以从阿里矢量图标库中进行下载 iconfont-阿里巴巴矢量图标库。

在文件中，与’window‘同级（下面只是示例）





"tabBar": {



 



    "selectedColor": "#ff0000",



 



    "list": [



 



      {



 



        "pagePath": "pages/newsList/newsList",



 



        "text": "首页",



 



        "iconPath": "./assets/",



 



        "selectedIconPath": "./assets/"




 



      },



 



      {



 



        "pagePath": "pages/talk/talk",



 



        "text": "聊天室",



 



        "iconPath": "./assets/",



 



        "selectedIconPath": "./assets/"




 



      },



 



      {



 



        "pagePath": "pages/mvList/mvList",



 



        "text": "MV",



 



        "iconPath": "./assets/",



 



        "selectedIconPath": "./assets/"




 



      },



 



      {



 



        "pagePath": "pages/mine/mine",



 



        "text": "个人中心",



 



        "iconPath": "./assets/",



 



        "selectedIconPath": "./assets/"




 



      }



 



    ]



 



  },

详情请看官方文档

4、WXML

①组件（标签）的使用

常见的组件（标签）：

<view>：块状元素

<text>：行内元素

<image>：块状元素

<button>：块状元素

<input>：块状元素，没有边框

<rich-text>：利用<rich-text nodes='{{变量名}}'></rich-text>来解析富文本

<scroll-view>：要设置固定高度，子元素炒熟父元素高度时会自动出现滚动条，结合一些属性来看，使用起来比较方便

……

因为这些时微信小程序已经封装好的组件，会有一些不同于html的属性，具体情况具体组件还是要看官方文档

②数据绑定

数据定义

在界面对应的JS文件中的data属性上进行定义数据





Page({



 



  /**




 



   * 页面的初始数据



 



   */




 



  data: {



 



    mvList: [],



 



    offset: 0,



 



    limit: 10,



 



    isLoading: false




 



  },



 



  ...



 



})

引用数据

{{}}

除了引用数据之外，这里还可以进行一些计算，最终显示的结果是计算之后得到的结果。但是不可以调用函数

小程序中任何需要获取数据的地方都需要用{{}},包括标签内的属性。

③逻辑渲染

wx:if wx:else wx:elif

hidden

与vue中 v-if 与 v-show 相似，就不过多阐述了

④列表渲染

wx:for="{{数组}}"

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。





<view wx:for="{{array}}">




 



  {{index}}: {{}}




 



</view>

js中：





Page({



 



  data: {



 



    array: [{



 



      name: '小明',



 



    }, {



 



      name: '小红'




 



    }]



 



  }



 



})

使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名。





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




 



  {{idx}}: {{}}




 



</view>

⑤wx:key

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

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

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

提高重排效率

例：





<view wx:for="{{mvList}}" wx:key="id" bindtap="toMvDetail" data-id="{{}}" class="mvList">




 



    <image src="{{}}" mode="widthFix"></image>




 



    <view>{{}}</view>




 



    <view>{{}}{{[0].transNames[0]?'--'+[0].transNames[0]:''}}</view>




 



  </view>

⑥模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。然后在 <template/> 内定义代码片段，如：





<template name="msgItem">




 



  <view>




 



    <text> {{index}}: {{msg}} </text>




 



    <text> Time: {{time}} </text>




 



  </view>




 




</template>

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入。




msgList:[



 



      {



 



        index: 0,



 



        msg: '这是一段模板',



 



        time: '2020-10-10'




 



      }



 



    ]



 




<view wx:for="{{msgList}}">




 



  <template is="msgItem" data="{{...item}}"></template>




 




</view>

⑦引用

WXML提供两种文件引用方式 import 和 include

import

1、import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。

2、只是引入<template/> 中的内容

例：

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




<!--  -->



 



<template name="item">



 



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




 



</template>

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





<import src=""/>




 




<template is="item" data="{{text: '测试'}}"/>

2、include

include 可以将目标文件中除了 <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置。

5、WXSS

WXSS与CSS最大的不同在于两点

①尺寸单位rpx

在WXSS中，引入了rpx（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单。

在小程序中，规定所有手机的屏幕宽度都是750rpx，所以在不同尺寸的屏幕下1rpx的宽度都不同。

1rpx = （屏幕宽度/750）px

在iphone6手机下，屏幕宽度是375px，所以1rpx=0.5px。

所以一般在开发时会选用iPhone6的机型作为模型机

②样式导入 @import

在小程序中，样式引用是这样写：

@import './test_0.wxss'

由于WXSS最终会被编译打包到目标文件中，用户只需要下载一次，在使用过程中不会因为样式的引用而产生多余的文件请求。

③小程序的样式选择器

目前支持的选择器有：

6、小程序中的JS

①小程序中的js和浏览器中和node中的区别

浏览器中JS：

Node中的JS：

ES
NPM
Native

小程序中的JS：

ES
小程序框架
小程序API

②小程序中js的加载执行顺序

小程序的执行的入口文件是。并且会根据其中 require 的模块顺序决定文件的运行顺序。

③小程序中js的执行环境

小程序目前可以运行在三大平台：

iOS平台，包括iOS9、iOS10、iOS11
Android平台
小程序IDE

7、数据渲染

①小程序和浏览器中有什么不同

浏览器中渲染是单线程的。

而在小程序中的运行环境分成渲染层和逻辑层，JS 脚本工作在逻辑层。小程序的通讯模型是多线程的，但是js一直都是单线程的

②小程序中如何渲染

我们看看小程序是如何把脚本里边的数据渲染在界面上的。

WXML模板使用 view 标签，其子节点用 {{ }} 的语法绑定一个 msg 的变量。

在 JS 脚本使用方法把 msg 字段设置成 “Hello World”。

Page({

onLoad: function () {

({ msg: 'Hello World' })

}

})

从这个例子我们可以看到3个点：

1.渲染层和数据相关。

2.逻辑层负责产生、处理数据。

3.逻辑层通过 Page 实例的 setData 方法传递数据到渲染层。

只有通过()方法改变的才能将改变了的数据更新到视图层，单纯改变数据的话并不会改变渲染界面

8、程序和界面

APP

宿主环境提供了 App() 构造器用来注册一个程序App，需要留意的是App() 构造器必须写在项目根目录的里，App实例是单例对象，在其他JS脚本中可以使用宿主环境提供的 getApp() 来获取程序实例。

onLaunch: 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow：当小程序启动，或从后台进入前台显示，会触发 onShow
onHide：当小程序从前台进入后台，会触发 onHide
onError：当小程序发生脚本错误，或者 API 调用失败时，会触发 onError 并带上错误信息。
其他字段：可以添加任意的函数或数据到 Object 参数中，在App实例回调用 this 可以访问。

小程序全局数据

小程序的JS脚本是运行在JsCore的线程里，小程序的每个页面各自有一个WebView线程进行渲染，所以小程序切换页面时，小程序逻辑层的JS脚本运行上下文依旧在同一个JsCore线程中。

App实例是单例的，因此不同页面直接可以通过App实例下的属性来共享数据。App构造器可以传递其他参数作为全局属性以达到全局共享数据的目的。

在其他JS中可以通过getApp()获取App实例，之后可以获取到定义在App实例上的数据。

Page

生命周期

onLoad：生命周期函数--监听页面加载，触发时机早于onShow和onReady

onReady：生命周期函数--监听页面初次渲染完成

onShow：生命周期函数--监听页面显示，触发事件早于onReady

onHide：生命周期函数--监听页面隐藏

onUnload：生命周期函数--监听页面卸载

注意事项：

直接修改 Page实例的而不调用是无法改变页面的状态的，还会造成数据不一致。
由于setData是需要两个线程的一些通信消耗，为了提高性能，每次设置的数据不应超过1024kB。
不要把data中的任意一项的value设为undefined，否则可能会有引起一些不可预料的bug。

页面的用户行为：

onPullDownRefresh 下拉刷新

监听用户下拉刷新事件，需要在的window选项中或页面配置中设置enablePullDownRefresh为true。当处理完数据刷新后，可以停止当前页面的下拉刷新。

onReachBottom 上拉触底

监听用户上拉触底事件。可以在的window选项中或页面配置中设置触发距离onReachBottomDistance。在触发距离内滑动期间，本事件只会被触发一次。

onPageScroll 页面滚动

监听用户滑动页面事件，参数为 Object，包含 scrollTop 字段，表示页面在垂直方向已滚动的距离（单位px）。

onShareAppMessage 用户转发

只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮，在用户点击转发按钮的时候会调用，此事件需要return一个Object，包含title和path两个字段，用于自定义转发内容





// page.js



 




Page({



 



onShareAppMessage: function () {



 



 return {



 



   title: '自定义转发标题',



 



    // 自定义点击链接需要跳转的页面，默认当前页面



 



   path: '/page/user?id=123'




 



 }



 



}



 



})

9、事件

①事件绑定

在小程序中绑定事件可以以bind开头然后跟上事件的类型，如bindtap绑定一个点击事件，对应的值是一个字符串，需要在page构造器中定义同名函数，每次触发事件之后就会执行对应函数的内容。





<view bindtap="handleTap">点击事件</view>




 




<view bind:tap="handleTap">另一种写法</view>




 




// pages/my/index.js



 




Page({



 



  handleTap(){



 



    ("执行了点击事件");



 



  }



 



})

②常见的事件类型

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

③阻止事件冒泡 catch

在小程序中除了通过bind之外，还可以通过catch进行事件绑定，通过catch绑定的事件不会触发事件冒泡。

④事件捕获 capture-bind

事件的触发分为两个阶段，首先是捕获阶段，其次是冒泡阶段。默认情况下事件都是在冒泡阶段触发。如果希望事件可以在捕获阶段触发，可以通过capture-bind进行事件绑定。

⑤事件传参

在小程序中进行事件传参不能像传统的Web项目中一样，在括号里写参数。在小程序中需要在标签上通过data-方式定义事件所需的参数。

每个事件回调触发时，都会收到一个事件对象，通过这个对象可以获取路由传递的参数。

handleTap(e){

("执行了点击事件");

// 通过currentTarget中的dataset属性可以获取时间参数

();

}

关于这个事件对象其他属性

type 事件类型
timeStamp 页面打开到触发事件所经过的毫秒数
target 触发事件的组件的一些属性值集合
currentTarget 当前组件的一些属性值集合
detail 额外的信息
touches 触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches 触摸事件，当前变化的触摸点信息的数组

这里需要注意的是target和currentTarget的区别，currentTarget为当前事件所绑定的组件，而target则是触发该事件的源头组件。

微信小程序01---小程序初始

今日总结

1、小程序的介绍

①小程序是什么

②小程序的发展史

③小程序的优势和不足

④如何学习微信小程序

2、项目的目录结构

3、常用配置

①配置导航窗口

②配置页面

③配置tabBar

4、WXML

①组件（标签）的使用

②数据绑定

③逻辑渲染

④列表渲染

⑤wx:key

⑥模板

⑦引用

5、WXSS

①尺寸单位rpx

②样式导入 @import

③小程序的样式选择器

6、小程序中的JS

①小程序中的js和浏览器中和node中的区别

②小程序中js的加载执行顺序

③小程序中js的执行环境

7、数据渲染

①小程序和浏览器中有什么不同

②小程序中如何渲染

8、程序和界面

APP

Page

9、事件

①事件绑定

②常见的事件类型

③阻止事件冒泡 catch

④事件捕获 capture-bind

⑤事件传参

一些其他

1、组件间传值

2、websocket

相关文章