乐趣区

关于javascript:微信小程序开发学习笔记

jiezi

小程序的意识（初步概括有哪些）

小程序的数据绑定

在 data 中定义数据
在页面中应用 mustache 示意（和 React 中统一）

小程序的列表展现

vx:for
<view wx:for=”{{students}}”>{{item}}</view>

小程序的事件监听

<view> 以后：{{counter}}</view>
<button size=”mini” bindtap=’functionname ‘></button>
通过 this.setData 来扭转 Data 中的数据

小程序的 MVVM 架构

Model View ViewModal
视图层 逻辑层 MINA 框架
wxml js 数据绑定 &&DOM 监听
// 编程范式
1. 命令式编程：原生操作 DOM
2. 申明式编程：间接操作 data

小程序的生命周期（以 app.js 为例）

onLaunch: 页面初始化实现，个别在这里获取用户信息 wx.getuserinfo()

onShow: 小程序界面显示的时候执行

onHide: 界面暗藏时候被执行。当用户退出小程序的时候，数据状态会继续将近两个小时
工夫内用户再次进入小程序不会再触发 onLaunch

onError: 程序产生谬误的时候执行

注册 APP 的时候，个别会做一些什么？

1. 依据小程序的关上场景进行场景散发，在 onShow 中的 option 参数中的 scene 字段，能够依据文档查找相应场景
2. 只想执行一次的能够放在 onLaunch 中，每次进来都想执行，就放在 onShow 中
3.wx.getUserInfo 获取用户信息。官网据说要废除？记于 2020.03.09 日

获取用户信息的办法

  • 后面提到的要被废除然而任然没有废除的 getUserInfo
  • 用具备 open-type 为 getUserInfo 的按钮绑定 bindgetUserinfo 来获取用户信息
  • 应用 open-data 组件展现用户相干信息，type 进行用户属性抉择

4. 定义全局数据，应用 getApp 办法来获取 App.js 中的实例对象

注册 Page 的时候产生了什么

1. 在生命周期函数中发送网络申请，做数据处理和展现

page 中的生命周期和 App 中相似, 依照执行顺序排列为
onLoad：页面被加载时候执行
onShow：页面显示进去时候执行
onReady：页面首次渲染实现，第二次渲染就不执行了
onHide：页面暗藏时候的时候执行
onUnload：页面跳转到另外一个页面的时候
2. 初始化一些数据，寄存在 page 中的 data 外面
3. 监听 wxml 中的相干事件
4. 其余的事件监听

  • 滚动 onPageScroll
  • 下拉到底部 onReachBottom
  • 下拉刷新 onPullDownRefresh
  • 点击 tabbar 时候的监听 onTabItemTap

组件

Text 组件

  • Text 组件相当于一个行内元素，间断的 Text 元素会在同一行（不加额定款式的状况下）
  • Text 组件默认不可选中，除非把 selectable 设置为 true
<text selectable='{{true}}'>hello word</text> 等效于 <text selectable>hello word</text>

selectable: 决定文本是否能够长按抉择
space：决定文本空格的大小，nbsp ensp emsp 默认为 nbsp ensp 为字母字符大小 emsp 要：一个中文字符的大小
decode：是否解码文本，<text>5>3</text> 当 decode 为 true 的时候才会正确解码

Text 组件 api

Button 组件

就是一个 button，用 bindtap 绑定事件
button 组件 api

View 组件

等效于 div，一个简略的块元素
view 组件 api

image 组件

bindload 监听图片加载实现事件
wx.chooseImage 来让用户抉择图片
lazy-load：图片的懒加载，等屏幕行将进入屏幕之后再进行加载
mode: 图片的笼罩模式，和 backgroudsize 属性来互相理解
image 组件 api

Input 组件

input 默认通明没有边框
type 定义 input 的限度值
confirm-type 定义键盘右下角的按钮的 text
bindinput bindblur bindfocus 和 html 中的 onchange onblur 和 onfocus 一一对应
Input 组件 api

scroll-view 组件

实现一个能够部分滚动的 div
一个固定宽高设置 overflow-scrool- x 或者 - y 的 div
通过绑定 bondscroll 事件来监听滚动事件来获取 event 获取以后滚动地位
scrolltoupper/scrolltolowers
波及到滚动就能够联想到函数的防抖来优化
scroll-view 组件 api

组件的独特属性

id: 元素的标识符，个别每个元素的 ID 不一样
class：管制元素的款式
hidden：管制元素的暗藏
data-: 定义自定义数据
*bind*/catch* 元素的事件绑定

WXSS

行内款式 style 和 class 来混合润饰
全局款式在 app.wxss 中定义
波及到款式的权重问题

div > #title{color: blue;}             // 标签 +id = 100+1 = 101`

div > h3 #title.title{color: red;}         // 标签 + 标签 +id+ 类 = 1+1+100+10=112`

[lang=”en”] h3.title{color: green;}// 属性 + 标签 + 类 = 10+1+10 =21`

[lang=”en”] #title{color: gray;}         // 属性 +id = 10+100 = 110`

source：谬误题目题解


长于利用官网款式库的款式来做，能够节省时间

WXML

相似于 html 语法 ：能够写成单标签，也能够写成双标签
必须有严格的闭合 ：没有闭合会导致编译谬误
大小写敏感：class 和 Class 是不同的属性

Mustache 语法

能够用 {{}} 应用对应 js 中 data 总定义的变量在 wxml 中动静展现

条件判断

wxml 中常见的条件判断
三目运算符：

<view> {{isActive?"active":''}} </view>

wx:if-wx:elif-wx:el
通过不同分数显示不同的后果

<view wx:if="{{score>=90}}"> 优良 </view>
<view wx:elif="{{score>=80}}"> 良好 </view>
<view wx:elif="{{score>=60}}"> 及格 </view>
<view wx:else> 不及格 </view>

通过 hidden 属性暗藏的时候，通过设置组件的 display：none
通过逻辑判断来暗藏的时候，组件不会渲染在 dom 中
当某个子元素须要常常暗藏显示的时候，应用 hidden 属性来管制
否则用条件判断来判断是否显示

wx:for 列表渲染

应用 wx:for 对一个可遍历对象（数组，字符串等）进行渲染，主动生成对应的子元素变量 item 和 index
当遍历对象为数字的时候，会从零开始遍历到 数字 - 1 地位

<view wx:for="{{[abc,cba,ngb]}}">{{item}}{{index}}</view>
<view wx:for="{{9}}">{{item}}</view>// 0 1 2 3 4 5 6 7 8

block 标签

</block> 并不是一个组件，仅仅是一个包裹元素，不会在页面中作任何渲染，只承受管制属性
相当于 Fragment，用于包裹子标签无实际意义的空标签, 不会在 dom 中生成理论节点
只会在逻辑层起效
如果用 view 包裹的话，节约性能，且容易被全局款式影响

wx:for-item=’xxx’ wx:for-index=”i”

在遍历时候能够给默认的 item 和 index 进行从新定义名字，在多重遍历的时候，避免歧义用

<view wx:for="{{movies}}" wx:for-item="movie" wx:for-index="i">{{movie}}{{i}}</view>

key 的作用

<view wx:for="{{[abc,cba,ngb]}}" wx:key="{{index}}">{{item}}{{index}}</view>

和风行框架 vue 和 React 一样，key 值在虚构 dom 中的 diff 算法的比照起到至关重要的作用。当每个遍历子元素有惟一标识 key 的时候，子元素产生扭转的时候会依据 key 值对子元素进行部分批改。当没有 key 值得时候，就要全副替换后从新渲染，极大的影响性能。所以 key 的作用就是高效的更新虚构 dom

模板语法

template

能够在模板中定义代码片段，在不同的中央调用（是一种 wxml 代码的复用机制）
（之前的小程序不反对自定义组件，为了进行代码的复用进去的 template 机制）

// 模板中包裹的内容，在没有应用前，是不会进行任何的渲染的
<template name=“contentItem”>
  <button>{{btntext}}</button>
  <view>{{content}}</view>
</template>

<template is=“contentItem”data="{{btntext:' 按钮 ',content:'hhhhh'}}">

模板导入

将上述代码独自放在一个名为 template.wxml 文件夹中，须要应用的中央只须要用 improt 进行导入
相对路径和绝对路径均可

<import src="../../wxml/template.wxml">
<import src="/wxml/template.wxml">

include 进行模板导入的时候，罕用场景是多页面的 header 和 footer 的复用，反对循环导入
比方 AincluedB BincludeC 此时 A 也是 includeC 的
import 导入：

  • 次要是导入 template
  • 特点：你们进行递归导入（不能套娃）

include 引入：

  • 将公共的 wxml 中的组件抽取到一个文件中
  • 特点：不能导入 template/wxs，能够进行递归导入

WXS（wxscript）

官网：wxs 与 javaScript 是不同的语言，有本人的语法，并不和 javcScript 统一（不过基本一致：疯狂吐槽）
在 wxml 中不能间接调用 Page/Component 中定义的函数
然而在某些状况，咱们能够心愿应用函数来解决 WXML 中的数据（相似于 Vue 中的过滤器），这个时候就应用 WXS 了

  • WXS 的运行环境和其余 JavaScript 代码是隔离的，WXS 中不能调用其余 JavaScript 文件中定义的函数，也不能调用小程序提供的 API
  • WXS 函数不能作为组件的事件回调
  • 因为运行环境的差别，在 IOS 设施上小程序内的 WXS 会比 JavaScript 代码快 2 -20 倍。在 android 设施上二者运行效率无差别

wxs 的应用办法

间接在 wxml 中应用

<wxs module="info">
//JS 代码 不反对 ES6
var message="hello world"
var name="code why"
var sum=function(num1,num2){return num1+num2}
module.exports={
  message:message,
  name:name,
  sum:sum
}
</wxs>
<view>{{info.message}</iview>}

在独自文件中定义后引入, 不能应用绝对路径，必须应用相对路径

<wxs src="../../info.wxs" module="info"/>

wxs 的利用

定义一些罕用的数据处理函数，来在 wxml 间接对变量进行解决

//format.wxss
function priceFormat(price, number) {
    var number = number || 2;
    var f_price = parseFloat(price);
    return f_price.toFixed(number)
}
module.exports = {priceFormat: priceFormat}

//wxs.wxml
  <wxs src="../../wxs/format.wxs" module="format"/>
  <view>{{format.priceFormat(price,3)}}</view>

事件

常见事件

<button bindtap='handleBtnClick' size='mini'> 按钮 </button>

<button bind:tap='handleBtnClick' size='mini'> 按钮 </button>

<button catch:tap='handleBtnClick' size='mini'> 按钮 </button>

某些组件会有本人个性的事件类型，大家能够在应用组件时具体在文档中查看
其余的常见工夫类型：
touchstart: 手指触摸动作开始
touchmove：手指触摸后挪动
touchcancel：手指触摸动作被打断
touchend：手指触摸动作完结
tap：手指触摸后马上来到
longpress：手指触摸后，超过 350ms 来到，如果指定了事件回调函数登程了这个事件，tap 事件将不被触发 1
longtap：举荐用 longpress 代替

事件对象的剖析 event

了解 changtouches 和 touches 的区别
了解 currenttarget 和 target 的区别

事件参数传递

应用 data-xxx 在元素中定义
在办法中通过 event 元素的 event.target/currenttarget.dataset 获取

事件的冒泡和捕获(xxx 为事件类型)

事件捕捉阶段的事件绑定：captrue-bind:xxx
事件冒泡时候的事件绑定：bind:xxx
阻止事件持续传递的绑定形式:catchxxx

组件化开发

创立一个自定义组件

在我的项目目录下创立一个 components 文件夹，新建一个 component，蕴含四个文件

  • 首先须要在 json 文件中进行自定义组件的申明（将 component 字段设为 true 可将这一组文件设为自定义组件）
  • 在 wxml 中编写属于咱们组件本人的模板
  • 在 wxss 中编写属于组件本人的相干款式
  • 在 js 文件中，能够定义数据或组件外部的相干逻辑

应用自定义组件的细节注意事项

  • 因为 WXML 字节标签名只能是小写字母、中划线和下划线组合，所有自定义组件的标签名也只能蕴含这些字符（数字其实也行）
  • 自定义组件也是能够利用自定义组件的，利用办法相似于页面利用自定义组件的形式（应用 usingComponents 字段）
  • 自定义组件定义名字的时候，不要用 ’wx-‘ 为前缀
  • 如果在 app.json 的 usingCoponents 申明某个组件，那么所有页面和组件能够间接应用该组件（很多 UI 库的应援用形式）

自定义组件的款式注意事项

  • 组件内定义的款式不会对全局款式造成净化
  • 组件内不举荐应用 id 选择器, 属性选择器, 标签选择器

如果想要组件和 page 之间的 class 相互影响，
须要在 Component 中的 options 参数, 该参数能够配置多个值，不同的值

  • isolated 示意启用款式隔离，在自定义组件内外，应用 class 指定的款式将不会相互影响（个别状况下的默认值）；
  • apply-shared 示意页面 wxss 款式将影响到自定义组件，但自定义组件 wxss 中指定的款式不会影响页面；
  • shared 示意页面 wxss 款式将影响到自定义组件，自定义组件 wxss 中指定的款式也会影响页面和其余设置了 apply-shared 或 shared 的自定义组件。
Component({
  options:{styleIsolation:'apply-shared'}
})

组件和页面之间的通信

  • 数据：properties 在页面标签中增加数据，在组件的 properties 中接管，共事能够应用 observer 属性对值进行监听
properties{
  title:{
      type:String,
      value:''// 默认值  
      observer:function(newvalue,oldvalue){console.log(newvalue)
        console.log(oldvalue)
  }
  }
}
  • 款式：externalClasses 再页面标签中增加 class，在组件的 externalClasses 中做接管，用数组保留
  • 标签：slot 插槽

首先定义一个单插槽组件

// 插槽的定义
//mtyslot
<view> 这是组件的头部 </view>
<slot />
<view> 这是组件的尾部 </view>
---------------------------------------
// 插槽的应用
<mtyslot>
    <button size="mini"> 我是插入的按钮 </button>
</mtyslot>

<mtyslot>
    <text> 我是插入的文本 </text>
</mtyslot>

当应用多个插槽时候，须要给每一个插槽给一个 name 属性，且必须在 component 中的 options 中增加 multipleslot：true

// 插槽的定义
//mtyslots
<view> 这是组件的头部 </view>
<slot name="slot1"></slot>
<slot name="slot2"></slot>
<slot name="slot3"></slot>
<view> 这是组件的尾部 </view>
<button slot="slot1"></button>

组件中的 js 配置

Component({

  options:{multipleSlots:true},
})
  • 自定义事件：通过在组件中定义事件，并用 triggerEvent 进行事件散发后在父组件中接管，实现组件向页面中的数据传递
  • 操作组件对象：间接获取到组件对象，并且对组件的外部的值进行批改（不举荐应用，最好还是用自定义事件来进行对立批改）
// 获取到组件对象
//id 为组件在页面中应用的 id，class 为组件中的 class
const my_sel=this.selectComponent(id)
//const my_sel=this.selectComponent(class)
my_sel.setDate({xxxxxxxxxxxxxxxxxxxx})
// 对组件进行操作批改值

Component 结构器


网络申请

Page({data:{},
onLoad:function(options){
  //send request
  // 对应的域名须要配置
wx.request({
  url:'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  sucess:function(res){console.log(res)
}
})
}
})

网络申请的封装

export default function request(options) {return new Promise((resolve, reject) => {
   wx.request({
     url: options.url,
     method: options.method || get,
     data: optinos.data || {},
     sucess: function(res) {resolve(res)
     },
     fail: function(err) {reject(res)
     },
   })
 })
}



request({url: 'xxxxxxxxxxxxxxxxxxxx'}).then(res => {console.log(res)
}).catch(
 err => {console.log(err)
 }
)
退出移动版