笔记*小程序-基础

• 创建项目 : 项目名称、AppId、不使用云服务
• 设置黄色不报错："checkSiteMap"：false
• 创建页面、根目录里面配置tabBar

1. 小程序事件处理函数

• 最常用的事件：tap( 轻敲事件 )，input( 输入文字 )，change( 改变事件 )

2. target和currentTarget两者的区别

• target：获取的是触发事件的源头元素
  currentTarget: 因为事件是冒泡进行触发，在冒泡触发到上级元素的事件时，currentTarget得到的是当前触发事件的元素。

3. 小程序中的事件传参

<button bindtap="myTap" data-index="{{0}}">按钮</button>
// 访问传递的参数数据 console.log( e.target.dataset.index )

4. bindinput事件获取文本框输入数据的方式

<button bindtap="myTap" data-index="{{0}}">按钮</button>
// 获取文本框的值的方式是通过事件对象的 detail属性来获取 console.log(e.detail.value) this.setData({ msg: e.detail.value })

5. 小程序中导航跳转的方式

A.声明式导航: 使用navigator标签进行导航
以前html中a标签的写法： <a href="https://www.baidu.com">百度

1).如果想要导航的那个页面是tab栏的页面，就必须写 open-type="switchTab"

<navigator url="/pages/logs/logs" open-type="switchTab">日志页面</navigator>

2).如果想要导航的那个页面是非tab栏的页面，就必须写 open-type="navigate"，或者省略不写也行

<navigator url="/pages/info/info" open-type="navigate">详情页面</navigator>

3).如果想要进行后退导航，就必须写 open-type="navigateBack"

<navigator open-type="navigateBack">后退</navigator>

B.编程式导航：编写js代码进行导航
1).导航到tabBar页面
wx.switchTab( { url:'/pages/index/index', /* 后面的三个函数都是可选的*/ success(){ },fail(){},complete(){} } )
2).导航到非tabBar页面
wx.navigateTo( { url:'/pages/info/info' } )
3).实现后退导航
wx.navigateBack() // 后退一页
wx.navigateBack({ delta:3 }) //后退三页

6. 导航传递参数

A.声明式导航传参
<navigator url="/pages/info/info?username=jack&age=20" open-type="navigate">详情页面</navigator>

B.编程式导航传参
wx.navigateTo( { url:'/pages/info/info?username=jack&age=20' } )

7. 获取传递的参数数据

为了方便使用，一般会将参数数据保存在data中
this.setData({ query: opt })

8. 下拉刷新

1. 开启下拉刷新: 在页面josn配置文件中,将enablePullDownRefresh设置为true(推荐设置为局部开启)
2. backgroundColor 窗口的背景颜色
3. backgroundTextStyle 设置loading 样式 仅支持dark / light
4. 页面有个监听 onPullDownRefresh()函数 可操作
5. 停止下拉刷新 操作完毕之后 调用wx.stopPullDownRefresh()

9. 上拉触底

• 页面.js文件中有个 onReachBottom 函数
• isloading:false 设置节流 等于false可以发起请求
• 在页面.josn 中, onReachBottomDistance属性配置触底距离,默认是50px,设置的时候不用写单位

10. WXS

• wxs页面的函数可以被wxml 调用
• 典型的应用场景是过滤器
• 不支持es6及以上的语法形式,支持var
• 遵循Commonjs 规范
• wxs具有隔离性,不能调用js中的函数、不能调用小程序中的API
• 优点： 在ios设备上，小程序内地wxs会比Javascript代码快2~20倍

1. 内嵌wxs脚本(必须提供module属性指定当前wxs的模块名称)
   
2. 外联wxs脚本

• 编写在以 .wxs 为后缀名的文件内
  
• 使用wxs外联脚本时,必须为<wxs>标签添加module属性和src属性(src属性必须是相对路径)
  

11. 自定义组件

• 根目录中，创建components文件夹 => 组件名文件夹 => 鼠标右键创建
• 局部引用
  
• 全局引用
  
• 组件样式隔离 都互不影响(只有class样式选择器会有隔离的效果,id,属性,标签选择器不受样式隔离的效果)
• 修改组件的样式隔离选项可通过stylelsolation设置(一般不更改)
  
• 可选值
  methods方法
• 事件处理函数和自定义方法要定义到methods节点中,自定义方法以 _ 开头
  properties属性
• 用来接收外界传递到组件的数据
  
  注意
• data 更倾向于存储组件的私有数据
• properties更倾向于存储外界传递到数组中的数据
• this.data和this.properties 指向的是同一个对象。data和properties的数据都会保存到这个对象中去。

12. 组件数据监听observers

在组件中，添加数据监听器，语法格式如下：
Component({
data(){
num: 0
},
observers:{
'num': function(numValue){ // num是要监听的值 numValue是对应的新值
console.log(numValue);// 获取的是最新的num的值
},

'rgb.**': function( newRGB ){
// ...
}
}
})
监听对象中单个或多个属性的变化

监听对象中所有属性的变化(可以使用通配符**来监听对象中所有属性的变化)

13. 组件纯数据字段

概念:纯数字字段指的是那些不用于界面渲染的data字段

• 设置纯数据字段依靠正则来进行匹配的，如下：
  Component({
options:{
<!-- 使用pureDataPattern 来设置一个正则，只要匹配这个正则的内容，都视为 纯数据字段 -->
pureDataPattern: /^_/
},
data(){
num: 0,
_total:0
}
})

14.小程序应用的生命周期

15.小程序页面的生命周期函数

16.组件的生命周期

组件生命周期写在lifetimes节点中(新的定义方式,优先级最高)

17.组件页面的生命周期

自定义组件的行为依赖于页面状态的变化,此时就需要用到组件所在页面的生命周期

pageLifetimes 节点

组件所在页面的生命周期函数,需要定义在pagelLifetimes 节点中

18.单个组件插槽(默认每个组件使用一个插槽)

19.启用多个插槽

在小程序的自定义组件中,需要使用多个插槽时,可以在组件的js中,通过如下方式进行启用

20.自定义组件—父子组件之间的通信

1.父子组件之间通信的3种方式
(1)属性绑定 - 实现父向子传值,只能传递普通类型的数据

子组件在properties节点中声明对应的属性并使用

(2)事件绑定 - 用于实现子向父传值,可以传递任意数据


步骤3:在子组件的js中,通过调用this.triggerEvent('自定义事件名称',{ 参数对象 }),将数据发送到父组件(参数对象为可选参数)

(3)获取组件实例 - 父组件还可以通过 this.selectComponent( “id或class选择器” )获取子组件实例对象 .这样就可以直接访问子组件的任意数据和方法,调用时需要传入一个选择器,例如 this.selectComponent( “.my-component” ).

21.behaviors实现小程序组件共享

调用Behaviors( Object obgect)方法即可创建一个共享的behaviors实例对象,供所有组件使用:

22.vant组件库

• 安装之前看下有没有package.json(没有的话运行npm init -y 初始化)
• 根据官方文档安装(@1.3.3)
• 构建npm完成后在详情里面勾选使用npm模块

23.定义和使用css变量

在自定义组件中使用vant组件时,覆盖样式,需要在 options里面 开启styleIsolation:‘shared’

小程序里面定制全局主题样式

可以翻看vant的定制主题里面的配置文件 less文件,我们使用时把前面的@改成–

23.API Promise化

API Promise化,指通过额外的配置,将官方提供的,基于回调函数的异步API,升级改造为基于Promise的异步API,从而提高代码的可读性,维护性,避免回调地狱的问题

安装miniprogram-api-promise

安装的包都是需安装在 node_modules 里面的,小程序不能直接读取,通过构建,把包迁移到miniprogram_npm里面

• 需要在文件夹里面删除miniprogram_npm
• 构建
• 实现API 的promise化
  
• 调用promise化之后的异步API
  

24.全局数据共享

在小程序中可以使用mobx-miniprogram 配合 mobx-miniprogram-bindings 实现数据共享

• mobx-miniprogram 用来创建Store实例对象
• mobx-miniprogram-bindings 用来把Store中的共享数据或方法,绑定到组件或页面中使用

安装mobx相关包

创建Store实例对象

• 在根目录里面创建store文件夹,里面放store.js
  

将Store 中的成员绑定到页面中

在页面中使用Store中的成员

将Store中的成员绑定到组件中的实现思路

在组件中使用Store中的成员

25.分包

在app.json里面subpackges节点中设置(每个包不超过2G,所有包不超过16G)
引用原则:1.主包无法引用分包私有数据, 2. 分包之间不能相互引用私有资源 , 3.分包可以引用主包内的公共资源

独立分包

• 将普通分包改造为独立分包
  在分包上面添加 “independent”: true 就可以不依赖主包独立加载
• 引用原则: 独立分包和普通分包以及主包之间,是相互隔绝的,不能相互引用彼此的资源

分包预下载

预下载分包的行为,会在进入指定的页面时触发,在app.json中,使用preloadRule节点定义分包的预下载规则:

分包预下载的限制:同一个分包中的页面享有共同的预下载大小限额2M

26. 自定义tabBar

详细看小程序官方文档,基础能力 => 自定义tabBar教程

• 在 app.json 中的 tabBar 项指定 custom 字段 , “custom”: true,
• 在小程序根目录中创建 custom-tab-bar 文件夹 ()文件夹名是固定的) => 新建 component 创建index入口文件
• 查看vant小程序组件中Tabbar 标签栏

小程序中npm的使用

• npm下载和安装的插件,小程序不一定能使用
• 小程序不支持依赖了nodeJS api的插件,不支持依赖了 浏览器内置对象的插件. 不支持 依赖了 c++ 内容的插件

1. 安装vant组件库

• 首先要要初始化 package.json文件, 要在根项目中执行命令 : npm init -y
  通过npm 安装vant组件库(建议指定版本@1.3.3)
• 执行命令来安装vant组件库,命令 :
  https://www.escook.cn/docs-uni-shop/mds/1.start.html